canvas做旋转大风车

Html

Css

body {
	width:100%;
	height:100vh;
	display:flex;
	justify-content:center;
	align-items:center;
}
#myCanvas {
	}

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
// ctx.rotate(-Math.PI/6);
// 以(x, y)为圆心，以r为半径，从 startAngle弧度开始到endAngle弧度结束。anticlosewise是布尔值，true表示逆时针，false表示顺时针。(默认是顺时针)
// windmill(0);
function windmill(angle) {
    ctx.clearRect(0, 0, 200, 200);
    //初始化x坐标，y坐标
    var x;
    var y;

ctx.beginPath();
    x = 50 * Math.sin(angle + 0.5 * Math.PI);
    y = 50 * Math.cos(angle + 0.5 * Math.PI);
    ctx.arc(100 + x, 100 - y, 50, 0 + angle, Math.PI + angle, true);
    ctx.closePath();
    ctx.stroke();
    ctx.fillStyle = '#007ec3'; //设置颜色
    ctx.strokeStyle = '#007ec3';
    ctx.fill(); //填充闭合区域。如果path没有闭合，则fill()会自动闭合路径。

ctx.beginPath();
    x = 50 * Math.sin(angle + 1.5 * Math.PI);
    y = 50 * Math.cos(angle + 1.5 * Math.PI);
    ctx.arc(100 + x, 100 - y, 50, 0 + angle, Math.PI + angle, false);
    ctx.closePath();
    ctx.stroke();
    ctx.fillStyle = '#c5271e'; //设置颜色
    ctx.strokeStyle = '#c5271e';
    ctx.fill(); //填充闭合区域。如果path没有闭合，则fill()会自动闭合路径。

ctx.beginPath();
    x = 50 * Math.sin(angle + Math.PI);
    y = 50 * Math.cos(angle + Math.PI);
    ctx.arc(100 + x, 100 - y, 50, -Math.PI / 2 + angle, Math.PI / 2 + angle, false);
    ctx.closePath();
    ctx.stroke();
    ctx.fillStyle = '#f8c500'; //设置颜色
    ctx.strokeStyle = '#f8c500'; //设置颜色
    ctx.fill(); //填充闭合区域。如果path没有闭合，则fill()会自动闭合路径。

ctx.beginPath();
    x = 50 * Math.sin(angle);
    y = 50 * Math.cos(angle);
    ctx.arc(100 + x, 100 - y, 50, Math.PI / 2 + angle, -Math.PI / 2 + angle, false);
    ctx.closePath();
    ctx.stroke();
    ctx.fillStyle = '#69af2a'; //设置颜色
    ctx.strokeStyle = '#69af2a'; //设置颜色
    ctx.fill(); //填充闭合区域。如果path没有闭合，则fill()会自动闭合路径。
}
var i = 0;
var timer = setInterval(function() {
    i += 0.1;
    windmill(i);
}, 100);

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

立即下载

canvas做旋转大风车



代码描述：canvas做旋转大风车,代码注释全

canvas画布的简单使用

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

一粒一粒

相关代码

canvas做旋转大风车

最新