.getContext("2d") >获取绘图接口 //2d .beginPath() >创建绘图路径开始点 .moveTo(x,y) >移动绘画点到x,y .lineTo(x,y) >绘制线条 .strokeStyle = "#000" >设置线条颜色 //黑色(#000) .fillStyle ...
分类：
其他好文 时间：
2017-01-13 08:02:24
阅读次数：
194
实现原理 利用HTML5的canvas，将解锁的圈圈划出，利用touch事件解锁这些圈圈，直接看代码。 复制代码 canvas里的圆圈画好之后可以进行事件绑定 复制代码 接着到了最关键的步骤绘制解锁路径逻辑，通过touchmove事件的不断触发，调用canvas的moveTo方法和lineTo方法来 ...
分类：
移动开发 时间：
2017-01-03 11:33:07
阅读次数：
204
1.HTML5 canvas moveTo() 方法 2.HTML5 canvas lineTo() 方法 ...
分类：
Web程序 时间：
2016-12-26 21:27:23
阅读次数：
172
画一波五角星： 美国队长图标 原理： （1）根据五角星的顶点，外顶点5个，内顶点5个，分成内外圆 （2）由三角函数可表示出每个顶点的位置 （3）利用canvas的lineTo()接口画图 上代码： 结果： ...
分类：
Web程序 时间：
2016-11-23 22:47:15
阅读次数：
351
划线 Canvas <script type="text/javascript">var c=document.getElementById("myCanvas");var cxt=c.getContext("2d");cxt.moveTo(10,10);cxt.lineTo(150,50);cxt ...
分类：
Web程序 时间：
2016-11-07 12:27:50
阅读次数：
389
1.需求 2.svg 2.1 预定义形状： 矩形 圆形 椭圆 线 折线 多边形 路径 2.2 path: 2.2.1 d: M = moveto // 移动到 M x y || m dx dy L = lineto // 直线 L x y (or l dx dy) H = horizontal li... ...
分类：
其他好文 时间：
2016-10-13 14:14:47
阅读次数：
191
Context.moveTo(20,20); Context.lineTo(20,200); Context.lineWidth=10; Context.lineCap=”round”; Context.lineJoin=”round”; Context.stroke(); Context.setL ...
分类：
Web程序 时间：
2016-09-06 12:15:49
阅读次数：
177
Canvas 设置开始绘图位置：ctx.moveTo(x,y); 设置直线到的位置：ctx.lineTo(x,y); 描边绘制：ctx.stroke(); 填充绘制：ctx.fill(); 自动闭合路径：ctx.closePath(); 开启新的绘制：ctx.beginPath(); 设置描边颜色： ...
分类：
其他好文 时间：
2016-08-25 20:19:02
阅读次数：
158
1.beginPath() 2.closePath() 3.moveTo(x,y) 将鼠标移动到这个坐标 4.lineTo(x,y) 经鼠标从当前位置到连接到一个指定的点 5.stroke() 将线绘制到画布上 6.save() 保存当前绘图状态 7.restore() 恢复到原有的绘画状态 8.t ...
每个路径都必须以moveto 命令开始 moveto、lineto和closepath <path d="M 10 10 L 100 10z"/> 大写字母命令的坐标是绝对的，小写字母命令的坐标是相对的。其它情况： 1.z(closepath)命令没有坐标，它的大小写形式效果相同。 2.如果使用小写 ...
分类：
其他好文 时间：
2016-08-10 18:55:57
阅读次数：
134
