成都专业做网站公司,信息公开网站建设,网站开发 绩效考核,wordpress大门户主题1. 前言 canvas是HTML5新增元素#xff0c;它是一个画板#xff0c;开发人员基于它的2D上下文或webgl上下文#xff0c;使用JS脚本绘制简单的动画、可交互画面#xff0c;甚至进行视频渲染。 本篇介绍基于canvas的2D上下文绘制2D画面的一些方法和属性。
2. canvas…1. 前言 canvas是HTML5新增元素它是一个画板开发人员基于它的2D上下文或webgl上下文使用JS脚本绘制简单的动画、可交互画面甚至进行视频渲染。 本篇介绍基于canvas的2D上下文绘制2D画面的一些方法和属性。
2. canvas元素 2D坐标系左上点是坐标原点(0,0)x轴正方向向右y轴正方向向下x正方向为弧度0。 视口viewportcanvas宽高确定视口大小默认宽高(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 idcanvas width500 height450 不支持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 cpx140, cpy1100; const x200, y200; 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 cpx120, cpy1100; const cpx2100, cpy2 20; const x200, y200; ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y); ctx.stroke(); CanvasRenderingContext2D .prototype.getLineDash() 功能获取当前虚线样式 输入无 输出Arraynumber ctx.setLineDash([20, 5]); ctx.lineDashOffset 0; ctx.strokeRect(50, 50, 210, 210); const arr ctx.getLineDash() CanvasRenderingContext2D .prototype.setLineDash(widthArr) 功能设置线段与间隙长度的交替 输入Arraynumber 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)
注以上如有不合理之处还请帮忙指出大家一起交流学习~
