《智能前端技术与实践》——第 2 章 前端开发基础 ——2.2 HTML基础——2.2.2 常用标签 （上） https://developer.aliyun.com/article/1228307?groupCode=tech_library
5．标签
Canvas API提供了一种通过JavaScript和HTML的>元素来绘制图形的方式，它可
以用于动画、游戏画面、数据可视化、图片编辑及实时视频处理等方面的内容。使用>大
概可以分为两个步骤。
首先，在HTML文档中定义标签，如代码清单2-12所示。
代码清单 2-12
<canvaswidth="500"height="500"style="border: 1px solid red"id="canvas"></canvas>
标签只有两个属性——width 和 height。当没有设置宽度和高度的时候，
会初始化尺寸为300×150的矩形。
然后，获取nvas>对象的上下文并判断getContext()方法是否存在，如代码清单2-13所示。
代码清单2-13
varcanvas=document.getElementById("canvas") if (canvas.getContext){ varctx=canvas.getContext("2d"); }
最后，在页面中分别绘制圆形、直线和矩形框，如代码清单 2-14 所示。
代码清单 2-14
<htmllang="en"><head><metacharset="UTF-8"><title>canvas Demo</title></head><body><canvaswidth="500"height="500"style="border: 1px solid red"id="canvas"></canvas><script>varcanvas=document.getElementById("canvas") if (canvas.getContext){ varctx=canvas.getContext("2d"); //画圆ctx.beginPath() ctx.moveTo(250,100) ctx.arc(250,100,10,0,2*Math.PI) ctx.fillStyle="blue"ctx.fill() ctx.closePath() //画直线ctx.beginPath() ctx.moveTo(100,250) ctx.lineTo(400,250) ctx.strokeStyle="green"ctx.stroke() ctx.closePath() //画矩形ctx.beginPath() ctx.rect(100,300,300,100) ctx.strokeStyle="aqua"ctx.stroke() ctx.closePath() } </script></body></html>
运行结果如图2-21所示。
接下来，我们介绍上述代码中用到的相关API方法。
•beginPath()：通过清空子路径列表开始一条新的路径，其调用方法为CanvasRenderingContext2D.beginPath()。
•closePath()：将笔点返回当前子路径的起始点，并从当前点到起始点绘制一条直线，如果图形已经是封闭图形或仅有一个点，此方法不做任何操作。
•moveTo(x,y)：将一条新的子路径的起点移动到(x,y)。
•lineTo(x,y)：使用直线连接子路径的终点与(x,y)。
•arc(x,y,radius,startAngle,endAngle,anticlockwise)：绘制圆心坐标为(x,y)、半径为radius的弧，根据anticlockwise（默认为顺时针）指定的方向从startAngle开始绘制，到endAngle结束。
•stroke()：通过线条来绘制图形轮廓。
•fill()方法：根据填充路径的内容区域生成实心的图形。
另外，我们可以通过指定strokeStyle的值设置图形轮廓的颜色；通过指定fillStyle的值设置图形的填充颜色，默认值均为黑色（#000000）。
最后，结合代码清单 2-15，介绍指针设备（如鼠标指针）在对象中移动时触发的事件mousemove。
代码清单 2-15
<htmllang="en"><head><metacharset="UTF-8"><title>你画我猜（MNIST 手写数字版）canvas 示例</title></head><body><canvaswidth="500"height="500"style="border: 1px solid red"id="canvas"></canvas><buttonid="clear">清除画布</button><script>varcanvas=document.getElementById("canvas") varoclear=document.getElementById("clear") if (canvas.getContext){ varctx=canvas.getContext("2d"); canvas.onmousemove= (e) => { if(e.buttons==1){ ctx.fillStyle="black"ctx.fillRect(e.offsetX,e.offsetY,5,5) } } oclear.onclick= () => { ctx.clearRect(0,0,500,500) } } </script></body></html>
运行结果如图 2-22 所示。
