HTML5 HTML5Canvas标签的应用-矩阵变换

[复制链接]
建站高手 发表于 2015-9-8 22:36:21 [HTML5] 显示全部楼层 |阅读模式 上一主题 下一主题

马上注册,一起探讨正确快速的建站方法

您需要 登录 才可以下载或查看,没有帐号?快速注册

x
HTML5利用坐标变换而实现的图形变换技术,当利用坐标变换不能满足我们的需要时,我们可以利用矩阵变换技术。接下来,我们将介绍更为复杂的矩阵变换变形技术。

矩阵是用来专门实现图形变形的,它与坐标一起配合使用,达到变形的目的。当图形上下文被创建完毕时,事实上也创建了一个默认的变换矩阵,如果不对这个矩阵进行修改,那么接下来绘制的图形将以画布的最左上角为坐标原点进行绘制图形,绘制出来的图形也不经过缩放变形处理,但是如果对这个变换矩阵进行修改,那么情况就不一样了。

transform方法
context.transform(a, b, c, d, x, y);
此方法有6个参数,其中a, b, c, d这四个参数主要用来对图形进行变形;x, y表示移动的坐标点。

在上节使用坐标变换进行图形变形中所提到的三个方法:
translate(x, y);
scale(x ,y);
rotate(angle);

它们都可以使用transform方法来代替,套用context.transform(a, b, c, d, x, y);中的六个参入如下:
translate(x, y);
scale(a, d);
rotate(b, c);//此方法其实只有一个参数,在这里为了便于理解且对应transform,故使用剩余的2个参数,放在这里,是为了告诉大家,这两个参数作用差不多,都是与旋转有关

代码案例

HTML5Canvas标签的应用-矩阵变换

HTML5Canvas标签的应用-矩阵变换

  1. <!DOCTYPE HTML>
  2. <html>
  3.     <head>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  5.         <title>HTML5Canvas标签的应用-矩阵变换</title>
  6.         <script type="text/javascript">
  7.                 window.onload = function()
  8.                 {
  9.                         var canvas = document.getElementById("zb7com_canvas");
  10.                         var context = canvas.getContext("2d");
  11.                         context.fillStyle = "#eee";
  12.                         context.fillRect(0, 0, 800, 600);
  13.                         var colors = ["#f00", "#f90", "#ff0", "#090", "#00f", "#0051a1", "#09f", "#0f0", "#0ff", "#000", "#900", "#090", "#009"];//定义颜色
  14.                         /*定义线宽*/
  15.                         context.lineWidth = 10;
  16.                         context.transform(1, 0, 0, 1, 100, 0);
  17.                         /*循环绘制圆弧*/
  18.                         for(var i = 0, j = colors.length; i < j; i++)
  19.                         {
  20.                                 /*定义每次向下移动10个像素的变换矩阵*/
  21.                                 context.transform(1, 0, 0.03, 1, 10, 10);
  22.                                 /*设定颜色*/
  23.                                 context.strokeStyle = colors[i];
  24.                                 /*绘制圆弧*/
  25.                                 context.beginPath();
  26.                                 context.arc(280, 200, 150, 0, 2, true);
  27.                                 context.stroke();
  28.                         }
  29.                 }
  30.         </script>
  31.     </head>
  32.    
  33.     <body>
  34.             <canvas id="zb7com_canvas" width="800" height="600"></canvas>
  35.     </body>
  36. </html>
复制代码






上一篇:HTML5Canvas标签的应用-坐标变换与路径结合使用
下一篇:推荐书籍:html5移动web开发指南
您需要登录后才可以回帖 登录 | 快速注册

本版积分规则

快速回复 返回顶部 返回列表