Canvas 笔记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>画直线#
- 移动画笔到哪里：moveTo ()
- 画直线到哪里：lineTo ()
- 都画好了，显示出来吧：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();
关于 LearnKu
粤公网安备 44030502004330号