1. 前言
<canvas>是HTML5新增元素,它是一个画板,开发人员基于它的2D上下文或webgl上下文,使用JS脚本绘制简单的动画、可交互画面,甚至进行视频渲染。
本篇介绍基于canvas的2D上下文绘制2D画面的一些方法和属性。
2. canvas元素
2D坐标系:左上点是坐标原点(0,0),x轴正方向向右,y轴正方向向下,x正方向为弧度0。
视口viewport:canvas宽高确定视口大小,默认宽高(300px, 150px)。
canvas元素是HTMLCanvasElement实例化对象,以下列出HTMLCanvasElement原型对象的方法和属性。
方法和属性 | 描述 | 示例 |
HTMLCanvasElement .prototype.getContext() | 功能:获取一个渲染上下文 输入:‘2d’ | 'webgl' | 'experimental-webgl' 输出:CanvasRenderingContext2D | const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); |
HTMLCanvasElement .prototype.toDataURL() | <略> | <略> |
HTMLCanvasElement .prototype.toBlob() | <略> | <略> |
HTMLCanvasElement .prototype.captureStream() | <略> | <略> |
HTMLCanvasElement .prototype .transferControlToOffscreen() | <略> | <略> |
HTMLCanvasElement .prototype.width | 功能:设置画布的宽度,默认300px,不建议使用css设置width | <canvas id="canvas" width="500" height="450"> 不支持canvas </canvas> |
HTMLCanvasElement .prototype.height | 功能:设置画布的高度,默认150px,不建议使用css设置height |
ctx是CanvasRenderingContext2D的实例化对象,CanvasRenderingContext2D原型对象的方法和属性如下。
方法和属性 | 描述 | 示例 |
绘制矩形 | ||
CanvasRenderingContext2D .prototype.fillRect(x,y, width, height) | 功能:绘制一个填充矩形 输入: x 矩形左上角x轴坐标 y 矩形左上角y轴坐标 width 矩形宽度 height 矩形高度 | ctx.fillStyle = "rgb(200,0,0)"; ctx.fillRect (10, 10, 55, 50); |
CanvasRenderingContext2D .prototype.strokeRect(x,y, width, height) | 功能:绘制一个描边矩形 输入:同fillRect的参数 | ctx.strokeRect(10, 70, 55, 50); |
CanvasRenderingContext2D .prototype.clearRect(x,y, width, height) | 功能:清除指定的矩形区域,清除后这块区域变透明 输入:同fillRect的参数 | ctx.clearRect(15, 15, 50, 25); |
绘制路径 | ||
CanvasRenderingContext2D .prototype.beginPath() | 功能:新建一条路径 输入:无 | ctx.beginPath(); ctx.moveTo(50, 50); ctx.lineTo(200, 50); ctx.lineTo(200, 200); ctx.closePath(); ctx.stroke(); // 绘制出一个三角形 ctx.beginPath(); ctx.moveTo(50, 50); ctx.lineTo(200, 50); ctx.lineTo(200, 200); ctx.fill(); // 绘制出一个三角形,并填充黑色 |
CanvasRenderingContext2D .prototype.moveTo(x,y) | 功能:移动画笔到坐标x,y 输入: x 位置的x轴坐标 y 位置的y轴坐标 | |
CanvasRenderingContext2D .prototype.lineTo(x,y) | 功能:定义一条从当前位置到目标点x,y的直线 输入: x 目标点的x轴坐标 y 目标点的y轴坐标 | |
CanvasRenderingContext2D .prototype.closePath() | 功能:闭合路径 | |
CanvasRenderingContext2D .prototype.stroke() | 功能:绘制路径 | |
CanvasRenderingContext2D .prototype.fill() | 功能:填充闭合区域,如果路径未闭合,fill()会自动将路径闭合 | |
CanvasRenderingContext2D .prototype.arc(x , y, r, startAngle, endAngle, anticlockwise) | 功能:绘制圆弧,以x,y为圆心,以r为半径,从startAngle弧度开始到endAngle弧度结束,anticlockwise true表示逆时针,false表示顺时针,默认false 注:弧度0表示x轴正方向 | ctx.beginPath(); ctx.arc(150, 50, 40, 0, -Math.PI / 2, true); ctx.closePath(); ctx.stroke(); ctx.beginPath(); ctx.arc(150, 150, 40, 0, Math.PI, false); ctx.fill(); |
CanvasRenderingContext2D .prototype.arcTo(x1, y1, x2, y2, radius) | 功能:绘制圆弧,以x1,y1和x2,y2为控制点,以radius为圆弧半径 注:圆弧与当前点到x1,y1直线,以及x1,y1到x2,y2直线相切 | ctx.beginPath(); ctx.moveTo(50, 50); ctx.arcTo(200, 50, 200, 200, 100); ctx.lineTo(200, 200) ctx.stroke(); |
CanvasRenderingContext2D .prototype.quadraticCurveTo(cpx1, cpy1, x, y) | 功能:以cpx1,cpy1为控制点,以x,y为终点,绘制二次贝塞尔曲线 | ctx.beginPath(); ctx.moveTo(10, 200); const cpx1=40, cpy1=100; const x=200, y=200; ctx.quadraticCurveTo(cpx1, cpy1, x, y); ctx.stroke(); |
CanvasRenderingContext2D .prototype.bezierCurveTo(cpx1,cpy1, cpx2, cpy2, x, y); | 功能:以cpx1,cpy1和cpx2,cpy2为控制点,以x,y为终点,绘制三次贝塞尔曲线 | ctx.beginPath(); ctx.moveTo(40, 200); const cpx1=20, cpy1=100; const cpx2=100, cpy2= 20; const x=200, y=200; ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y); ctx.stroke(); |
CanvasRenderingContext2D .prototype.getLineDash() | 功能:获取当前虚线样式 输入:无 输出:Array<number> | ctx.setLineDash([20, 5]); ctx.lineDashOffset = 0; ctx.strokeRect(50, 50, 210, 210); const arr = ctx.getLineDash() |
CanvasRenderingContext2D .prototype.setLineDash(widthArr) | 功能:设置线段与间隙长度的交替 输入:Array<number> | |
CanvasRenderingContext2D .prototype.lineDashOffset = offset | 功能:设置起始偏移量 | |
CanvasRenderingContext2D .prototype.fillStyle = color | 功能:设置图形填充颜色,默认黑色 输入:color 颜色值 | 渐变对象 | 图案对象 | ctx.fillStyle = "rgb(200,0,0)"; ctx.fillRect (10, 10, 55, 50); |
CanvasRenderingContext2D .prototype.strokeStyle = color | 功能:设置图形描边颜色,默认黑色 输入:color 颜色值 | 渐变对象 | 图案对象 | ctx.strokeStyle = "rgb(200,0,0)"; ctx.strokeRect (10, 10, 55, 50); |
CanvasRenderingContext2D .prototype.lineWidth = width | 功能:设置线宽度,正值,默认1.0,起点和终点连续中心,上下线宽各占一半 | ctx.beginPath(); ctx.moveTo(10, 10); ctx.lineTo(100, 10); ctx.lineTo(100, 100); ctx.lineWidth = 10; ctx.lineCap = 'round'; ctx.lineJoin = 'miter'; ctx.stroke(); |
CanvasRenderingContext2D .prototype.lineCap = type | 功能:线条末端样式 输入:butt | round | square | |
CanvasRenderingContext2D .prototype.lineJoin = type | 功能:同一个path内,设置线条和线条间接合处的样式 输入:round | bevel | miter | |
绘制文本 | ||
CanvasRenderingContext2D .prototype.fillText(text, x, y, maxWidth?) | 功能:在指定位置x,y填充指定文本text,绘制最大宽度可选 | ctx.font = "100px sans-serif"; ctx.fillText("热爱技术", 10, 100); ctx.strokeText("热爱技术", 10, 200) |
CanvasRenderingContext2D .prototype.strokeText(text, x, y, maxWidth?) | 功能:在指定位置x,y描边指定文本text,绘制最大宽度可选 | |
CanvasRenderingContext2D .prototype.font = font | 功能:绘制文本的样式,默认'10px sanf-serif' | |
CanvasRenderingContext2D .prototype.textAlign = align | 功能:文本对齐方式,默认alphabetic 输入:top | hanging | middle | alphabetic | ideographic | bottom | |
CanvasRenderingContext2D .prototype.direction = direction | 功能:文本方向,默认inherit 输入:ltr | rtl | inherit | |
绘制图像 | ||
CanvasRenderingContext2D .prototype.drawImage(image, x, y, width?, heigth?) | 功能:绘制图片 输入: image: HTMLImageElement, x 开始绘制位置的x轴坐标 y 开始绘制位置的y轴坐标 width 绘制的图片宽度 height 绘制的图片高度 注:Image继承于HTMLImageElement | |
CanvasRenderingContext2D .prototype.drawImage(image, sx, sy, sWidth, sHeigth, dx, dy, dWidth, dHeigth) | 功能:绘制图片 输入: image: HTMLImageElement, sx,sy,sWidth,sHeight 从源图像扣图位置和大小 dx,dx,dWidth,dHeight 在canvas目标中显示位置和大小 | |
状态的保存和恢复 | ||
CanvasRenderingContext2D .prototype.save() | 功能:将canvas当前状态保存到栈中,入栈 | ctx.fillRect(0, 0, 150, 150); ctx.save(); ctx.restore(); |
CanvasRenderingContext2D .prototype.restore() | 功能:将上一次保存的状态从栈弹出,出栈 | |
变换 | ||
CanvasRenderingContext2D .prototype.translate(x,y) | 功能:将canvas原点移动到指定位置x,y 输入: x 目标位置的x轴坐标 y 目标位置的y轴坐标 | ctx.save(); ctx.translate(100, 100); ctx.strokeRect(0, 0, 100, 100) ctx.restore(); ctx.translate(220, 220); ctx.fillRect(0, 0, 100, 100); |
CanvasRenderingContext2D .prototype.rotate(angle) | 功能:将canvas坐标轴顺时针旋转一个角度 | ctx.fillStyle = "red"; ctx.save(); ctx.translate(100, 100); ctx.rotate(Math.PI / 180 * 45); ctx.fillStyle = "blue"; ctx.fillRect(0, 0, 100, 100); ctx.restore(); ctx.save(); ctx.translate(0, 0); ctx.fillRect(0, 0, 50, 50) ctx.restore(); |
CanvasRenderingContext2D .prototype.scale(x,y) | 功能:将canvas坐标轴横纵按比例缩放 输入: x x轴缩放比例 y y轴缩放比例 | |
CanvasRenderingContext2D .prototype.transform(a,b,c,d,e,f) a c e b d f 0 0 1 | 功能:变换矩阵 a x轴缩放比例 b x轴skew c y轴skew d y轴缩放比例 e x轴平移量 f y轴平移量 | ctx.transform(1, 1, 0, 1, 0, 0); ctx.fillRect(0, 0, 100, 100); |
合成 | ||
CanvasRenderingContext2D .prototype.globalCompositeOperation = type | 功能:设置图形合成方式,默认不设置,新图像覆盖原图像 输入: 1. soure-in 仅新图像与老图像重叠部分,其它区域透明 2. soure-out 新图像与老图像不重叠部分,老图像不显示 3. source-atop 新图像仅显示与老图像重叠部分,老图像仍显示 4. destination-over 新图像在老图像下面 5. destination-in 仅老图像与新图像重叠部分,其它区域透明 6. destination-out 老图像与新图像不重叠部分,新图像不显示 7. destination-atop: 老图像仅显示重叠部分,新图像在老图像下面 8. lighter 新老图像都显示,相加操作 9. darken 保留重叠部分最黑的像素,位与操作 10. lighten 保留重叠部分,位域操作 11. xor,异或操作 12. copy 仅新图像保留,其它区域透明 | <略> |
裁剪路径 | ||
CanvasRenderingContext2D .prototype.clip() | 功能:将已创建的路径转换成裁剪路径,仅显示裁剪区域,隐藏裁剪路径外的区域 | <略> |
有兴趣的同学可以参见:学习 HTML5 Canvas 这一篇文章就够了 | 菜鸟教程 (runoob.com)
注:以上,如有不合理之处,还请帮忙指出,大家一起交流学习~