canvas画图练习教程

不同于 SVG，<canvas> 只支持两种形式的图形绘制：矩形和路径（由一系列点连成的线段）。所有其他类型的图形都是通过一条或者多条路径组合而成的。不过，我们拥有众多路径生成的方法让复杂图形的绘制成为了可能。

一、画矩形：

// 默认画笔的宽度是1px【这是个人理解的】
/* 矩形
* */
// 矩形——实心
ctx.fillRect(10,10,100, 200)
// 矩形——边框
ctx.strokeRect(120,10,100, 200)
// 矩形——边框有宽度【不是画笔本身的宽度】
ctx.fillRect(230,10,100, 200)
ctx.clearRect(255,60,50,100)

二、画线：

/* 线
* */
// 线-直线
ctx.beginPath()
ctx.moveTo(10, 220);
ctx.lineTo(110, 220)
ctx.stroke()
// ctx.fill() /*这里无效，fill虽然会自动闭合路径，但是对于直线是无法闭合的。所以直线调用fill是无效的。无法填充*/
// 线-直角
ctx.beginPath()
ctx.moveTo(120, 220);
ctx.lineTo(220, 220)
ctx.lineTo(220, 320)
ctx.closePath()  // 自动把线连接到路径的起始位置，相当与简写了最后一个ctx.lineTo到起始位置的线。
ctx.stroke()
// 线-直角-填充
ctx.beginPath()
ctx.moveTo(230, 220);
ctx.lineTo(330, 220)
ctx.lineTo(330, 320)
ctx.stroke()
ctx.fill() // 非直线，fill会自动闭合路径，然后填充颜色。

三、圆

标签：10,教程,lineTo,ctx,canvas,画图,矩形,fill,220
来源： https://www.cnblogs.com/wfblog/p/15093551.html