canvasHTML5新增标签知识点笔记思维导图

canvasHTML5新增标签知识点笔记思维导图，canvas是一个用来展示绘图效果的标签，它和img类似，都是行内块元素，欢迎一起交流。

canvasHTML5新增标签知识点笔记思维导图

• 定义
  • canvas是一个用来展示绘图效果的标签，它和img类似，都是行内块元素
  • 同一个页面可以拥有多个canvas标签
  • 画布默认300*150，要设置画布的宽高，需要借助canvas元素的属性
• ctx=cav.getContext(“2d”)方法
  • js中获取到canvas标签后，需要通过他来打开canvas，来绘制图形
• 绘图步骤
  • 1、先移动钢笔到指定的位置
  • 2、开始画线条
  • 3、描边路径
• ctx.moveTo( x轴移动的坐标，y轴移动的坐标 )
  • 钢笔到指定的位置（起点）
• ctx.lineTo( x轴移动的坐标，y轴移动的坐标 )
  • 画路径
• ctx.stroke()
  • 描边路径
• ctx.strokeStyle = css任意的颜色表示
  • 设置描边色
• ctx.lineWidth = 6
  • 设置线宽
• ctx.closePath()
  • 闭合路径
• ctx.beginPath()
  • 清除当前路径，开启新路径
• ctx.fill()
  • 填充
• ctx.fillStyle = 颜色表示
  • 填充色
• 非零环绕原则：
  • * 是用来判断哪些区域属于路径内( 计算结果非0，即为路径内 )。 * 在路径包围的区域中，随便找一点，向外发射一条射线， * 和所有围绕它的边相交， * 然后开启一个计数器，从0计数， * 如果这个射线遇到顺时针围绕，那么+1， * 如果遇到逆时针围绕，那么-1， * 如果最终值非0，则这块区域在路径内。 * * 备注：基数边的区域一定在路径内。