标签：10 教程 lineTo ctx canvas 画图 矩形 fill 220

不同于 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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。