JS使用canvas繪制旋轉(zhuǎn)風(fēng)車動(dòng)畫
更新時(shí)間：2022年02月24日 09:05:59 作者：阿來(lái)小同學(xué)
這篇文章主要為大家詳細(xì)介紹了JS使用canvas繪制旋轉(zhuǎn)風(fēng)車動(dòng)畫，有加速減速啟動(dòng)停止功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
使用canvas繪制動(dòng)畫-旋轉(zhuǎn)風(fēng)車加速減速啟動(dòng)停止。
結(jié)果截圖詳見(jiàn)如下：
源碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>風(fēng)車</title>
<style>
?? ?div{
?? ??? ?text-align:center;
?? ?}
</style>
</head>
?
<body>
?? ?<div>
? ? <canvas id="windmill" height="300px" width="300px" style="border:1px solid #1D96E8"></canvas>
? ? <input type="button" value="start" title="開(kāi)始" οnclick="startWindmill()" />
? ? <input type="button" value="stop" ?title="停止" οnclick="stopWindmill()" />
? ? <input type="button" value="upSpeed" ?title="加速" οnclick="upSpeed()" />
? ? <input type="button" value="downSpeed" title="減速" οnclick="downSpeed()" />
? ? </div>
</body>
<script>
?? ?
?? ?var internal = 0;//初始化間隔
?? ?var internal_Max = 60; //最大間隔
?? ?var rotation_angle = 360.0/internal_Max;//旋轉(zhuǎn)角度
?? ?var internal_time = 1000;//事件間隔(毫秒)
?? ?drawWindmill();
?? ?var timer = null;
?? ?//開(kāi)始風(fēng)車
?? ?function startWindmill(){
?? ??? ?//轉(zhuǎn)動(dòng)風(fēng)車
?? ??? ?function rotateWindmill(){
?? ??? ??? ?internal++;
?? ??? ??? ?if(internal>internal_Max){
?? ??? ??? ??? ?internal=0;
?? ??? ??? ?};
?? ??? ??? ?drawWindmill();
?? ??? ??? ?timer=setTimeout(rotateWindmill, internal_time);
?? ??? ?};
?? ??? ?rotateWindmill();
?? ?};
?? ?//停止風(fēng)車
?? ?function stopWindmill(){
?? ??? ?clearInterval(timer);
?? ?};
?? ?//加速風(fēng)車
?? ?function upSpeed(){
?? ??? ?internal_time*=0.8;
?? ?};
?? ?//減速風(fēng)車
?? ?function downSpeed(){
?? ??? ?internal_time*=1.5;
?? ?};
?? ?
?? ?//繪制風(fēng)車
?? ?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();
?? ??? ?ctx.restore();
?? ?};
</script>
</html>以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了JS邏輯判斷選擇器 || &&，下面我們來(lái)一起學(xué)習(xí)吧2019-05-05
Bootstrap Multiselect 常用組件實(shí)現(xiàn)代碼
bootstrap-multiselect插件是一款基于bootstrap的下拉框美化插件，我們一般用來(lái)請(qǐng)求后臺(tái)返回具有l(wèi)abel和text對(duì)象的json數(shù)組即可渲染。接下來(lái)通過(guò)本文給大家分享Bootstrap Multiselect 常用組件實(shí)現(xiàn)代碼，感興趣的朋友一起看看吧2017-07-07
所謂的遞歸函數(shù)就是在函數(shù)體內(nèi)調(diào)用本函數(shù)。使用遞歸函數(shù)一定要注意，處理不當(dāng)就會(huì)進(jìn)入死循環(huán)。遞歸函數(shù)只有在特定的情況下使用 ，比如階乘問(wèn)題
2012-10-10 
JavaScript 進(jìn)度條實(shí)現(xiàn)代碼(Firefox等相似瀏覽器下不支持)
JavaScript實(shí)現(xiàn)的進(jìn)度條，可惜在Firefox等相似瀏覽器下不支持(遠(yuǎn)程）
2009-07-07 
微信小程序?qū)崿F(xiàn)圖片上傳放大預(yù)覽刪除代碼
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)圖片上傳放大預(yù)覽刪除代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-07-07 
省市區(qū)三級(jí)聯(lián)動(dòng)下拉框菜單javascript版
這篇文章主要給大家介紹了javascript實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)下拉框菜單，有需要的朋友可以參考下
2015-08-08 
js組件SlotMachine實(shí)現(xiàn)圖片切換效果制作抽獎(jiǎng)系統(tǒng)
這篇文章主要介紹了js組件SlotMachine實(shí)現(xiàn)圖片切換效果制作抽獎(jiǎng)系統(tǒng)的相關(guān)資料,需要的朋友可以參考下
2016-04-04 
這篇文章主要介紹了頁(yè)面按鈕禁用與解除禁用的方法,需要的朋友可以參考下
2014-02-02 
可視化埋點(diǎn)平臺(tái)元素曝光采集intersectionObserver思路實(shí)踐
這篇文章主要為大家介紹了可視化埋點(diǎn)平臺(tái)元素曝光采集的思路—intersectionObserver的實(shí)戰(zhàn)經(jīng)驗(yàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-01-01