Canvas元素

文章共885个字 读完大约需要3分钟

基本信息

​如果不给<canvas>设置widht、height属性时,则默认 width为300、height为150,单位都是px。也可以使用css属性来设置宽高,但是如宽高属性和初始比例不一致,他会出现扭曲。所以,建议永远不要使用css属性来设置<canvas>的宽高。

检测是否支持canvas元素的两种方法:

1
2
3
<canvas>
对不起,您的浏览器尚不支持canvas,请升级到最新版本。
</canvas>

1
2
3
4
5
6
7
// 检测是否支持canvas元素
function example() {
let canvas = document.getElementById('myCanvas');
if (!canvas.getContext) return;
let context = canvas.getContext('2d');
// 开始代码 以下所有都表示默认执行此方法
}

canvas画布和坐标

Canvas画布的左上角为坐标原点(0,0),所有元素的位置都相对于原点来定位。横向为X轴,代表水平位移,纵向为Y轴,代表竖直位移。

canvas坐标原点

角度和弧度

熟悉度,角度和弧度的换算有助于我们更好的掌握canvas的绘制轨迹。

维基百科上的解释

弧度又称弪度,是平面角的单位,也是国际单位制导出单位。单位弧度定义为圆弧长度等于半径时的圆心角。角度以弧度给出时,通常不写弧度单位,或有时记为rad(㎭)。平面角和立体角皆无因次。

角度与弧度之间的换算公式一
角度与弧度之间的换算公式二

常用角度和弧度的换算表

角度单位
01/121/81/61/41/23/41
角度030456090180270360
弧度0π/6π/4π/3π/2π3/2 π2 π

绘制图形

绘制直线

  • moveTo: 新建路径,并规定起始点为(x,y)。
  • lineTo: 规定绘制的终点,假如没有moveTo方法,此方法等同于moveTo
  • stroke: 绘制。
1
2
3
4
// 绘制直线
context.moveTo(0,0);
context.lineTo(100,200);
context.stroke();

矩形绘制

Canvas提供了三种矩形绘制的方法:

  • fillRect(x, y, width, height): 绘制一个填充的矩形。
  • strokeRect(x, y, width, height): 绘制一个矩形的边框。
  • clearRect(x, y, widh, height): 清除指定的矩形区域,然后这块区域会变的完全透明。
1
2
3
4
5
6
7
8
9
10
// 绘制矩形
context.fillStyle = 'skyblue';
context.fillRect(50, 25, 100, 50);

// 绘制边框
context.fillStyle = 'rgb(0,0,200,0.1)';
context.strokeRect(0, 0, 50, 50);

// 清除指定矩形区域使其变成透明
context.clearRect(50,50,50,50);

绘制路径

  • beginPath(): 新建一条路径,路径一旦创建成功,图形绘制命令被指向到路径上生成路径。
  • moveTo(x,y): 把画笔移动到指定的坐标(x, y)。相当于设置路径的起始点坐标。
  • closePath(): 闭合路径之后,图形绘制命令又重新指向到上下文中。
  • stroke(): 通过线条来绘制图形轮廓。
  • fill(): 通过填充路径的内容区域生成实心的图形。
绘制三角形
1
2
3
4
5
6
7
// 绘制空心三角形
context.beginPath();
context.moveTo(50, 50);
context.lineTo(50, 200);
context.lineTo(200, 50);
context.closePath();
context.stroke();
绘制多边形
1
2
3
4
5
6
7
8
// 绘制空心多边形
context.beginPath();
context.moveTo(50, 50);
context.lineTo(50, 200);
context.lineTo(100,100);
context.lineTo(200, 50);
context.closePath();
context.stroke();
填充图形
1
2
3
4
5
6
7
8
9
context.beginPath();
context.moveTo(50, 50);
context.lineTo(50, 200);
context.lineTo(100,100);
context.lineTo(200, 50);
context.closePath();
context.stroke();
// 此方法会将绘制的图形填充
context.fill();
绘制圆弧
  • arc(x, y, r, startAngle, endAngle, anticlockwise): 以(x, y)为圆心,以r为半径,从 startAngle弧度开始到endAngle弧度结束。anticlosewise是布尔值,true表示逆时针,false表示顺时针。(默认是顺时针)。
  • arcTo(x1, y1, x2, y2, radius): 根据给定的控制点和半径画一段圆弧,最后再以直线连接两个控制点。

推荐文章

-->