Canvas小风车

Html

Css

* {
	margin:0px;
	padding:0px;
}
body {
	background-color:lightblue;
}
#mydiv > #myCanvas {
	background-color:white;
	border:solid 5px LightSalmon;
}

var WINDOW_WIDTH = 300;
var WINDOW_HEIGHT = 300;
window.onload = function() {
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    canvas.width = WINDOW_WIDTH;
    canvas.height = WINDOW_HEIGHT;
    var num = 0;
    setInterval(function() {
        num++
        rotate(context, num);
    }, 10);

}

function rotate(cxt, num) {
    cxt.clearRect(0, 0, WINDOW_WIDTH, WINDOW_HEIGHT);
    cxt.save();
    cxt.translate(150, 150);
    cxt.rotate(num * Math.PI / 180);
    draw(cxt);
    cxt.restore();
}

function draw(cxt) {

cxt.beginPath();
    cxt.fillStyle = "red";
    cxt.moveTo(0, 0);
    cxt.arcTo(100, -100, 0, -200, 100);
    cxt.fill();
    cxt.closePath();

cxt.beginPath();
    cxt.fillStyle = "yellow";
    cxt.moveTo(0, 0);
    cxt.arcTo(100, 100, 200, 0, 100);
    cxt.fill();
    cxt.closePath();

cxt.beginPath();
    cxt.fillStyle = "blue";
    cxt.moveTo(0, 0);
    cxt.arcTo(-100, 100, 0, 200, 100);
    cxt.fill();
    cxt.closePath();

cxt.beginPath();
    cxt.fillStyle = "green";
    cxt.moveTo(0, 0);
    cxt.arcTo(-100, -100, -200, 0, 100);
    cxt.fill();
    cxt.closePath();
}

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

立即下载

Canvas小风车



代码描述：Canvas小风车转动动画

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

让我感激你、曾予我欢颜

相关代码

Canvas小风车

最新