上一篇咱们已经讲述了canvas的基本用法,学会了构建canvas环境。如今咱们就来学习绘制一些基本图形。javascript
坐标
canvas的坐标原点在左上角,从左到右X轴坐标增长,从上到下Y轴坐标增长。坐标的一个单元是1像素。示意以下:
html
矩形
canvas能够绘制的多边形只有矩形,其余都要经过线段拼接而成。
绘制矩形有三个API:java
fillRect(x, y, width, height) 绘制一个填充的矩形。 strokeRect(x, y, width, height) 绘制一个只有描边的矩形。 clearRect(x, y, width, height) 清除特定的矩形区域,使之变成透明。
参数说明:
x,y是矩形左上角的坐标,width和height是矩形的宽和高。git
代码示例:
function draw() { var canvas = document.getElementById('canvas'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); ctx.fillRect(25, 25, 100, 100); ctx.clearRect(45, 45, 60, 60); ctx.strokeRect(50, 50, 50, 50); } }
效果以下:
最外面那个黑色的矩形就是第一行代码ctx.fillRect(25, 25, 100, 100)画的填充矩形。中间的透明矩形就是第二行代码ctx.clearRect(45, 45, 60, 60)清除的矩形,再中间的描边矩形就是第三行代码ctx.strokeRect(50, 50, 50, 50)画的。github
路径
绘制路径的通常步骤以下:canvas
- 创造路径
- 绘制路径
- 闭合路径
- 填充路径或给路径描边
绘制的代码以下:浏览器
ctx.beginPath(); // 创造路径 // 路径绘制,先省略,后面再路径绘制的方法 ctx.closePath(); // 闭合路径 ctx.stroke(); // 描边 // ctx.fill(); // 换成这行命令就是填充
在这个通常步骤中,只有闭合路径步骤能够省略,其余步骤都是不可省略的。若是不须要画闭合的图形,能够不闭合路径。
接下来说述绘制路径的方法。markdown
移动画笔
moveTo(x, y)这个方法能够移动画笔的坐标,将画笔移动到坐标(x, y)的位置。
用beginPath()创造路径时,要先用moveTo(x, y)肯定起始位置,除非是圆弧之类不须要初始点的路径绘制方法。svg
线段
lineTo(x, y)方法绘制一条线段,x, y指定了线段末尾的坐标。配合moveTo(x, y)方法就能够画出线段。
示例:函数
var canvas = document.getElementById('canvas'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.moveTo(0,0) ctx.lineTo(50,50); ctx.lineTo(100,50); ctx.stroke(); ctx.beginPath(); ctx.moveTo(75,0) ctx.lineTo(70,50); ctx.lineTo(150,50); ctx.closePath(); ctx.stroke(); }
var canvas = document.getElementById('canvas'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.moveTo(0,0) ctx.lineTo(50,50); ctx.lineTo(100,50); ctx.stroke(); ctx.beginPath(); ctx.moveTo(75,0) ctx.lineTo(70,50); ctx.lineTo(150,50); ctx.closePath(); ctx.stroke(); }
效果以下:
再来画个三角形:
var canvas = document.getElementById('canvas'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.moveTo(75, 50); ctx.lineTo(100, 75); ctx.lineTo(100, 25); ctx.fill(); }
var canvas = document.getElementById('canvas'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.moveTo(75, 50); ctx.lineTo(100, 75); ctx.lineTo(100, 25); ctx.fill(); }
效果:
矩形******
一样的,路径方法里也有绘制矩形的方法。
rect(x, y, width, height)
x,y是矩形左上角坐标,width是矩形的宽,height是矩形的高。
这个方法和前面说的矩形不一样在于,这个方法是路径绘制方法,要配合beginPath()和stroke()之类的方法来使用的。要先建立路径,而后用这个方法绘制矩形,再stroke()或fill(),不然画不出来。
圆弧
绘制圆弧有两个方法:
arc(x, y, radius, startAngle, endAngle, anticlockwise) arcTo(x1, y1, x2, y2, radius)
第一个方法中的x, y参数指定了圆弧的圆心坐标。
radius参数是圆弧的半径长度。
startAngle参数是圆弧起始的弧度,endAngle是圆弧结束的弧度,单位是弧度,不是度。
anticlockwise是个布尔值,设置圆弧是顺时针画仍是逆时针画,当anticlockwise为true是逆时针,为false是顺时针,这个值缺省的时候默认是顺时针。
Tips:
角度的单位是弧度,能够用这个表达式把度数转换成弧度:
radians = (Math.PI/180)*degrees
下面来看一个有趣的例子:
function draw() { var canvas = document.getElementById('canvas'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); for (var i = 0; i < 4; i++) { for (var j = 0; j < 3; j++) { ctx.beginPath(); var x = 25 + j * 50; // x coordinate var y = 25 + i * 50; // y coordinate var radius = 20; // Arc radius var startAngle = 0; // Starting point on circle var endAngle = Math.PI + (Math.PI * j) / 2; // End point on circle var anticlockwise = i % 2 !== 0; // clockwise or anticlockwise ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise); if (i > 1) { ctx.fill(); } else { ctx.stroke(); } } } } }
function draw() { var canvas = document.getElementById('canvas'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); for (var i = 0; i < 4; i++) { for (var j = 0; j < 3; j++) { ctx.beginPath(); var x = 25 + j * 50; // x coordinate var y = 25 + i * 50; // y coordinate var radius = 20; // Arc radius var startAngle = 0; // Starting point on circle var endAngle = Math.PI + (Math.PI * j) / 2; // End point on circle var anticlockwise = i % 2 !== 0; // clockwise or anticlockwise ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise); if (i > 1) { ctx.fill(); } else { ctx.stroke(); } } } } }
这段代码总共画了四行三列的圆弧。相邻的圆弧圆心X轴和Y轴都相距50像素,圆弧的半径都是20像素,每列圆弧的弧度相差90度。第一行和第三行都是顺时针,第二行和第四行都是逆时针。第一行和第二行描边,第三行和第四行填充。
效果是这样的:
第二个圆弧方法比较复杂,效果难以控制,它实际上是画一段带直线的圆弧。我尽可能把它说明白。
arcTo(x1, y1, x2, y2, radius)
参数x1, y1, x2, y2分别是两个控制点的坐标,radius是圆弧的半径长度。
下面用一个例子来讲明控制点的意义:
ctx.beginPath(); ctx.moveTo(150, 20); ctx.arcTo(150, 100, 50, 20, 30); ctx.stroke(); ctx.fillStyle = 'blue'; // base point ctx.fillRect(150, 20, 10, 10); ctx.fillStyle = 'red'; // control point one ctx.fillRect(150, 100, 10, 10); // control point two ctx.fillRect(50, 20, 10, 10);
ctx.beginPath(); ctx.moveTo(150, 20); ctx.arcTo(150, 100, 50, 20, 30); ctx.stroke(); ctx.fillStyle = 'blue'; // base point ctx.fillRect(150, 20, 10, 10); ctx.fillStyle = 'red'; // control point one ctx.fillRect(150, 100, 10, 10); // control point two ctx.fillRect(50, 20, 10, 10);
效果如图:
蓝色方块的左上角坐标是moveTo的坐标,右下方的红色方块的左上角坐标是第一个控制点的坐标,左上方的红色方块的左上角坐标是第二个控制点的坐标。
注意,蓝色方块和圆弧之间是有一小段直线的。
注意,这个方法的开始是必须用moveTo方法来指定起始点的,也就是蓝色方块的位置,不然画不出来。
这个方法难以控制,因此一般不去用它。
贝塞尔和二次曲线
如今我要说两个更难以控制的绘图API了,二次贝塞尔曲线和三次贝塞尔曲线。
quadraticCurveTo(cp1x, cp1y, x, y) bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
上面的是二次曲线,下面的是三次曲线。下面用一张图来讲明这两个曲线方法。
这两个方法的区别就是一个只有一个控制点(图中红点),一个有两个控制点。
参数cp1x, cp1y, cp2x, cp2y是控制点的坐标,x, y是曲线的末端的坐标值,也就是图中的蓝点中的其中一个。
由于不是在Illustrator等图形编辑软件里,不能可视化地控制点,因此用这个两个方法绘制图形至关须要耐心。
举个二次曲线画图的例子吧:
function draw() { var canvas = document.getElementById('canvas'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); // Quadratric curves example ctx.beginPath(); ctx.moveTo(75, 25); ctx.quadraticCurveTo(25, 25, 25, 62.5); ctx.quadraticCurveTo(25, 100, 50, 100); ctx.quadraticCurveTo(50, 120, 30, 125); ctx.quadraticCurveTo(60, 120, 65, 100); ctx.quadraticCurveTo(125, 100, 125, 62.5); ctx.quadraticCurveTo(125, 25, 75, 25); ctx.stroke(); } }
function draw() { var canvas = document.getElementById('canvas'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); // Quadratric curves example ctx.beginPath(); ctx.moveTo(75, 25); ctx.quadraticCurveTo(25, 25, 25, 62.5); ctx.quadraticCurveTo(25, 100, 50, 100); ctx.quadraticCurveTo(50, 120, 30, 125); ctx.quadraticCurveTo(60, 120, 65, 100); ctx.quadraticCurveTo(125, 100, 125, 62.5); ctx.quadraticCurveTo(125, 25, 75, 25); ctx.stroke(); } }
效果:
三次曲线的例子我就不说了。反正你们一般确定不会用这两个方法去绘制图形的。
有个贝塞尔曲线可视化的网页,对画贝塞尔曲线有帮助。戳这里
2D路径对象
实际绘图过程当中,经常须要绘制不少路径,其中不少多是重复的。2D路径对象的做用就是存储重复使用的路径,提升性能,简化代码,新版浏览器都支持。
我先说一下初始化2D路径对象的方法,有三种:
new Path2D(); // empty path object
new Path2D(path); // copy from another Path2D object
new Path2D(d); // path from SVG path data
构造函数能够不含参数,这样建立的就是一个空的路径对象,一样也能够传一个2D路径对象做参数,这样就拷贝了一个2D路径对象,还能够传一段SVG路径数据,好比这样:var p = new Path2D('M10 10 h 80 v 80 h -80 Z');
仍是用例子来讲明Path2D这个对象比较清楚:
function draw() { var canvas = document.getElementById('canvas'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); var rectangle = new Path2D(); rectangle.rect(10, 10, 50, 50); var circle = new Path2D(); circle.moveTo(125, 35); circle.arc(100, 35, 25, 0, 2 * Math.PI); ctx.stroke(rectangle); ctx.fill(circle); } }
function draw() { var canvas = document.getElementById('canvas'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); var rectangle = new Path2D(); rectangle.rect(10, 10, 50, 50); var circle = new Path2D(); circle.moveTo(125, 35); circle.arc(100, 35, 25, 0, 2 * Math.PI); ctx.stroke(rectangle); ctx.fill(circle); } }
在这个例子中,建立了一个存储了矩形路径的对象,和一个存储了圆的路径对象,结果以下:
全部上面说过的路径绘制方法Path2D这个对象都能使用。
另外Path2D这个对象还有一个拼接路径的方法:
Path2D.addPath(path [, transform])
Adds a path to the current path with an optional transformation matrix.
把一段路径传进去就能够将这两段路径拼接起来,带有一个可选参数,是一个SVG变换矩阵。
举个栗子:
var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); // Create a new path with a rect var p1 = new Path2D(); p1.rect(0, 0, 100, 100); // Create another path with a rect var p2 = new Path2D(); p2.rect(0, 0, 100, 100); // Create transformation matrix that moves vertically 300 points to the right var m = document.createElementNS('http://www.w3.org/2000/svg', 'svg').createSVGMatrix(); m.a = 1; m.b = 0; m.c = 0; m.d = 1; m.e = 300; m.f = 0; // add the second path to the first path p1.addPath(p2, m); // Finally, fill the first path onto the canvas ctx.fill(p1);
var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); // Create a new path with a rect var p1 = new Path2D(); p1.rect(0, 0, 100, 100); // Create another path with a rect var p2 = new Path2D(); p2.rect(0, 0, 100, 100); // Create transformation matrix that moves vertically 300 points to the right var m = document.createElementNS('http://www.w3.org/2000/svg', 'svg').createSVGMatrix(); m.a = 1; m.b = 0; m.c = 0; m.d = 1; m.e = 300; m.f = 0; // add the second path to the first path p1.addPath(p2, m); // Finally, fill the first path onto the canvas ctx.fill(p1);