HTML5的变形效果实现,包括:移动,缩放,旋转,自定义变形,裁剪,镜像,变形重置等等操作
下面依次讲解:
①移动 / 位移
使用context上下文的translate方法,我们可以控制图形的位置移动,相关方法如下:
context.translate(100, 100); //x轴和y轴移动距离,这里上线文分别移动100个像素
使用translate方法,可以有效的控制context的起始点位置,因为context位置变化,导致绘制图形位置也变化,因此可以方便的在合适位置绘制图形
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HTML5画布图形位移</title> </head> <body> <!-- 添加canvas标签,并加上红色边框以便于在页面上查看 --> <canvas id="mycanvas" width="400" height="300"></canvas> <script type="text/javascript"> /*相关Javascript*/ var canvas = document.getElementById('mycanvas'); context = canvas.getContext('2d'), elementwidth = 100, elementheight = 100; //为了实现位移效果,使用如下方法: context.translate(100, 100); //然后绘制图形,这里我们生成一个矩形 context.fillStyle = 'orange'; context.fillRect(0, 0, elementwidth, elementheight); //这个矩形左上角坐标(0, 0),宽度和高度均为100px //注意:translate在你绘制图形之前调用 </script> </body> </html>
②缩放
使用context上下文的scale方法,我们可以控制图形的缩放,相关方法如下:
context.scale(50%, 50%); //x轴和y轴缩放比例使用scale方法,可以有效的控制context的缩放,因为context缩放变化,导致绘制图形也变化 注意:要在绘制图形之前控制缩放
③旋转
使用context上下文的rotate方法,实现图形旋转效果
context.rotate(Math.PI/4); //顺时针旋转45度
使用rotate方法,可以有效的控制context的旋转,因为context旋转变化,导致绘制图形也发生变化
④自定义变形
使用画布的自定义变形方法可以实现大家需要的变形方式,如下:
/* * 相关参数说明如下:context.transform(a,b,c,d,e,f); * a: 水平缩放 * b: 水平倾斜 * c: 垂直倾斜 * d: 垂直缩放 * e: 水平位移 * f: 垂直位移 */
例子:context.transform(1, 0.5, 0.5, 1, 100, 100);
注意:变形只影响调用transform方法以后的图形绘制
.⑤阴影效果
//绘制文字阴影 context.scale(1, -1); //再添加一些倾斜效果 context.transform(1, 0, -0.7, 0.7, 0, 0); //旋转了360° context.rotate(Math.PI*2)拓展:
(1)scale() 方法标注画布的用户坐标系统
scale(sx, sy)
scale() 方法为画布的当前变换矩阵添加一个缩放变换。缩放通过独立的水平和垂直缩放因子来完成。例如,传递一个值 2.0 和 0.5 将会导致绘图路径宽度变为原来的两倍,而高度变为原来的 1/2。指定一个负的 sx 值,会导致 X 坐标沿 Y 轴对折,而指定一个负的 sy 会导致 Y 坐标沿着 X 轴对折
例如:scale(1,-1)则是类似阳光照射--垂直阴影
(2)rotate() 方法旋转画布的坐标系统
rotate(angle) //旋转的量,用弧度表示。正值表示顺时针方向旋转,负值表示逆时针方向旋转。
描述:
rotate() 方法通过指定一个角度,改变了画布坐标和 Web 浏览器中的 <Canvas> 元素的像素之间的映射,使得任意后续绘图在画布中都显示为旋转的。它并没有旋转 <Canvas> 元素本身。注意,这个角度是用弧度指定的。
提示:如需把角度转换为弧度,请乘以 Math.PI 并除以 180
文字阴影例子:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HTML5画布图形位移</title> <style type="text/css"> /*界面CSS*/ body{ margin:0; padding:0; } #mycanvas{ background: #E4E4E4; /* 画布背景色 */ } </style> </head> <body> <!-- 定义canvas元素 --> <canvas id="mycanvas" width="400" height="300"></canvas> <script type="text/javascript"> /*画布相关JS*/ //获取context var canvas = document.getElementById('mycanvas'), context = canvas.getContext('2d'); //执行位移操作 context.translate(200, 100); //绘制文字到画布 context.font = "30pt microsoft yahei,Arial,sans-serif"; context.textAlign = "center"; context.fillStyle = "orange"; //绘制正常文字 context.fillText("Hello, gbtags!", 0, 0); //继续位移 context.translate(0, 40); //绘制文字阴影 context.scale(1, -1); // context.rotate(Math.PI*2)这里旋转了360° //再添加一些倾斜效果 context.transform(1, 0, -0.7, 0.7, 0, 0); //最后添加阴影文字 context.textAlign = "center"; context.fillStyle = "#BFBFBF"; context.fillText("Hello, gbtags!", 0, 0); </script> </body> </html>
⑥重置变形
前面我们学习了transform(变形)方法,这里介绍setTransform(重置变形)方法,它可以帮助你重置你使用transform方法生成的变形效果,代码如下:
//调用reset,重置context上下文 context.setTransform(1,0,0,1,0,0); //这里我们使用setTransform方法来重置以前的变形, //以上设置setTransform参数值为(1,0,0,1,0,0)即可保证重置画布的变形
例子:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>canvas重置变形</title> <script type = "text/javascript" src="./jquery.min.js"></script> <style type="text/css"> /*界面CSS*/ body{ margin:0; padding:0; } #mycanvas{ background: #E4E4E4; /* 画布背景色 */ } </style> </head> <body> <!-- 定义canvas元素 --> <canvas id="mycanvas" width="400" height="300"></canvas> <script> /*画布相关JS*/ var canvas = document.getElementById('mycanvas'), context = canvas.getContext('2d'), elementwidth = 100, elementheight = 100; context.translate(100, 100); //将context位置移动到100, 100 //绘制一个矩形 context.fillStyle = 'orange'; context.fillRect(0, 0, elementwidth, elementheight); //调用reset,重置context上下文 context.setTransform(1,0,0,1,0,0); //这里我们使用setTransform方法来重置以前的变形 //再次绘制一个矩形 context.fillStyle = 'black'; context.fillRect(0, 0, elementwidth, elementheight); //现在看到使用setTransform方法的作用了吧,可以帮助我们重置context </script> </body> </html>
⑦重置变形
使用context的save和restore(回复)方法可以准确的控制变形状态的保存和恢复,相关代码如下:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>canvas重置变形</title> <script type = "text/javascript" src="./jquery.min.js"></script> <style type="text/css"> /*界面CSS*/ body{ margin:0; padding:0; } #mycanvas{ background: #E4E4E4; /* 画布背景色 */ } </style> </head> <body> <!-- 定义canvas元素 --> <canvas id="mycanvas" width="400" height="300"></canvas> <script> /*画布JS*/ var canvas = document.getElementById('mycanvas'), context = canvas.getContext('2d'), elementwidth = 50, elementheight = 50; //保存初始变形状态 context.save(); //位移变形 context.translate(100, 100); //保存位移变形状态 context.save(); //旋转变形 context.rotate(-Math.PI/4); //保存旋转变形状态 context.save(); //缩放变形 context.scale(2, 2); //开始绘制图形 //第一个图形包含所有变形状态:即,位移+旋转+缩放 context.fillStyle = 'orange'; context.fillRect(0, 0, elementwidth, elementheight); //恢复到旋转状态点 context.restore(); //第二个图形包含除了缩放以外的所有变形状态:即,位移+旋转 context.fillStyle = 'green'; context.fillRect(0, 0, elementwidth, elementheight); //恢复到位移状态点 context.restore(); //第三个图形只包含位移变形状态:即,位移 context.fillStyle = 'black'; context.fillRect(0, 0, elementwidth, elementheight); //恢复到初始状态点,没有任何变形状态 context.restore(); //第四个图形不包含任何的变形状态 context.fillStyle = 'red'; context.fillRect(0, 0, elementwidth, elementheight); </script> </body> </html>
变形状态的保存和恢复遵循“栈”原理,即先入的后出,后入的先出,也就是先显示出来最终结果。类似一个圆桶里放置一层一层的物品,然后一层一层取出的原理类似。
拓展:
(1) fillStyle 属性来设置用于填充绘图的颜色、渐变或模式。fillRect() 方法绘制“已填色”的矩形。默认的填充颜色是黑色。
context.fillRect(x,y,width,height);
x | 矩形左上角的 x 坐标 |
y | 矩形左上角的 y 坐标 |
width | 矩形的宽度,以像素计 |
height | 矩形的高度,以像素计 |
.