随笔分类 -  canvas

Canvas入门08-绘制仪表盘
摘要：需求 实现下图所示的仪表盘的绘制。 分析 我们先来将仪表盘进行图形拆分，并定义尺寸。 我们绘制的逻辑： 1. 绘制中心圆 2. 绘制环外圈圆 3. 绘制环内圈圆 4. 绘制刻度内圈圆 5. 绘制刻度线 6. 绘制刻度文字 7. 绘制指针 定义圆 绘制中心圆 中心圆半径是10，圆心是画布中心。 绘制环 阅读全文
posted @ 2018-11-13 16:32 生活总得有些仪式感 阅读(2283) 评论(0) 推荐(1)
Canvas入门07- 自定义实现虚线的绘制
摘要：预备知识 直线的斜率 一条直线与某平面直角坐标系x轴正半轴方向的夹角的正切值即该直线相对于该坐标系的斜率。 对于一条直线 y = kx +b，k就是直线的斜率。 斜率的计算 对于一条已知的线段，求斜率θ，使用反正切函数 θ=arctan((y2 y1) / (x2 x1)) 在JavaScript中 阅读全文
posted @ 2018-11-08 15:41 生活总得有些仪式感 阅读(699) 评论(0) 推荐(1)
Canvas入门06-线段与像素边界
摘要：我们知道，使用以下2个API可以绘制一条线段： moveTo(x, y) 向当前路径中增加一条子路径，该子路径只包含一个点，此为线段的起始点 lineTo(x, y) 将线段的下一个点加入子路径中 但是你会发现，这条线段的宽度并不是1px，而是2px。 再画一条宽度为2px的线段。 这条线段宽度与第 阅读全文
posted @ 2018-11-06 15:04 生活总得有些仪式感 阅读(378) 评论(0) 推荐(0)
Canvas入门05-渐变颜色
摘要：线性渐变API: ctx.createLinearGradient(double x1, double y1, double x2, double y2) 创建一个渐变实例 (x1, y1) 渐变的起始点 (x2, y2) 渐变的终止点 gradient.addColorStop(offset: d 阅读全文
posted @ 2018-11-02 15:35 生活总得有些仪式感 阅读(2909) 评论(0) 推荐(0)
Canvas入门04-绘制矩形
摘要：使用的API: ctx.strokeRect(x, y, width, height) 给一个矩形描边 ctx.fillRect(x, y, width, height) 填充一个矩形 ctx.clearRect(x, y, width, height) 清除矩形区域 ctx.lineJoin = 阅读全文
posted @ 2018-11-02 14:50 生活总得有些仪式感 阅读(315) 评论(0) 推荐(0)
Canvas入门03-绘制弧线和圆
摘要：绘制弧线的API: 参数说明： centerX 圆心坐标x centerY 圆心坐标y radius 圆半径 startAngle 起始弧度 endAngle 结束弧度 anticlockwise 是否逆时针绘制，默认false，也就是顺时针绘制 对于一个圆来说，0弧度是从水平方向右侧开始的。 效果 阅读全文
posted @ 2018-10-30 10:05 生活总得有些仪式感 阅读(249) 评论(0) 推荐(0)
Canvas入门02-绘制直线
摘要：主要使用的API有： context.moveTo(x,y) 声明线的起始坐标 context.lineTo(x,y) 声明线的下一个坐标 context.fillStyle 声明线的填充颜色 context.fill() 填充 context.strokeStyle 声明线的颜色 context. 阅读全文
posted @ 2018-10-30 09:53 生活总得有些仪式感 阅读(698) 评论(0) 推荐(0)