HTML5入门

跟KingDZ学HTML5之七：Canvas移动、旋转、缩放

字号+ 作者： 来源： 2014-11-16 20:49 我要评论( )

初看到题目大家怎么个反应啊，哇塞，这么多啊，可是看完这节课程之后，你会发现这些功能不过如此。 1》移动translate(x, y) 简单的说明一下 ，X 左右偏移量 Y 上下偏移量 说白了，就是

 初看到题目大家怎么个反应啊，哇塞，这么多啊，可是看完这节课程之后，你会发现这些功能不过如此。

1》移动  translate(x, y)

简单的说明一下 ，X  左右偏移量   Y  上下偏移量

说白了，就是说，假如原先的坐标在 （0,0） 那么 使用 translate(100,100) 之后，坐标就到 (100,100)这个点了 。

然后，我们首先呢，我先写个  “王”  哈哈，俺的姓。

效果图

1

哈哈。

大家可以看到，这是的坐标是以（0,0）为原点的。下面我们就想办法，将他更改

JavaScript Code复制内容到剪贴板
  1. function draw() {  
  2.             var c = document.getElementById('mycanvas');  
  3.             var cxt = c.getContext("2d");  
  4.             //cxt.save();      
  5.             cxt.translate(90, 0);  
  6.             cxt.moveTo(0, 0);  
  7.             cxt.lineTo(200, 0);  
  8.             cxt.moveTo(100, 0);  
  9.             cxt.lineTo(100, 200);  
  10.             //cxt.restore();  
  11.             cxt.moveTo(0, 100);  
  12.             cxt.lineTo(200, 100);  
  13.             cxt.moveTo(0, 200);  
  14.             cxt.lineTo(200, 200);  
  15.             cxt.lineWidth = 2;  
  16.             cxt.stroke();  
  17.         }  

看到了吗？我们上面有一句       cxt.translate(90,0); 

这个就是我们  移动了他的 原点，看效果。

1

发生移动了吧。呵呵。大家注意一下，上面的我注释掉的那两个 方法

JavaScript Code复制内容到剪贴板
  1. //cxt.save();     
  2. //cxt.restore();  

然后，你可以将注视打开，看一下效果，呵呵，神马效果，自己打开就知道了，俺在这就不解释了，虽然他们很常用，但是，大家自己去慢慢体会吧。

2》旋转 Rotating

JavaScript Code复制内容到剪贴板
  1. rotate(angle)   

这个方法只接受一个参数：旋转的角度(angle)，它是顺时针方向的，以弧度为单位的值。【弧度怎么计算，呵呵，自己看前面的教程】

1

我们做出来这种效果。

JavaScript Code复制内容到剪贴板
  1. function draw() {  
  2.             var c = document.getElementById('mycanvas');  
  3.             var cxt = c.getContext("2d");  
  4.             cxt.translate(100, 100);  
  5.             for (i = 1; i < 7; i++) {  
  6.                 cxt.save();   //记住状态  
  7.                 cxt.fillStyle = 'rgb(' + (60 * i) + ',' + (200 - 60 * i) + ',25)';  //填充随机的颜色  
  8.                 for (j = 0; j < i * 6; j++) {  
  9.                     cxt.rotate(Math.PI * 2 / (i * 6));    //旋转角度  
  10.                     cxt.beginPath();  
  11.                     cxt.arc(0, i * 12.5, 5, 0, Math.PI * 2, true);  
  12.                     cxt.fill();  
  13.                 }  
  14.                 cxt.restore();  // 还原状态  
  15.             }  
  16.         }  

上面的这个例子啃个有点复杂了，下面我们实现一个相对比较简单的例子相信大家看到就知道  这个rotate 怎么用了 
1

JavaScript Code复制内容到剪贴板
  1. function draw() {  
  2.             var c = document.getElementById("mycanvas");  
  3.             var ctx = c.getContext("2d");  
  4.             var rectWidth = 75;  
  5.             var rectHeight = 75;  
  6.             ctx.translate(c.width / 2, c.height / 2);  
  7.             ctx.rotate(Math.PI * 2 / 6);  
  8.             ctx.fillStyle = "red";  
  9.             ctx.fillRect(-rectWidth / 2, -rectHeight / 2, rectWidth, rectHeight);  
  10.         }  

这回应该好理解了吧，ctx.rotate(Math.PI * 2 / 6); 重点就是这角度的问题。

3》缩放 Scaling

scale(x, y)

scale 方法接受两个参数。x,y 分别是横轴和纵轴的缩放因子，它们都必须是正值。值比 1.0 小表示缩小，比 1.0 大则表示放大，值为 1.0 时什么效果都没有。

JavaScript Code复制内容到剪贴板
  1. function draw() {  
  2.             var c = document.getElementById("mycanvas");  
  3.             var ctx = c.getContext("2d");  
  4.             var rectWidth = 75;  
  5.             var rectHeight = 75;  
  6.             ctx.translate(c.width / 2, c.height / 2);  
  7.             ctx.scale(0.5, 0.5);  
  8.             ctx.fillStyle = "red";  
  9.             ctx.fillRect(-rectWidth / 2, -rectHeight / 2, rectWidth, rectHeight);  
  10.         }  

其实这个缩小，就是类似上面的那个 移动。只不过一个是位置，一个是形状。

 

　

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 盘点HTML5标签使用的常见误区

    盘点HTML5标签使用的常见误区

    2014-11-16 20:49

  • 跟KingDZ学HTML5之十三：HTML5颜色选择器

    跟KingDZ学HTML5之十三：HTML5颜色选择器

    2014-11-16 20:49

  • 跟KingDZ学HTML5之十二：Form表单元素新增属性

    跟KingDZ学HTML5之十二：Form表单元素新增属性

    2014-11-16 20:49

  • 跟KingDZ学HTML5之十一：表单新元素

    跟KingDZ学HTML5之十一：表单新元素

    2014-11-16 20:49

网友点评
精彩导读
小强的HTML5移动开发之路（4）——CSS2和CSS3

小强的HTML5移动开发之路（4）——CSS2和CSS3

小强的HTML5移动开发之路（11）——链接，图片，表格，框架

小强的HTML5移动开发之路（11）——链接，图

小强的HTML5移动开发之路（40）——jqMobi中实践header定义的几

小强的HTML5移动开发之路（40）——jqMobi中

小强的HTML5移动开发之路（35）——jQuery中的过滤器详解

小强的HTML5移动开发之路（35）——jQuery中

小强的HTML5移动开发之路（41）——jqMobi中Side Menu实现（类似

小强的HTML5移动开发之路（41）——jqMobi中S

热门资讯
Copyright © 2006-2018 www.h5cn.com.H5之家 版权所有 Power by H5CN 备案：鲁ICP备17035125号-2
HTML5入门 HTML5技术 canvas教程 专题学习 齐博CMS教程