创建 Canvas 画布
Canvas没有设置宽高,那么会自动创建一个 300 * 150 的画布(单位默认为 px)。
可以通过html属性设置或JS 属性设置 width、height。不要使用 CSS 设置,CSS的宽高设置会影响canvas的宽高比例。如下代码为用html属性设置。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#canvas {
background: #000;
}
</style>
</head>
<body>
<canvas id="canvas" width="400" height="400">
</canvas>
<script>
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.beginPath();
context.arc(100, 100, 50, 0, Math.PI * 2, true);
context.closePath();
context.fillStyle = 'rgb(255,255,255)';
context.fill();
</script>
</body>
</html>
获取 Canvas 对象
创建了一个 Canvas 画布,获取到 Canvas 的上下文环境,对应的语法为:canvas.getContext(contextType, contextAttributes);
上下文类型(contextType)可选值:
- 2dc:代表一个二维渲染上下文
- webgl(或"experimental-webgl"):代表一个三维渲染上下文
- webgl2(或"experimental-webgl2"):代表一个三维渲染上下文;这种情况下只能在浏览器中实现 WebGL 版本2 (OpenGL ES 3.0)。
绘制路径
使用 Canvas 画一个点
使用 Canvas 画一个点。其实画一个点也就相当于画一个半径为 1 的圆。
context.beginPath(); // 起始一条路径,或重置当前路径
context.arc(100, 100, 1, 0, Math.PI * 2, true); // 创建弧/曲线
context.closePath(); // 创建从当前点回到起始点的路径
context.fillStyle = 'rgb(255,255,255)'; // 设置或返回用于填充绘画的颜色、渐变或模式
context.fill(); // 填充当前绘图(路径)
了解了在 Canvas 中绘图的大致步骤,下面我们来看一下刚刚提到的 arc() 方法。
绘制弧/曲线
arc()
方法创建弧/曲线
context.arc(x,y,r,sAngle,eAngle,counterclockwise);
- x:圆心的 x 坐标
- y:圆心的 y 坐标
- r:圆的半径
- sAngle:起始角,以弧度计(弧的圆形的三点钟位置是 0 度)
- eAngle:结束角,以弧度计
- counterclockwise:可选。规定应该逆时针还是顺时针绘图。false 为顺时针,true 为逆时针。
通过代码画一个四分之一的圆弧:
context.beginPath();
context.arc(100, 100, 50, 0, Math.PI * 0.5, false);
context.strokeStyle="white";
context.stroke();
此时图形不是闭合的,因为我只设置了 beginPath 并没有设置 closePath。
设置closePath后效果如下。
此时的闭合图形内的空心的,这是因为 stroke()
和 fill()
的区别。两个函数的区别:一个是描边,一个是填充。
绘制直线
context.beginPath();
context.moveTo(50,50); // 移动画笔位置,不创建线条
context.lineTo(100,100); // 绘制线段的结束点
context.strokeStyle = '#fff'; // 设置样式
context.stroke();
在绘制了直线之后,我们来看一下context给绘制的直线添加样式的属性:
- lineCap 设置或返回线条的结束端点样式
- lineJoin 设置或返回两条线相交时,所创建的拐角类型
- lineWidth 设置或返回当前的线条宽度
- miterLimit 设置或返回最大斜接长度
矩形等其他图形绘制大同小异,这里不列举了。
颜色、样式和阴影
上述绘制图形的方法都是通过先创建路径,然后再使用 fill() 或 stroke() 进行填充或者描边。
下面我们再具体看一下都可以给路径设置哪些属性来改变其样式。
- fillStyle 设置或返回用于填充绘画的颜色、渐变或模式
- strokeStyle 设置或返回用于笔触的颜色、渐变或模式
- shadowColor 设置或返回用于阴影的颜色
- shadowBlur 设置或返回用于阴影的模糊级别
- shadowOffsetX 设置或返回阴影距形状的水平距离
- shadowOffsetY 设置或返回阴影距形状的垂直距离
设置shadow的四个属性跟css的box-shadow
用法差不多。
设置渐变
- createLinearGradient() 创建线性渐变(用在画布内容上)
- createPattern() 在指定的方向上重复指定的元素
- createRadialGradient() 创建放射状/环形的渐变(用在画布内容上)
- addColorStop() 规定渐变对象中的颜色和停止位置
其中绘制渐变主要用到了 createLinearGradient() 方法,我们来看一下这个方法: context.createLinearGradient(x0,y0,x1,y1);
,这个方法表示创建一个从(x0,y0)到(x1,y1)渐变的style对象。我们可以使用 addColorStop(stop,color)
方法来设置渐变的颜色。
- stop:介于 0.0 与 1.0 之间的值,表示渐变中开始与结束之间的位置
- color:在结束位置显示的 CSS 颜色值
具体如何使用呢,比如说我们下一个粉色到白色的由上向下的渐变:
var grd = context.createLinearGradient(100,100,100,200);
grd.addColorStop(0,'pink');
grd.addColorStop(1,'white');
context.fillStyle = grd;
context.fillRect(100,100,200,200);
图形转换
scale(x,y)
缩放当前绘图至更大或更小rotate(angle)
旋转当前绘图translate()
重新映射画布上的 (0,0) 位置transform()
替换绘图的当前转换矩阵setTransform()
将当前转换重置为单位矩阵,然后运行transform()
缩放
使用 Canvas 实现缩放的功能,绘制一个矩形;放大到 200%,再次绘制矩形;放大到 200%,然后再次绘制矩形;放大到 200%,再次绘制矩形。
context.strokeStyle = 'white';
context.strokeRect(5,5,50,25);
context.scale(2,2);
context.strokeRect(5,5,50,25);
context.scale(2,2);
context.strokeRect(5,5,50,25);
设置 scale() 方法之后再设置的矩形,无论是线条的宽度还是坐标的位置,都被放大了。并且 scale() 的效果是可以叠加的。
旋转
context.rotate(angle)
- angle : 旋转角度,以弧度计。 如需将角度转换为弧度,请使用 degreesMath.PI/180 公式进行计算。 举例:如需旋转 5 度,可规定下面的公式:5Math.PI/180。
注意:使用的图形变换的方法都是作用在画布上的,既然对画布进行了变换,那么在接下来绘制的图形都会变换。比如我对画布使用了 rotate(20*Math.PI/180) 方法,就是将画布旋转了 20°,然后之后绘制的图形都会旋转 20°。
图像绘制
drawImage()
是canvas的一个常用方法。用于向画布上绘制图像、画布或视频。
context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
- img:规定要使用的图像、画布或视频
- sx:可选。开始剪切的 x 坐标位置
- sy:可选。开始剪切的 y 坐标位置
- swidth:可选。被剪切图像的宽度
- sheight:可选。被剪切图像的高度
- x:在画布上放置图像的 x 坐标位置
- y:在画布上放置图像的 y 坐标位置
- width:可选。要使用的图像的宽度(伸展或缩小图像)
- height:可选。要使用的图像的高度(伸展或缩小图像)
特效的源码地址:sunshine940326/canvas