JS使用canvas繪制旋轉(zhuǎn)風(fēng)車動畫
使用canvas繪制動畫-旋轉(zhuǎn)風(fēng)車加速減速啟動停止。
結(jié)果截圖詳見如下:
源碼如下:
<!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="開始" ο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; ?? ?//開始風(fēng)車 ?? ?function startWindmill(){ ?? ??? ?//轉(zhuǎn)動風(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>
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
微信{"errcode":48001,"errmsg":"api unauthorized, hints: [ req_
這篇文章主要介紹了微信{"errcode":48001,"errmsg":"api unauthorized, hints: [ req_id: 1QoCla0699ns81 ]"},非常具有實用價值,需要的朋友可以參考下2018-10-10詳解ES6中的 Set Map 數(shù)據(jù)結(jié)構(gòu)學(xué)習(xí)總結(jié)
這篇文章主要介紹了詳解ES6中的 Set Map 數(shù)據(jù)結(jié)構(gòu)學(xué)習(xí)總結(jié),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-11-11使用Webpack構(gòu)建多頁面程序的實現(xiàn)步驟
這篇文章主要介紹了使用Webpack構(gòu)建多頁面程序的實現(xiàn)步驟,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03一個JavaScript函數(shù)把URL參數(shù)解析成Json對象
一個JavaScript函數(shù)parseQueryString,它的用途是把URL參數(shù)解析為一個對象,很實用,大家可以看看2014-09-09JS使用cookie實現(xiàn)只出現(xiàn)一次的廣告代碼效果
我們上網(wǎng)經(jīng)常會遇到第一次需要登錄而之后不用再登錄的網(wǎng)站的情況,其實是運用了Cookie 存儲 web 頁面的用戶信息,Cookie 以名/值對形式存儲,當(dāng)瀏覽器從服務(wù)器上請求 web 頁面時, 屬于該頁面的 cookie 會被添加到該請求中2017-04-04