Canvas 初探

新建 Canvas 画布

新建 index.html，写入

<canvas></canvas>

恭喜🎉，这样就创建了一个 HTML5 的 Canvas（宽高默认 300 x 150 ）

我们设置下 id：canvas、宽高：400 x 400，如下

<canvas id="canvas" width="400" height="400"></canvas>

浏览器打开 index.html，会是空白的，但是有高度宽度，因为我们还没画任何东西。

新建 Canvas 上下文

<canvas /> 标签后，另起一行

<script>
// 获取 id 为 canvas 的元素，也就是画布
var canvas = document.getElementById("canvas");
// 在画布上新建上下文
var context = canvas.getContext("2d");
</script>

画直线

1. 移动画笔到哪里：moveTo()
2. 画直线到哪里：lineTo()
3. 都画好了，显示出来吧：stroke()

我们直接在画布上画个对角线来演示下

<canvas id="canvas"></canvas>

<script>
var canvas = document.getElementById("canvas");
var pencil = canvas.getContext("2d");

pencil.moveTo(0,0);//移动到画布左上角
pencil.lineTo(400,400);//移动到画布右下角
pencil.stroke();
</script>

画矩形

strokeRect()

pencil.strokeRect(0, 0, 400, 400);

画圆

画圆（也可画圆弧）

方法：arc()

arc(x, y, radius, start ,end, direction)

• 从哪个坐标为圆规坐标
• radius，圆的半径
• 从哪个角度开始画（和教书学的数学一样，X正轴为0点），画到哪个角度
• 默认为false，逆时针，即按常规方式

pencil.arc(canvas.width/2,canvas.height/2,100,0,Math.PI*2);
pencil.stroke();