首页 > 代码库 > 跟KingDZ学HTML5之七 探究Canvas之各种特效

跟KingDZ学HTML5之七 探究Canvas之各种特效

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

1》移动  translate(x, y)

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

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

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

效果图

技术分享

哈哈。

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

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); 

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

技术分享

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

//cxt.save();   

//cxt.restore();

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

2》旋转 Rotating

rotate(angle) 

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

技术分享

我们做出来这种效果。

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 怎么用了 
技术分享

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 时什么效果都没有。

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);
        }

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

跟KingDZ学HTML5之七 探究Canvas之各种特效