用canvas畫會旋轉的傘

這個例子是我在網上看到，而後仿寫的。

主要用到canvas畫圖。

首先，須要在頁面上建立一個畫布

<canvas id="mycanvas" width="1200" height="600" style=""></canvas>

View Code

如今來開始畫圖：

先給出用到的參數：

 var ctx;
        var updown; // 上下移動
        var cwidth      = 1200;
        var cheight     = 600;
        var umbrellaArr = [];
        var updownTime  = 0;  // 上下移動計時器
        var rotateTime  = 0;  // 旋轉計時器
        var origin      = 2; // 上下的原點
        var rotateAngle = 0; // 上下的原點

View Code

步驟一：建立傘對象

// umbrella
        function Umbrella(ux,uy,ucolor){
            this.x         = ux;
            this.y         = uy;
            this.fillStyle = ucolor;
            this.draw      = drawUmbrella;
            this.move      = moveUmbrella;
        }

View Code

步驟二：畫傘

// draw umbrella
        function drawUmbrella(){
            // 半圓
            ctx.fillStyle = this.fillStyle;
            ctx.beginPath();
            ctx.arc(this.x,this.y,30,0,Math.PI,true);
            ctx.closePath();
            ctx.fill();

            // 傘柄
            ctx.fillRect(this.x - 1.5,this.y,1.5,40)
            ctx.beginPath()
            ctx.strokeStyle = this.fillStyle;
            ctx.arc(this.x - 5,this.y + 40,4,Math.PI,Math.PI * 2,true) // 傘鉤
            ctx.stroke()
            ctx.closePath()
        }

View Code

步驟三：初始化，能夠畫傘了

function init(){
            ctx = document.getElementById('mycanvas').getContext('2d')
            ctx.translate(200,300) // 重置畫圖的原點  接下來畫圖都已 （200,300）位原點

            for(var i = 0;i < 10;i++){
                var umbrella = new Umbrella(i * 70, 0, "rgb(" + (30 * i) + "," + (255 - 30 * i) + ",255)")
                umbrellaArr.push(umbrella)
                umbrella.draw()
            }

         
        }                

View Code

下面來實現上下移動的效果

步驟四：在上下移動的效果中，傘會出現位移，因此須要建立一個moveUmbrella函數

// 移動傘
        function moveUmbrella(dx,dy){
            this.x += dx
            this.y += dy
        }

View Code

步驟四：建立上下移動函數

 function updownFunc(){

            if(updownTime % 50 == 0){
                origin = -origin
            }

            clearCanvas(-200,-300)
            updownTime ++;

            for(var i = 0; i < umbrellaArr.length;i++){
                if(i % 2 == 0){
                    umbrellaArr[i].move(0,origin)
                }else{
                    umbrellaArr[i].move(0,-origin)
                }
                umbrellaArr[i].draw()
            }

            updownTime == 100 && clearInterval(updown)

        }

View Code

步驟五：查看效果，把初始化函數改一下

function init(){
            ctx = document.getElementById('mycanvas').getContext('2d')
            ctx.translate(200,300) // 重置畫圖的原點  接下來畫圖都已 （200,300）位原點

            for(var i = 0;i < 10;i++){
                var umbrella = new Umbrella(i * 70, 0, "rgb(" + (30 * i) + "," + (255 - 30 * i) + ",255)")
                umbrellaArr.push(umbrella)
            }

            updown = setInterval(updownFunc, 100);
        }

View Code

使用window.onload()函數

window.onload = function () {
            init()
        }

View Code

 

下面來實現旋轉效果：

步驟六：建立旋轉函數

function rotateUmbrella(){
            clearCanvas(-400,-300)
            rotateTime ++;

            for(var i = 0; i < umbrellaArr.length;i++){
                ctx.save() // 保存初始的狀態，方便畫下一個傘
                ctx.rotate(Math.PI * (2 / 4 + i / 4))
                ctx.translate(0, rotateAngle)

                umbrellaArr[i].x = 0
                umbrellaArr[i].y = 0
                umbrellaArr[i].draw()

                ctx.restore()  // 當第i 個傘畫完以後，恢復到初始的狀態
            }

            rotateAngle ++;

            if(rotateAngle == 70){
                rotateAngle = -rotateAngle
            }

        }

View Code

在這裏會用到清除畫布的函數：

 function clearCanvas(x,y){
            ctx.clearRect(x,y,cwidth,cheight)
        }

View Code

 

步驟七：查看效果，把初始化的函數修改一下

function init(){
            ctx = document.getElementById('mycanvas').getContext('2d')
            ctx.translate(200,300) // 重置畫圖的原點  接下來畫圖都已 （200,300）位原點

            for(var i = 0;i < 10;i++){
                var umbrella = new Umbrella(i * 70, 0, "rgb(" + (30 * i) + "," + (255 - 30 * i) + ",255)")
                umbrellaArr.push(umbrella)
            }

            updown = setInterval(updownFunc, 100);
            setTimeout(function () { // 10s 以後  改變傘的動畫
                clearInterval(updown);
                ctx.translate(300,0);//改變中心點
                setInterval(rotateUmbrella, 100);
            }, 10000);
        }

View Code

好了 ，到這裏，全部的效果都已經實現了，怎麼樣簡單吧

運行效果：http://hjjia.github.io/js_exercises/demo-canvas/umbrella.html