Canvas 简介
Canvas 表示画布,现实生活中的画布是用来作画的。
HTML5 中的 Canvas :我们可以称它为“网页中的画布”。默认情况下,Canvas 是一块 300px*150px 的矩形画布,用户可以自定义画布的大小或为画布添加其他属性。
利用 Canvas 实现绘画:Canvas 并不是通过鼠标绘画的,而是用户需要通过 JavaScript 来控制画布中的内容,例如添加图片、线条、文字等。
使用 Canvas 绘制图形
<canvas> 标签
使用 HTML5 中的 <canvas> 标签在网页中创建一个画布,语法格式如下:
<canvas id="canvas" width="400" height="300">
您的浏览器不支持canvas标签,请更新浏览器
</canvas>
上述代码定义了一个 id 为 canvas 的画布,并设置了画布的宽度为 400px,高度为 300px。
通过 JavaScript 的 getElementById() 方法获取到网页中的画布对象,代码如下所示:
var canvas = document.getElementById("canvas");
上述代码获取了 id 为 canvas 的画布,同时将获取的画布对象保存在变量 canvas 中。
context 对象:是画布的上下文,也叫做绘制环境,是所有的绘制操作 API 的入口。 context 对象可以使用 getContext() 方法获得,代码如下所示:
var context = canvas.getContext('2d');
上述代码中的参数 2d
代表画笔的种类,表示二维绘图的画笔。如果想要绘制三维图,可以把参数替换为 webgl
。
2d:代表一个平面,绘制图形时需要在平面上确定起始点,也就是“从哪里开始画”,这个点需要通过坐标来控制。
Canvas 的坐标系:从最左上角 0,0
开始。x 轴向右逐渐增加,y 轴向下逐渐增加。
绘制线条
线的定义:线是所有复杂图形的组成基础,想要绘制复杂的图形,首先要从绘制线开始。
线的组成:在绘制线之前首先要了解线的组成。一条最简单的线由三部分组成,分别为初始位置、连线端点以及描边。
初始位置:在绘制图形时,我们首先需要确定从哪里下“笔”,这个下“笔”的位置就是初始位置。
在画布中使用 moveTo(x, y) 方法来定义初始位置,其中 x 和 y 表示水平坐标轴和垂直坐标轴的位置,中间用 ,
隔开。x 和 y 的取值为数字,表示像素值(单位省略)。
设置初始位置的示例代码如下所示:
context.moveTo(x, y);
连线端点:在画布中使用 lineTo(x, y) 方法来定义连线端点。和初始位置类似,连线端点也需要定义 x 和 y 的坐标位置。
定义连线端点的代码如下所示:
context.lineTo(x, y);
描边:通过初始位置和连线端点可以绘制一条线,但这条线并不能被看到。这时我们需要为线添加描边,让线变得可见。
使用画布中的 stroke() 方法,可以实现线的可视效果。
设置描边的代码如下所示:
context.stroke();
绘制字母 M,效果如图:
步骤一:创建画布:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>绘制字母M</title>
</head>
<body>
<canvas id="canvas" width="400" height="300">
您的浏览器不支持canvas标签,请更新浏览器
</canvas>
</body>
</html>
步骤二:绘制字母 M:
<script>
var canvas = document.getElementById('canvas'); // 获取canvas标签
var context = canvas.getContext('2d'); // 获得context对象
context.moveTo(10,100); // 定义初始位置
context.lineTo(30,10); // 定义连接线端点
context.lineTo(50,100); // 定义连接线端点
context.lineTo(70,10); // 定义连接线端点
context.lineTo(90,100); // 定义连接线端点
context.stroke(); // 描边
</script>
设置线条的样式
掌握设置线条的样式的方法,能够实现设置不同样式的线条。
设置线条宽度:使用 lineWidth 属性可以定义线的宽度,该属性的取值为数值(不带单位),以像素为计量。
设置线的宽度的示例代码如下所示:
context.lineWidth = 10;
以上代码设置了线的宽度为 10px。
设置描边颜色:使用 strokeStyle 属性可以定义线的描边颜色,该属性的取值为十六进制颜色值或颜色的英文名。
设置描边颜色的示例代码如下所示:
context.strokeStyle = '#f00';
context.strokeStyle = 'red';
以上两种方式都可以用于设置线的描边颜色为红色。
设置端点形状:默认情况下,线的端点是方形的,通过 lineCap 属性可以改变端点的形状。
lineCap 属性的取值有3个:
-
butt(默认值):默认效果,无端点,显示直线方形边缘
-
round:显示圆形端点
-
square:显示方形端点
设置端点形状的示例代码如下所示:
context.lineCap = 'round'; // 设置圆形端点
除了执行 stroke() 方法根据路径进行描边,还可以使用 fill() 方法进行图形的填充,示例代码如下:
context.fill();
同理也可以使用 fillStyle 属性可以定义路径的填充颜色,该属性的取值为十六进制颜色值或颜色的英文名,示例代码如下:
context.fillStyle = 'green';
以上代码将会给路径填充绿色。
注意:无论是描边还是填充,设置的样式都需要写在描边或填充方法之前才起作用。
设置线条的路径
掌握设置线条的路径的方法,能够在网页中绘制多种图形。
路径的定义:路径是所有图形绘制的基础,通过初始位置和连线端点即可创建一条路径。
路径需要通过路径状态进行重置或闭合,来产生不同的路径样式。
路径的状态:
-
重置路径
-
闭合路径
重置路径的概念:
在同一画布中,即使我们添加再多的连线端点也只能有一条路径,如果想要开始新的路径就需要使用beginPath()方法,当出现beginPath()时即表示路径重新开始。
绘制两条不同样式的线条,效果如图:
步骤一:创建画布
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas id="canvas" width="400" height="3000">
您的浏览器不支持canvas标签,请更新浏览器
</canvas>
</body>
</html>
步骤二:重置路径
<script>
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
context.moveTo(10,10); // 定义初始位置
context.lineTo(300,10); // 定义链接端点
context.lineWidth=5; // 设置线的宽度
context.strokeStyle='red'; // 设置线的颜色
context.stroke(); // 描边
context.beginPath(); // 重置路径
context.moveTo(10,60); // 定义初始位置
context.lineTo(300,60); // 定义链接端点
context.lineWidth=10; // 设置线的宽度
context.strokeStyle='green'; // 设置线的颜色
context.stroke(); // 描边
</script>
闭合路径的概念:
闭合路径就是将我们绘制的开放路径进行封闭处理,多点的路径闭合后会形成特定的形状。在画布中使用closePath()方法闭合路径。
示例代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas id="canvas" width="400" height="300">
您的浏览器不支持canvas标签,请更新浏览器
</canvas>
<script>
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
context.moveTo(10,10);
context.lineTo(10,100);
context.lineTo(100,100);
context.closePath(); // 闭合路径
context.stroke();
</script>
</body>
</html>
canvas 绘制图形的基本步骤:
① 创建画布:<canvas></canvas>
② 准备画笔(获取上下文对象):canvas.getContext('2d');
③ 开始路径规划 :context.beginPath();
④ 移动起始点 :context.moveTo(x, y);
⑤ 绘制线(矩形、圆形、图片...):context.lineTo(x, y);
⑥ 闭合路径:context.closePath();
⑦ 绘制描边 :context.stroke();
Canvas 常用方法
canvas 中常用的方法如下:
绘制图形 | 方法 | 描述 |
---|---|---|
矩形 | rect() | 创建矩形。 |
fillRect() | 绘制带填充的矩形。 | |
strokeRect() | 绘制无填充的矩形。 | |
clearRect() | 在给定的矩形内清除指定的像素。 | |
圆形 | arc() | 创建圆形。 |
椭圆形 | ellipse() | 创建椭圆形。 |
文本 | strokeText() | 绘制空心文本。 |
fillText() | 绘制实心文本。 | |
图像 | drawImage() | 绘制图像。 |
canvas 绘制矩形
绘制一个红色的矩形,效果如下:
示例代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas id="canvas" width="400" height="300">
您的浏览器不支持canvas标签,请更新浏览器
</canvas>
<script>
var canvas = document.getElementById('canvas'); // 获取canvas标签
var context = canvas.getContext('2d'); // 获得context对象
context.fillStyle = 'red'; // 设置填充颜色
context.fillRect(0,0,200,100); // 绘制填充的矩形
</script>
</body>
</html>
设置 fillStyle 属性可以是 CSS 颜色、渐变或图案。fillStyle 默认设置是 #000000
(黑色)。
fillRect(x,y,width,height) 方法定义了矩形当前的填充方式。
canvas 绘制圆形
在canvas中绘制圆形,我们将使用以下方法:
arc(x, y, r, start, stop)
参数分别是:(圆心x坐标, 圆心y坐标, 半径r, 开始弧度, 结束弧度)。
结束弧度的计算公式:
角度 * Math.PI / 180
。
绘制一个圆,效果如下:
示例代码:
<script>
var canvas = document.getElementById('canvas'); // 获取canvas标签
var context = canvas.getContext('2d'); // 获得context对象
context.arc(100, 100, 50, 0, 360 * Math.PI / 180); // 绘制圆形
context.stroke(); // 描边
</script>
canvas 绘制椭圆
在 canvas 中绘制椭圆, 我们将使用以下方法:
ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise)
参数分别是:(椭圆圆心x坐标, 椭圆圆心y坐标, 半径x, 半径y, 旋转的角度, 起始角, 结束角, 顺时针/逆时针)
绘制一个椭圆,效果如下:
示例代码:
<script>
var canvas = document.getElementById('canvas'); // 获取canvas标签
var context = canvas.getContext('2d'); // 获得context对象
context.ellipse(120, 100, 100, 50, 0, 0, 360 * Math.PI / 180); // 绘制椭圆
context.stroke(); // 描边
</script>
canvas 绘制文本
使用 canvas 绘制文本,重要的属性和方法如下:
-
font - 定义字体
-
fillText(text,x,y) - 在 canvas 上绘制实心的文本
-
strokeText(text,x,y) - 在 canvas 上绘制空心的文本
使用“Arial”字体在画布上绘制一个高 30px 的实心文字:
示例代码:
<script>
var canvas = document.getElementById('canvas'); // 获取canvas标签
var context = canvas.getContext('2d'); // 获得context对象
context.font = '30px Arial'; // 设置文本样式
context.fillText('Hello World', 10, 50); // 绘制实心文字
</script>
canvas 渐变
渐变可以填充到矩形、圆形、线条、文本等,各种形状可以自定义不同的颜色。
有两种方式来设置 Canvas 渐变:
-
createLinearGradient(x, y, x1, y1)
:创建线条渐变; -
createRadialGradient(x, y, r, x1, y1, r1)
:创建一个径向/圆渐变。
使用 createLinearGradient(),创建一个线性渐变。
当我们使用渐变对象,必须使用两种或两种以上的停止颜色。addColorStop() 方法指定停止颜色,位置可以是 0 至 1。
使用渐变,设置 fillStyle 或 strokeStyle 的值为渐变,然后绘制形状,如矩形、文本或一条线。
使用渐变填充矩形:
示例代码:
<script>
var canvas = document.getElementById('canvas'); // 获取canvas标签
var context = canvas.getContext('2d'); // 获得context对象
var gradient = context.createLinearGradient(0, 0, 200, 0); // 创建渐变
gradient.addColorStop(0, 'red'); // 设置渐变颜色(开始)
gradient.addColorStop(1, 'green'); // 设置渐变颜色(结束)
context.fillStyle = gradient; // 设置渐变填充样式
context.fillRect(10, 10, 200, 80); // 绘制矩形
</script>