canvas绘制旋转风车的代码是啥

发布时间：2023-08-12 12:25:35 所属栏目：语言来源：

导读：这篇文章我们来了解“canvas绘制旋转风车的代码是什么”的内容，小编通过实际的案例向大家展示了操作过程，简单易懂，有需要的朋友可以参考了解看看，那么接下来就跟随小编的思路来往下学习吧，希望对大家

这篇文章我们来了解“canvas绘制旋转风车的代码是什么”的内容，小编通过实际的案例向大家展示了操作过程，简单易懂，有需要的朋友可以参考了解看看，那么接下来就跟随小编的思路来往下学习吧，希望对大家学习或工作能有帮助。

使用canvas绘制动画-旋转风车加速减速启动停止。结果截图详见如下：

源码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<style>

div{

text-align:center;

}

</style>

</head>

<body>

<div>

</div>

</body>

var internal = 0;//初始化间隔

var internal_Max = 60; //最大间隔

var rotation_angle = 360.0/internal_Max;//旋转角度

var internal_time = 1000;//事件间隔(毫秒)

drawWindmill();

var timer = null;

//开始风车

function startWindmill(){

//转动风车

function rotateWindmill(){

internal++;

if(internal>internal_Max){

internal=0;

};

drawWindmill();

timer=setTimeout(rotateWindmill, internal_time);

};

rotateWindmill();

};

//停止风车

function stopWindmill(){

clearInterval(timer);

};

//加速风车

function upSpeed(){

internal_time*=0.8;

};

//减速风车

function downSpeed(){

internal_time*=1.5;

};

//绘制风车

function drawWindmill(){

var now = new Date();

var canvas = document.getElementById('windmill');

var ctx = canvas.getContext('2d');

ctx.save();

ctx.clearRect(0,0,300,300);

//绘制椭圆底座

ctx.beginPath();

ctx.fillStyle = "black";

var circle_x = canvas.width/2.0;

var circle_y = canvas.height*3/4.0;

var radiusX = canvas.height/4.0;

var radiusY = radiusX/3.0;

var rotation = 0;

var startAngle = 0;

var endAngle = Math.PI*2;

var anticlockwise = false;

ctx.ellipse(circle_x, circle_y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise);

ctx.fill();

//绘制旗杆

ctx.beginPath();

ctx.lineWidth = 6;

ctx.lineCap = "round";

var line_start_x = circle_x;

var line_start_y = circle_y;

var line_end_x = line_start_x;

var line_end_y = canvas.height/4.0;

ctx.moveTo(line_start_x,line_start_y);

ctx.lineTo(line_end_x,line_end_y);

ctx.stroke();

//绘制扇叶

ctx.strokeStyle = "green";

var sy_length = canvas.height/8.0;

ctx.save();

ctx.translate(line_end_x,line_end_y);

ctx.rotate(internal*rotation_angle);

for(var i = 1;i<=3;i++){

ctx.rotate(Math.PI*2/3);

ctx.beginPath();

ctx.moveTo(0,0);

ctx.lineTo(50,0);

ctx.stroke();

};

ctx.restore();

};

</script>

</html>

上述内容具有一定的借鉴价值，感兴趣的朋友可以参考，希望能对大家有帮助，想要了解更多"canvas绘制旋转风车的代码是什么"的内容，大家可以关注其它相关文章。

（编辑：银川站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!