完成Canvas自由绘图

在使用Canvas进行自由绘图时，Canvas是HTML5提供的一种在网页上绘制图形的API。以下是基本步骤来完成自由绘图：

1. **创建Canvas元素**：首先在HTML中添加一个`<canvas>`标签，设置其宽度和高度。例如：

<canvas id="myCanvas" width="800" height="600"></canvas>

2. **获取绘图上下文**：JavaScript中通过`document.getElementById()`获取Canvas元素，并得到它的2D渲染上下文`context`：

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

3. **开始绘画**：使用`beginPath()`开始一个新的路径，然后使用各种绘图方法如`moveTo()`, `lineTo()`, `arc()`, `fillStyle`和`stroke()`等来绘制形状、线条和填充色：

ctx.beginPath();
ctx.moveTo(100, 50);
ctx.lineTo(400, 150);
ctx.arc(300, 300, 75, 0, Math.PI*2);
ctx.fillStyle = 'blue';
ctx.fill();
ctx.strokeStyle = 'black';
ctx.stroke();

4. **保存绘图状态**：如果需要保存当前的绘图状态（比如改变颜色或样式），可以使用`save()`，恢复时使用`restore()`。

5. **清除画布**：如果想要清空画布，可以用`clearRect()`或`drawImage()`方法将整个画布擦除。

6. **结束路径并提交**：最后记得使用`closePath()`关闭路径，然后用`fill()`或`stroke()`提交画笔到画布上。