为画布中元素应用图形变换
[quote]
平移
context.translate(150, 150);
两个参数是 (x,y) 坐标值, 表示把 2D 渲染上下文的原点移动多远.
[/quote]
html 代码
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Canvas</title>
- <script src="https://cdn.bootcss.com/jquery/2.2.1/jquery.js"></script>
- <style type="text/css">
- * { margin: 0;padding: 0; }
- html, body { width: 100%;height: 100%; }
- canvas { display: block; }
- </style>
- </head>
- <body>
- <canvas id="canvas" width="1000" height="500">当前浏览器不支持 canvas, 请更换浏览器使用!</canvas>
- <script type="text/javascript">
- $(function() {
- var canvas = $("#canvas");
- var context = canvas.get(0).getContext("2d");
- context.fillRect(150, 150, 100, 100);
- context.translate(100, 100);
- context.fillStyle = "#f90";
- context.fillRect(150, 150, 100, 100);
- })
- </script>
- </body>
- </html>
- [quote]
缩放
context.scale(2, 2);
将 2D 渲染上下文的 x 和 y 方向都乘以 2.
[/quote]
html 代码
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Canvas</title>
- <script src="https://cdn.bootcss.com/jquery/2.2.1/jquery.js"></script>
- <style type="text/css">
- * { margin: 0;padding: 0; }
- html, body { width: 100%;height: 100%; }
- canvas { display: block; }
- </style>
- </head>
- <body>
- <canvas id="canvas" width="1000" height="500">当前浏览器不支持 canvas, 请更换浏览器使用!</canvas>
- <script type="text/javascript">
- $(function() {
- var canvas = $("#canvas");
- var context = canvas.get(0).getContext("2d");
- context.save(); // 保存画布的状态
- context.translate(200, 50); // 将原点移动到(200, 50)
- context.scale(3, 1); // 将画布分别放大 3 倍和 1 倍
- context.fillStyle = "#f90";
- context.fillRect(0, 0, 100, 100); // 在位置 (0, 0) 绘制
- context.restore(); // 恢复画布的状态
- context.fillRect(0, 0, 100, 100);
- })
- </script>
- </body>
- </html>
- [quote]
旋转
- context.rotate(0.7854); // Rotate 45 degrees (Math.PI/4)
- context.fillRect(0, 0, 100, 100);
注意: rotate 方法是把 2D 渲染上下文绕其原点 (0,0) 进行旋转的. 如果你只想旋转所要绘制的图形, 那么这样肯定不行, 还是需要借助 translate()方法.
[/quote]
html 代码
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Canvas</title>
- <script src="https://cdn.bootcss.com/jquery/2.2.1/jquery.js"></script>
- <style type="text/css">
- * { margin: 0;padding: 0; }
- html, body { width: 100%;height: 100%; }
- canvas { display: block; }
- </style>
- </head>
- <body>
- <canvas id="canvas" width="1000" height="500">当前浏览器不支持 canvas, 请更换浏览器使用!</canvas>
- <script type="text/javascript">
- $(function() {
- var canvas = $("#canvas");
- var context = canvas.get(0).getContext("2d");
- context.save(); // 保存画布的状态
- context.translate(200, 0); // 将原点移动到(200, 50)
- context.rotate(Math.PI / 4); // 旋转 45 度
- context.fillStyle = "#f90";
- context.fillRect(-50, -50, 100, 100);
- context.translate(100, 0);
- context.rotate(Math.PI / 1);
- context.fillStyle = "#f40";
- context.fillRect(0, 0, 100, 100);
- context.restore(); // 恢复画布的状态
- context.fillRect(0, 0, 100, 100);
- })
- </script>
- </body>
- </html>
- [quote]
变换矩阵
HTML5 canvas transform() 方法 http://www.w3school.com.cn/tags/canvas_transform.asp
context.transform(a,b,c,d,e,f);
a,b,c,d,e,f 分别对应 xScale, xSkew, xTrans, ySkew, yScale, ytrans;
[/quote]
html 代码
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Canvas</title>
- <script src="https://cdn.bootcss.com/jquery/2.2.1/jquery.js"></script>
- <style type="text/css">
- * { margin: 0;padding: 0; }
- html, body { width: 100%;height: 100%; }
- canvas { display: block; }
- </style>
- </head>
- <body>
- <canvas id="canvas" width="1000" height="500">当前浏览器不支持 canvas, 请更换浏览器使用!</canvas>
- <script type="text/javascript">
- $(function() {
- var canvas = $("#canvas");
- var ctx = canvas.get(0).getContext("2d");
- ctx.fillStyle="#eee";
- ctx.fillRect(0,0,250,100)
- ctx.transform(1,0.5,-0.5,1,30,10);
- ctx.fillStyle="#ddd";
- ctx.fillRect(0,0,250,100);
- ctx.transform(1,0.5,-0.5,1,30,10);
- ctx.fillStyle="#ccc";
- ctx.fillRect(0,0,250,100);
- })
- </script>
- </body>
- </html>
将多个可视化元素组合成为一个可视化元素
[quote]先了解一下画布中最简单的合成方法, 即 globalAlpha 属性.
globalAlpha 设置的是全局阿尔法值, 这个值会在后续应用 rgba 颜色值等阿尔法值时被参照.[/quote]
html 代码
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Canvas</title>
- <script src="https://cdn.bootcss.com/jquery/2.2.1/jquery.js"></script>
- <style type="text/css">
- * { margin: 0;padding: 0; }
- html, body { width: 100%;height: 100%; }
- canvas { display: block; }
- </style>
- </head>
- <body>
- <canvas id="canvas" width="1000" height="500">当前浏览器不支持 canvas, 请更换浏览器使用!</canvas>
- <script type="text/javascript">
- $(function() {
- var canvas = $("#canvas");
- var ctx = canvas.get(0).getContext("2d");
- ctx.fillStyle = "rgb(60, 160, 250)";
- ctx.fillRect(100, 100, 100, 100);
- ctx.globalAlpha = 0.8;
- ctx.fillStyle = "rgb(255, 123, 172)";
- ctx.fillRect(150, 50, 100, 100);
- })
- </script>
- </body>
- </html>
[quote]合成操作
globalCompositeOperation 支持的 11 种选择, 原文请戳标题链接.[/quote]
html 代码
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Canvas</title>
- <script src="https://cdn.bootcss.com/jquery/2.2.1/jquery.js"></script>
- <style type="text/css">
- * { margin: 0;padding: 0; }
- html, body { width: 100%;height: 100%; }
- canvas { display: block; border: 1px solid #ccc;margin:20px auto;}
- </style>
- </head>
- <body>
- <canvas id="canvas" width="500" height="200">当前浏览器不支持 canvas, 请更换浏览器使用!</canvas>
- <canvas id="canvas1" width="500" height="200"></canvas>
- <canvas id="canvas2" width="500" height="200"></canvas>
- <canvas id="canvas3" width="500" height="200"></canvas>
- <canvas id="canvas4" width="500" height="200"></canvas>
- <canvas id="canvas5" width="500" height="200"></canvas>
- <script type="text/javascript">
- $(function() {
- var canvas = $("#canvas");
- var ctx = canvas.get(0).getContext("2d");
- ctx.fillStyle = "rgb(60, 160, 250)";
- ctx.fillRect(100, 100, 100, 100);
- ctx.globalAlpha = 0.8;
- ctx.fillStyle = "rgb(255, 123, 172)";
- ctx.fillRect(150, 50, 100, 100);
- var canvas1 = $("#canvas1");
- var ctx1 = canvas1.get(0).getContext("2d");
- ctx1.fillStyle = "rgb(60, 160, 250)";
- ctx1.fillRect(100, 100, 100, 100);
- ctx1.globalCompositeOperation = "source-over";
- ctx1.fillStyle = "rgb(255, 123, 172)";
- ctx1.fillRect(150, 50, 100, 100);
- var canvas2 = $("#canvas2");
- var ctx2 = canvas2.get(0).getContext("2d");
- ctx2.fillStyle = "rgb(60, 160, 250)";
- ctx2.fillRect(100, 100, 100, 100);
- ctx2.globalCompositeOperation = "source-atop";
- ctx2.fillStyle = "rgb(255, 123, 172)";
- ctx2.fillRect(150, 50, 100, 100);
- var canvas3 = $("#canvas3");
- var ctx3 = canvas3.get(0).getContext("2d");
- ctx3.fillStyle = "rgb(60, 160, 250)";
- ctx3.fillRect(100, 100, 100, 100);
- ctx3.globalCompositeOperation = "source-out";
- ctx3.fillStyle = "rgb(255, 123, 172)";
- ctx3.fillRect(150, 50, 100, 100);
- var canvas4 = $("#canvas4");
- var ctx4 = canvas4.get(0).getContext("2d");
- ctx4.fillStyle = "rgb(60, 160, 250)";
- ctx4.fillRect(100, 100, 100, 100);
- ctx4.globalCompositeOperation = "lighter";
- ctx4.fillStyle = "rgb(100, 123, 172)";
- ctx4.fillRect(150, 50, 100, 100);
- var canvas5 = $("#canvas5");
- var ctx5 = canvas5.get(0).getContext("2d");
- ctx5.fillStyle = "rgb(60, 160, 250)";
- ctx5.fillRect(100, 100, 100, 100);
- ctx5.globalCompositeOperation = "xor";
- ctx5.fillStyle = "rgb(100, 123, 172)";
- ctx5.fillRect(150, 50, 100, 100);
- })
- </script>
- </body>
- </html>
- [quote]#### 用来创建多边形和曲线
quadraticCurveTo()方法, 有 4 个参数: 控制点的 (x,y) 坐标值, 以及路径目标点的 (x,y) 坐标.
bezierCurveTo()有 6 个参数: 第一个控制点的 (x,y) 坐标值, 第二个控制点 (x,y), 以及路径目标点的(x,y) 坐标.
[/quote]
html 代码
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Canvas2</title>
- <script src="https://cdn.bootcss.com/jquery/2.2.1/jquery.js"></script>
- <style type="text/css">
- * { margin: 0;padding: 0; }
- html, body { width: 100%;height: 100%; }
- canvas { display: block; border: 1px solid #ccc;margin:20px auto;}
- h4 { text-align: center; }
- </style>
- </head>
- <body>
- <canvas id="canvas" width="500" height="200">当前浏览器不支持 canvas, 请更换浏览器使用!</canvas>
- <h4 > 创建二次贝塞尔曲线</h4>
- <canvas id="canvas1" width="500" height="200"></canvas>
- <h4 > 创建三次贝塞尔曲线</h4>
- <canvas id="canvas2" width="500" height="200"></canvas>
- <script type="text/javascript">
- $(function() {
- var canvas = $("#canvas");
- var ctx = canvas.get(0).getContext("2d");
- ctx.beginPath();
- ctx.moveTo(250, 30);
- ctx.lineTo(300, 130);
- ctx.lineTo(200, 130);
- ctx.closePath();
- ctx.stroke();
- ctx.fill();
- var canvas1 = $("#canvas1");
- var ctx1 = canvas1.get(0).getContext("2d");
- ctx1.lineWidth = 3;
- ctx1.beginPath();
- ctx1.moveTo(100, 100);
- ctx1.quadraticCurveTo(250, 0, 400, 100)
- ctx1.stroke();
- var canvas2 = $("#canvas2");
- var ctx2 = canvas2.get(0).getContext("2d");
- ctx2.lineWidth = 3;
- ctx2.beginPath();
- ctx2.moveTo(100, 100);
- ctx2.bezierCurveTo(250, -150, 350, 300, 400, 100)
- ctx2.stroke();
- })
- </script>
- </body>
- </html>
将画布图像数据保存为一个 HTML 图像元素
toDataURL 方法, 这个简单的方法能够将画布绘图转换为一个数据 URL, 我们可以通过它在浏览器上显示一个图像.
html 代码
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Canvas3</title>
- <script src="https://cdn.bootcss.com/jquery/2.2.1/jquery.js"></script>
- <style type="text/css">
- * { margin: 0;padding: 0; }
- html, body { width: 100%;height: 100%; }
- canvas { display: block; border: 1px solid #ccc;margin:20px auto;}
- h4 { text-align: center; }
- </style>
- </head>
- <body>
- <h4 > 准备导出的画布</h4>
- <canvas id="canvas" width="500" height="300">当前浏览器不支持 canvas, 请更换浏览器使用!</canvas>
- <h4 > 右键点击即可查看图片</h4>
- <canvas id="canvas1" width="500" height="200"></canvas>
- <script type="text/javascript">
- $(function() {
- var canvas = $("#canvas");
- var ctx = canvas.get(0).getContext("2d");
- ctx.save();
- ctx.fillRect(50, 0, 100, 100);
- ctx.fillStyle = "#f90";
- ctx.fillRect(100, 50, 100, 100);
- ctx.restore();
- ctx.fillRect(150, 100, 100, 100);
- var dataURL = canvas.get(0).toDataURL();
- var img = $("<img></img");
- img.attr("src", dataURL);
- $("#canvas1").replaceWith(img);
- })
- </script>
- </body>
- </html>
从外部读取已有的图像文件到 Canvas 中
- [quote]
- context.drawImage(image, x, y);
需要三个参数: 所绘制的图像和图像绘制位置的 (x,y) 坐标.
[/quote]
原图:
html 代码
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Canvas3</title>
- <script src="https://cdn.bootcss.com/jquery/2.2.1/jquery.js"></script>
- <style type="text/css">
- * { margin: 0;padding: 0; }
- html, body { width: 100%;height: 100%; }
- canvas { display: block; border: 1px solid #ccc;margin:20px auto;}
- h4 { text-align: center; }
- </style>
- </head>
- <body>
- <h4 > 将图片导入到画布</h4>
- <canvas id="canvas" width="500" height="300">当前浏览器不支持 canvas, 请更换浏览器使用!</canvas>
- <script type="text/javascript">
- $(function() {
- var canvas = $("#canvas");
- var ctx = canvas.get(0).getContext("2d");
- var image = new Image();
- image.src = "http://cdn.attach.qdfuns.com/notes/pics/201710/17/174240gjuz7e5dd7sfhyhy.png";
- $(image).load(function() {
- ctx.drawImage(image, 0, 0);
- });
- })
- </script>
- </body>
- </html>
根据应用场景来调整或裁剪图像
[quote]调整图像大小:
context.drawImage(image, x, y, width, height);
裁剪图像:
context.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh);
它总共有 9 个参数: 源图像, 源图像的裁剪区原点坐标 (x,y), 源图像的裁剪区宽度和高度, 在画布(目标) 上绘制图像的原点坐标 (x,y) 及在画布上绘制图像的宽度和高度.
[/quote]
html 代码
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Canvas3</title>
- <script src="https://cdn.bootcss.com/jquery/2.2.1/jquery.js"></script>
- <style type="text/css">
- * { margin: 0;padding: 0; }
- html, body { width: 100%;height: 100%; }
- canvas { display: block; border: 1px solid #ccc;margin:20px auto;}
- h4 { text-align: center; }
- </style>
- </head>
- <body>
- <h4 > 调整或裁剪图像</h4>
- <canvas id="canvas" width="500" height="300">当前浏览器不支持 canvas, 请更换浏览器使用!</canvas>
- <canvas id="canvas1" width="500" height="300">当前浏览器不支持 canvas, 请更换浏览器使用!</canvas>
- <script type="text/javascript">
- $(function() {
- var canvas = $("#canvas");
- var canvas1 = $("#canvas1");
- var ctx = canvas.get(0).getContext("2d");
- var ctx1 = canvas1.get(0).getContext("2d");
- var image = new Image();
- image.src = "http://cdn.attach.qdfuns.com/notes/pics/201710/17/174240gjuz7e5dd7sfhyhy.png";
- $(image).load(function() {
- ctx.drawImage(image, 0, 0, 300, 200);
- ctx1.drawImage(image, 0, 0, 500, 250, 50, 50, 500, 250);
- });
- })
- </script>
- </body>
- </html>
和图形一样, 图像也支持几何变换
html 代码
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Canvas3</title>
- <script src="https://cdn.bootcss.com/jquery/2.2.1/jquery.js"></script>
- <style type="text/css">
- * { margin: 0;padding: 0; }
- html, body { width: 100%;height: 100%; }
- canvas { display: block; border: 1px solid #ccc;margin:20px auto;}
- h4 { text-align: center; }
- </style>
- </head>
- <body>
- <h2 > 几何变形</h2>
- <h4 > 平移</h4>
- <canvas id="canvas" width="500" height="300">当前浏览器不支持 canvas, 请更换浏览器使用!</canvas>
- <h4 > 旋转</h4>
- <canvas id="canvas1" width="500" height="300">当前浏览器不支持 canvas, 请更换浏览器使用!</canvas>
- <script type="text/javascript">
- $(function() {
- var canvas = $("#canvas");
- var canvas1 = $("#canvas1");
- var ctx = canvas.get(0).getContext("2d");
- var ctx1 = canvas1.get(0).getContext("2d");
- ctx.translate(100, 50);
- ctx1.translate(200, 0);
- ctx1.rotate(0.7854);
- var image = new Image();
- var image1 = new Image();
- image.src = "http://cdn.attach.qdfuns.com/notes/pics/201710/18/095144rnh33qyebb2k5rqn.jpg";
- image1.src = "http://cdn.attach.qdfuns.com/notes/pics/201710/18/095144rnh33qyebb2k5rqn.jpg";
- $(image).load(function() {
- ctx.drawImage(image, 0, 0, 350, 150);
- });
- $(image1).load(function() {
- ctx1.drawImage(image, 0, 0, 350, 200);
- });
- })
- </script>
- </body>
- </html>
缩放与翻转, 制作一个变形翻转图像
html 代码
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Canvas3</title>
- <script src="https://cdn.bootcss.com/jquery/2.2.1/jquery.js"></script>
- <style type="text/css">
- * { margin: 0;padding: 0; }
- html, body { width: 100%;height: 100%; }
- canvas { display: block; border: 1px solid #ccc;margin:20px auto;}
- h2, h4 { text-align: center; }
- </style>
- </head>
- <body>
- <h2 > 几何变形</h2>
- <h4 > 平移和翻转</h4>
- <canvas id="canvas" width="800" height="700">当前浏览器不支持 canvas, 请更换浏览器使用!</canvas>
- <script type="text/javascript">
- $(function() {
- var canvas = $("#canvas");
- var canvas1 = $("#canvas1");
- var ctx = canvas.get(0).getContext("2d");
- var image = new Image();
- image.src = "http://cdn.attach.qdfuns.com/notes/pics/201710/20/095143gcjuc1i88gmxttdc.jpg";
- $(image).load(function() {
- // Top-left
- ctx.translate(50, 50);
- ctx.drawImage(image, 50, 50, 400, 400, 0, 0, 300, 300);
- // Top-right
- ctx.setTransform(1, 0, 0, 1, 0, 0);
- ctx.translate(700, 50);
- ctx.scale(-1, 1); // 水平 x 沿 y 轴对折
- ctx.drawImage(image, 50, 50, 400, 400, 0, 0, 300, 300);
- // Left-bottom
- ctx.setTransform(1, 0, 0, 1, 0, 0);
- ctx.translate(50, 600);
- ctx.scale(1, -1);
- ctx.drawImage(image, 50, 50, 400, 400, 0, 0, 300, 300);
- // Right-bottom
- ctx.setTransform(1, 0, 0, 1, 0, 0);
- ctx.translate(700, 600);
- ctx.scale(-1, -1);
- ctx.drawImage(image, 50, 50, 400, 400, 0, 0, 300, 300);
- });
- })
- </script>
- </body>
- </html>
HTML5 Canvas 图形绘制 初级
来源: http://www.qdfuns.com/article/32286/4c494e2cdc21135c41be95fbb685e379.html