睿美印象网络欢迎您的到来,并真诚的希望能与您合作!
睿美印象网络
返回上一页
客服QQ
点击这里给我发消息
客服QQ
点击这里给我发消息
一切从沟通开始……

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

作者:睿美印象网站建设工作室  发布日期:2012-11-21
 初看到题目大家怎么个反应啊,哇塞,这么多啊,可是看完这节课程之后,你会发现这些功能不过如此。

1》移动  translate(x, y)

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

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

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

效果图



哈哈。

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

JavaScript Code复制内容到剪贴板
function draw() {  
            var c = document.getElementById(mycanvas);  
            var cxt = c.getContext("2d");  
            //cxt.save();      
            cxt.translate(90, 0);  
            cxt.moveTo(0, 0);  
            cxt.lineTo(200, 0);  
            cxt.moveTo(100, 0);  
            cxt.lineTo(100, 200);  
            //cxt.restore();  
            cxt.moveTo(0, 100);  
            cxt.lineTo(200, 100);  
            cxt.moveTo(0, 200);  
            cxt.lineTo(200, 200);  
            cxt.lineWidth = 2;  
            cxt.stroke();  
        }  
看到了吗?我们上面有一句       cxt.translate(90,0); 

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



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

JavaScript Code复制内容到剪贴板
//cxt.save();     
//cxt.restore();  
然后,你可以将注视打开,看一下效果,呵呵,神马效果,自己打开就知道了,俺在这就不解释了,虽然他们很常用,但是,大家自己去慢慢体会吧。

2》旋转 Rotating

JavaScript Code复制内容到剪贴板
rotate(angle)   
这个方法只接受一个参数:旋转的角度(angle),它是顺时针方向的,以弧度为单位的值。【弧度怎么计算,呵呵,自己看前面的教程】



我们做出来这种效果。

JavaScript Code复制内容到剪贴板
function draw() {  
            var c = document.getElementById(mycanvas);  
            var cxt = c.getContext("2d");  
            cxt.translate(100, 100);  
            for (i = 1; i < 7; i++) {  
                cxt.save();   //记住状态  
                cxt.fillStyle = rgb( + (60 * i) + , + (200 - 60 * i) + ,25);  //填充随机的颜色  
                for (j = 0; j < i * 6; j++) {  
                    cxt.rotate(Math.PI * 2 / (i * 6));    //旋转角度  
                    cxt.beginPath();  
                    cxt.arc(0, i * 12.5, 5, 0, Math.PI * 2, true);  
                    cxt.fill();  
                }  
                cxt.restore();  // 还原状态  
            }  
        }  
上面的这个例子啃个有点复杂了,下面我们实现一个相对比较简单的例子相信大家看到就知道  这个rotate 怎么用了 


JavaScript Code复制内容到剪贴板
function draw() {  
            var c = document.getElementById("mycanvas");  
            var ctx = c.getContext("2d");  
            var rectWidth = 75;  
            var rectHeight = 75;  
            ctx.translate(c.width / 2, c.height / 2);  
            ctx.rotate(Math.PI * 2 / 6);  
            ctx.fillStyle = "red";  
            ctx.fillRect(-rectWidth / 2, -rectHeight / 2, rectWidth, rectHeight);  
        }  
这回应该好理解了吧,ctx.rotate(Math.PI * 2 / 6); 重点就是这角度的问题。

3》缩放 Scaling

scale(x, y)

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

JavaScript Code复制内容到剪贴板
function draw() {  
            var c = document.getElementById("mycanvas");  
            var ctx = c.getContext("2d");  
            var rectWidth = 75;  
            var rectHeight = 75;  
            ctx.translate(c.width / 2, c.height / 2);  
            ctx.scale(0.5, 0.5);  
            ctx.fillStyle = "red";  
            ctx.fillRect(-rectWidth / 2, -rectHeight / 2, rectWidth, rectHeight);  
        }  
其实这个缩小,就是类似上面的那个 移动。只不过一个是位置,一个是形状。

 

转载请注明:睿美印象网站建设工作室www.ruimeiyx.com
分享到:
已有 0 条评论
暂无评论
睿美印象在线客服
客服部小睿:
点击这里给我发消息
设计部小美:
点击这里给我发消息
技术海绵哥:
点击这里给我发消息
在线淘客服:
睿美印象网络
淘客服小睿:
睿美印象小睿
淘客服小美:
睿美印象小美