随笔分类 - canvas
摘要：1.前言 简介：Konva.js - 适用于桌面/移动端应用的 HTML5 2d canvas 库 个人体验：原生的canvas只支持绘制基本的直线，矩形，文字，图片，扇形等，无法支持复杂的图形，移动，动画等，如果要支持更复杂的功能，就得引用相关库来实现，提升开发效率 本篇文章只是初步使用，更详细的
阅读全文
摘要：1.思路分析 监听页面尺寸变化（防抖），动态设置canvas大小 监听鼠标移动事件（节流），动态创建小球，小球包含大小，原点坐标，移动方向等信息，其内部方法支持移动和缩小 开启定时器，更新画布内容（清屏后根据数据重新渲染） 2.主函数 事件监听以及全局变量设定 开启循环定时器实时渲染，过滤无效小球（
阅读全文
摘要：1.绘制图片 相关api及其参数：ctx.drawImage() 参数 说明 参数一 图片对象 参数二，三 可选，图片裁剪的基点（原图左上角为原点） 参数四，五 可选，图片裁剪区域的宽高（基于原图大小） 参数六，七 画布的绘制起点坐标 参数八，九 可选，被裁剪图片显示出来的宽高（缩放） 注意：前5个
阅读全文
摘要：1.绘制网格 传入dom和分割线间隔进行渲染，网格线分为水平方向和垂直方向 <script> //绘制网格 function drwaGrid(dom = document.querySelector("canvas"),space = 50){ //获取画笔 var ctx = dom && do
阅读全文
摘要：1.前言 将以下数据渲染成饼图，数据格式： var data = [ {value:"10",title:"16-22的年龄人数"}, {value:"15",title:"23-30的年龄人数"}, {value:"25",title:"31-35的年龄人数"}, {value:"10",titl
阅读全文
摘要：1.绘制描边文本 说明：描边的属性是共用的，无论是绘制直线还是文字，所以有需要的话要单独设置描边颜色，相关语法如下 语法 说明 ctx.strokeStyle 设置描边的颜色（文本颜色） ctx.font 设置文本,语法与 CSS font 属性相同，详见 ctx.strokeText(str,x0
阅读全文
摘要：1.绘制圆弧轨迹 相关语法：ctx.arc(x,y,r,startRadian,endRadian,direction)，前5个参数必填： 参数 说明 x 圆心x轴坐标 y 圆心y轴坐标 r 半径大小 startRadian 起始弧度(单位Math.PI) endRadian 结束弧度(单位Math
阅读全文
摘要：1.绘制矩形轨迹 相关语法：ctx.rect(x,y,width,height)，根据传入的参数（起始坐标和宽高）用来绘制一个矩形轨迹 注意：ctx.rect()和ctx.lineTo()绘制的都是轨迹，需要配合stroke或者fill()才能在画布中看到效果 <script> var canvas
阅读全文
摘要：1.设置直线线帽的样式 相关语法：ctx.lineCap，通过赋值形式来设置直线线帽的样式，他有以下3个值： 值 说明 butt 默认 round 圆形线帽 square 正方形线帽 <script> var canvas = document.querySelector("canvas") var
阅读全文
摘要：1.画布大小 canvas默认的大小是 300*150，通过操作width/height属性可以设置画布的大小，属性值只能是具体是像素值，而不能是百分比。 <body> <div class="box"> <!-- 在标签中设置画布大小 --> <canvas width="400" height=
阅读全文
