canvas风车动画

Html

Css

  body {
	margin:0 auto;
	text-align:center;
}
#can {
	background:#ccc;
}

window.onload = function() {
    var can = document.getElementById('can');
    var cxt = can.getContext('2d');

var x = 200;
    var y = 200;
    var r = 100;

var angle = 0; //每次增加的角度
    //画半圆方法
    function draw_ban() {
        if (angle == 75600) { //取四个的最小公倍数，清空angle
            angle = 0;
        }

for (var i = 0; i < 4; i++) {
            //70.7为拐点的半径，45为拐点的领先度数 (i*90+45+angle)

var guai_x = x + 70.7 * Math.cos((i * 90 + 45 + angle) * Math.PI / 180);
            var guai_y = y + 70.7 * Math.sin((i * 90 + 45 + angle) * Math.PI / 180);
            var ban_x = x + 100 * Math.cos((i * 90 + angle) * Math.PI / 180);
            var ban_y = y + 100 * Math.sin((i * 90 + angle) * Math.PI / 180);

cxt.beginPath();
            cxt.fillStyle = 'blue';
            cxt.moveTo(x, y);
            cxt.quadraticCurveTo(guai_x, guai_y, ban_x, ban_y);
            cxt.closePath();
            cxt.fill();
        }
        angle++;

}
    //画三角形方法
    function draw_san() {
        if (angle == 75600) {
            angle = 0;
        }

//1.5为tan值，xxx为落后的角度
        var xxx = Math.atan(1.5) * 180 / Math.PI;
        for (var j = 0; j < 4; j++) {
            //180为三角形的斜边长
            var line_1x = x + 180 * Math.cos((j * 90 - xxx + angle) * Math.PI / 180);
            var line_1y = y + 180 * Math.sin((j * 90 - xxx + angle) * Math.PI / 180);
            var line_2x = x + 100 * Math.cos((j * 90 + angle) * Math.PI / 180);
            var line_2y = y + 100 * Math.sin((j * 90 + angle) * Math.PI / 180);

cxt.beginPath();
            cxt.fillStyle = 'red';
            cxt.moveTo(x, y);

cxt.lineTo(line_1x, line_1y);
            cxt.lineTo(line_2x, line_2y);
            cxt.closePath();
            cxt.fill();
        }
        angle++;
    }
    //画圆心方法
    function draw_xin() {
        cxt.beginPath();
        cxt.fillStyle = '#FFFFFF';
        cxt.arc(x, y, 10, 0, 2 * Math.PI, true);
        cxt.fill();
    }

//动起来
    setInterval(function() {
        cxt.clearRect(0, 0, 400, 400); //清屏             
        draw_san(); //画三角形方法--调用
        draw_ban(); //画半圆--调用
        draw_xin(); //画圆心---调用                            
    }, 10);

}

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

canvas风车动画



代码描述：使用canvas绘制的风车，代码注释全

更新时间：2019-09-25 08:56:13
主要思路就是将复杂的图片简单化，分割成不同的部分，然后组合。

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

xsyxsyxsy

相关代码

canvas风车动画

最新