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();

本文章首发在 LearnKu.com 网站上。

上一篇 下一篇
小李世界
讨论数量: 0
发起讨论 只看当前版本


暂无话题~