二、Canvas图形
1.栅格
在我们开始画图之前,我们需要了解一下画布栅格(canvas grid)以及坐标空间。如下图所示,canvas 元素默认被网格所覆盖。通常来说网格中的一个单元相当于 canvas 元素中的一像素。栅格的起点为左上角(坐标为(0,0))。所有元素的位置都相对于原点定位。所以图中蓝色方形左上角的坐标为距离左边(X 轴)x 像素,距离上边(Y 轴)y 像素(坐标为(x,y))。在课程的最后我们会平移原点到不同的坐标上,旋转网格以及缩放。现在我们还是使用原来的设置。
2.绘制矩形
2.1 绘制矩形方法
canvas 提供了三种方法绘制矩形:
-
//绘制填充矩形方法 fillRect(x, y, width, height)
-
//绘制描边矩形 strokeRect(x, y, width, height)
-
//绘制清理矩形方法 clearRect(x, y, width, height)
上面提供的方法之中每一个都包含了相同的参数。x 与 y 指定了在 canvas 画布上所绘制的矩形的左上角(相对于原点)的坐标。width 和 height 设置矩形的尺寸。
2.2 矩形例子
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=\, initial-scale=1.0">
<title>矩形</title>
<style>
body {
margin: 0;
overflow: hidden;
}
#canvas {
background: antiquewhite;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
const canvas = document.getElementById('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
//画笔
const ctx = canvas.getContext('2d');
//描边宽度
ctx.lineWidth = 20;
//描边颜色
ctx.strokeStyle = 'red';
//填充矩形方法 fillRect(x, y, w, h);
ctx.fillRect(200, 100, 400, 200);
//描边矩形 strokeRect(x, y, w, h)
ctx.strokeRect(200, 100, 400, 200);
//描边线
ctx.lineWidth = 3;
ctx.strokeStyle = '#000';
ctx.strokeRect(200, 100, 400, 200);
//清理矩形方法 clearRect(x, y, w, h)
// ctx.clearRect(200, 100, 400, 200);
</script>
</body>
</html>
该例子输出如下图所示:
3.绘制路径
3.1 绘制路径的步骤
- 首先,你需要创建路径起始点。
- 然后你使用画图命令去画出路径。
- 之后你把路径封闭。
- 一旦路径生成,你就能通过描边或填充路径区域来渲染图形。
以下是所要用到的函数:
-
beginPath()
新建一条路径,生成之后,图形绘制命令被指向到路径上生成路径。
-
closePath()
闭合路径之后图形绘制命令又重新指向到上下文中。
-
stroke()
通过线条来绘制图形轮廓。
-
fill()
通过填充路径的内容区域生成实心的图形。
3.2 绘制三角形
/*绘制三角形(直线):lineTo(x,y); */
ctx.beginPath();
ctx.moveTo(100, 100);
ctx.lineTo(400, 100);
ctx.lineTo(400, 300);
ctx.closePath();
ctx.stroke();
ctx.fill();
3.3 绘制圆弧与切线圆弧
/* 圆弧 arc(x,y,半径,开始弧度,结束弧度,方向)*/
ctx.beginPath();
ctx.arc(400, 400, 200, 0, Math.PI * 3 / 2);
ctx.moveTo(600, 600);
ctx.arc(400, 600, 200, 0, Math.PI * 3 / 2);
ctx.stroke();
/*切线圆弧:arcTo(x1,y1,x2,y2,半径)*/
ctx.beginPath();
ctx.moveTo(100, 100);
ctx.lineTo(400, 100);
ctx.lineTo(400, 300);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(100, 100);
ctx.arcTo(400, 100, 400, 300, 100);
ctx.stroke();
3.4 绘制贝塞尔曲线
/*二次贝塞尔曲线:quadraCurveTo(cpx1,cpy1,x,y)*/
ctx.beginPath();
ctx.moveTo(100, 100);
ctx.lineTo(400, 100);
ctx.lineTo(400, 400);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(100, 100);
ctx.quadraticCurveTo(400, 100, 400, 400);
ctx.stroke();
/*三次贝塞尔曲线:bezierCurveTo(cpx1,cpy1,cpx2,cpy2,x,y)*/
ctx.beginPath();
ctx.moveTo(100, 100);
ctx.lineTo(400, 100);
ctx.lineTo(400, 400);
ctx.lineTo(700, 400);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(100, 100);
ctx.bezierCurveTo(400, 0, 400, 400, 700, 400);
ctx.stroke();
3.5 绘制矩形
ctx.beginPath();
ctx.rect(100, 100, 400, 200);
ctx.rect(100, 400, 400, 200);
ctx.stroke();
3.6 案例1-机器人
机器人设计图如下:
绘制机器人整体代码:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>机器人</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
}
#canvas {
background: antiquewhite;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
//画布
const canvas = document.getElementById('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
//画笔
const ctx = canvas.getContext('2d');
//颜色
//填充色
ctx.fillStyle = 'red';
//画笔宽度
ctx.lineWidth = 40;
//面部(填充矩形)
//填充方法 fillRect(x, y, w, h);
ctx.fillRect(50, 250, 400, 200);
//面部轮廓()
//填充方法 strokeRect(x, y, w, h);
ctx.strokeRect(50, 250, 400, 200);
//眼罩
//填充方法 clearRect(x, y, w, h);
ctx.clearRect(50, 300, 400, 60);
//嘴巴
//直线:lineTo(x, y);
ctx.beginPath();
ctx.moveTo(150, 400);
ctx.lineTo(350, 400);
ctx.stroke();
//眼睛
//圆弧arc(x,y,半径,开始弧度,结束弧度,方向)
//左眼
ctx.beginPath();
ctx.arc(150, 330, 20, 0, Math.PI * 2);
//右眼
ctx.moveTo(350 - 20, 340)
ctx.arc(350, 340, 20, Math.PI, 0);
ctx.fill();
//天线
// bezierCurveTo(cpx1,cpy1,cpx2,cpy2,x,y)
//左天线
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.bezierCurveTo(150, 50, 150, 250, 250, 250);
//右天线
ctx.moveTo(450, 50);
ctx.bezierCurveTo(350, 50, 350, 250, 250, 250);
ctx.stroke();
</script>
</body>
</html>
3.7 案例2-水滴
相较于上一个机器人的简单拼凑,下图这个水滴是对图形的入微级操作,因为它是用多个图形拼成了一个子路径。
绘制水滴完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>水滴</title>
<style>
html {
height: 100%;
overflow: hidden
}
body {
height: 100%;
margin: 0;
}
#canvas {
background: antiquewhite;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
const canvas = document.getElementById('canvas');
//canvas充满窗口
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
//画笔
const ctx = canvas.getContext('2d');
/*
三次贝塞尔曲线:bezierCurverTo(cpx1,cpy1,cpx2,cpy2,x,y)
圆弧:arc(x,y,半径,开始弧度,结束弧度,方向)
*/
ctx.fillStyle = '#00acec';
//位移画布
ctx.translate(canvas.width / 2, canvas.height / 2);
//开始新路径
ctx.beginPath();
//指定起点,建立子路径
ctx.moveTo(0, 0);
//绘制二次贝塞尔曲线
ctx.quadraticCurveTo(50, -50, 50, -100);
//绘制圆弧
ctx.arc(
0, -100,
50,
0, Math.PI,
true
);
//绘制二次贝塞尔曲线
ctx.quadraticCurveTo(-50, -50,
0, 0
);
//显示路径
ctx.stroke();
ctx.fill();
</script>
</body>
</html>
.height / 2);
//开始新路径
ctx.beginPath();
//指定起点,建立子路径
ctx.moveTo(0, 0);
//绘制二次贝塞尔曲线
ctx.quadraticCurveTo(50, -50, 50, -100);
//绘制圆弧
ctx.arc(
0, -100,
50,
0, Math.PI,
true
);
//绘制二次贝塞尔曲线
ctx.quadraticCurveTo(-50, -50,
0, 0
);
//显示路径
ctx.stroke();
ctx.fill();
</script>
```