用canvas画会旋转的伞

Posted 2020-07-01 『卟倒翁』...佳

这个例子是我在网上看到，然后仿写的。

主要用到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