手写原生代码专题 | 简易手写画板（二）

大家好，本篇文章，小编将和大家完成一个手写画板的示例，这个例子比较简单只能画简单的线条，并能调节线条的粗细和颜色，还有一个清除的功能，具体示例如下视频所示：

一、基础知识复习

如视频所示，在这个示例中，我们用到了画布 canvas 相关的知识，比如创建画布、画圆形、画直线的基础知识，有了这些基础后，我们就能轻松完成本示例，示例效果如下视频所示。

1.1  创建画布

在  Html  文档中创建一个<canvas width="xx" height="xx">的画布，然后使用document.getElementById('canvas') 方法获取画布，接下来调用 canvas.getContext('2d') 使用2D的模式渲染画布，然后我们就可以在画布里进行画直线画圆操作了。

1.2  画直线

画一条直线，首先调用 beginPath() 绘制路径的起始点，使用 moveTo() 移动画笔，然后再使用 lineTo() 连接子路径的终点到x，y坐标，最后调用 ctx.stroke() 方法设置样式，就这样我们完成了画直线，相关示例代码如下：

ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(100, 100);
ctx.stroke();

1.3  绘制圆形

CanvasRenderingContext2D.arc() 是 Canvas 2D API 绘制圆弧路径的方法。圆弧路径的圆心在 (x, y) 位置，半径为 r ，根据 anticlockwise （默认为顺时针）指定的方向从 startAngle 开始绘制，到 endAngle 结束。具体语法如下所示：

void ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);

• x：圆心的x坐标

• y：圆心的y坐标

• r：圆的半径

• start：开始角度，0度为水平向右

• <