欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

javascript+HTML5的Canvas實(shí)現(xiàn)Lab單車動(dòng)畫效果

 更新時(shí)間：2015年08月07日 12:09:07   作者：皮蛋  
這篇文章主要介紹了javascript+HTML5的Canvas實(shí)現(xiàn)Lab單車動(dòng)畫效果,涉及javascript使用Canvas配合數(shù)學(xué)運(yùn)算實(shí)現(xiàn)自行車動(dòng)畫效果,需要的朋友可以參考下

本文實(shí)例講述了javascript+HTML5的Canvas實(shí)現(xiàn)Lab單車動(dòng)畫效果。分享給大家供大家參考。具體如下：

這里運(yùn)用HTML5實(shí)現(xiàn)的單車動(dòng)畫，運(yùn)行一下效果你就明白了，不過不要在IE8下測(cè)試，沒效果的。請(qǐng)?jiān)谥С肿钚翲TML3和CSS3的瀏覽器下測(cè)試，祝您好運(yùn)。

運(yùn)行效果截圖如下：

具體代碼如下：

<html>
<head>
<title>Canvas Lab單車動(dòng)畫，HTML5動(dòng)畫</title>
</head>
 <script type="text/javascript">
  var framecounter = 800;//為了完成作業(yè)，無恥了點(diǎn)，在這里設(shè)置變量……
  var direction = "left";
  function drawBikeBody () {
   var canvas = document.getElementById('diagonal');
   var context = canvas.getContext('2d');
   context.lineWidth = 3;
   context.beginPath();
   context.moveTo(0,0);
   context.lineTo(150,0);
   context.lineTo(100,100);
   context.closePath();
   context.moveTo(100,100);
   context.lineTo(200,75);//后輪軸承點(diǎn)
   context.lineTo(150,0);
   //下面那個(gè)一個(gè)腳踏
   context.moveTo(100,100);
   context.lineTo(110,120);
   context.lineTo(120,120);
   context.moveTo(110,120);
   context.lineTo(100,120);
   //另一個(gè)腳踏
   context.moveTo(100,100);
   context.lineTo(90,80);
   context.lineTo(100,80);
   context.moveTo(90,80);
   context.lineTo(80,80);
   //座包
   context.moveTo(150,0);
   context.lineTo(160,-20);
   context.lineTo(175,-20);
   context.moveTo(160,-20);
   context.lineTo(135,-20);
   //扶手
   context.moveTo(0,0);
   context.lineTo(15,-30);
   context.lineTo(10,-35);
   context.lineTo(20,-40);
   context.lineTo(40,-40);
   //前輪軸承
   context.moveTo(0,0);
   context.lineTo(-35.5,75);//前輪軸承點(diǎn)
   //前輪
   context.moveTo(75-35.5,75);//去掉這個(gè)目測(cè)不行啊，貌似context.arc()方法里有l(wèi)ineTo
   context.arc(-35.5,75,75,0,Math.PI*2,true);
   //后輪
   context.moveTo(200+75,75);
   context.arc(200,75,75,0,Math.PI*2,true);
  }
  function drawForcePiece1(){
   var canvas = document.getElementById('diagonal');
   var context = canvas.getContext('2d');
   context.beginPath();
   for(var i = framecounter; i < framecounter+360; i += 20) { 
    context.moveTo(-35.5,75);
    x = Math.cos(Math.PI / 180 * i) * 75 + (-35.5); 
    y = Math.sin(Math.PI / 180 * i) * 75 + 75; 
    context.lineTo(x,y);
    }
  }
  function drawForcePiece2(){
   var canvas = document.getElementById('diagonal');
   var context = canvas.getContext('2d');
   context.beginPath();
   for(var i = framecounter; i < framecounter+360; i += 20) { 
    context.moveTo(200,75);
    x = Math.cos(Math.PI / 180 * i) * 75 + 200; 
    y = Math.sin(Math.PI / 180 * i) * 75 + 75; 
    context.lineTo(x,y);
    }
  }
  function drawBike(){
   var canvas = document.getElementById('diagonal');
   var context = canvas.getContext('2d');
   context.clearRect(0, 0, 800, 600);
   context.save();
   context.translate(framecounter,300);
   drawBikeBody();
   context.stroke();
   context.restore();
   context.save();
   context.translate(framecounter,300);
   drawForcePiece1();
   context.stroke();
   context.restore();
   context.save();
   context.translate(framecounter,300);
   drawForcePiece2();
   context.stroke();
   context.restore();
   if (direction==="left") {
    framecounter--;
   }else{
    framecounter++;
   }
  }
  function move() {
   var interal = setInterval(function () {
  drawBike();
  }, 10);
  }  
  window.addEventListener("load",move,true);
 </script>
 <body>
  <canvas id="diagonal" width="800" height="600" style="border:1px dashed">Please update your brower to the newest version!</canvas>
  <br>
  <button id="reset" onclick="framecounter=800;">Reset</button>
  <button id="left" onclick="direction='left'">Go Left</button>
  <button id="right" onclick="direction='ture'">Go Right</button>
 </body>
</html>

希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。

相關(guān)文章

  • webpack使用 babel-loader 轉(zhuǎn)換 ES6代碼示例

    webpack使用 babel-loader 轉(zhuǎn)換 ES6代碼示例

    本篇文章主要介紹了webpack使用 babel-loader 轉(zhuǎn)換 ES6代碼 ，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。
    2017-08-08
  • 微信小程序?qū)崿F(xiàn)滾動(dòng)條功能

    微信小程序?qū)崿F(xiàn)滾動(dòng)條功能

    這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)滾動(dòng)條功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2022-06-06
  • js控制li的隱藏和顯示實(shí)例代碼

    js控制li的隱藏和顯示實(shí)例代碼

    下面小編就為大家?guī)硪黄猨s控制li的隱藏和顯示實(shí)例代碼。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2016-10-10
  • 微信小程序通過保存圖片分享到朋友圈功能

    微信小程序通過保存圖片分享到朋友圈功能

    小程序內(nèi)是不能直接分享到朋友圈的。所以只能通過生成圖片，攜帶小程序二維碼，保存到手機(jī)相冊(cè)，讓用戶自己選擇發(fā)到朋友圈。然后可以通過在小程序中識(shí)別二維碼來進(jìn)入小程序的指定頁面。下面小編給大家分享實(shí)現(xiàn)代碼，需要的朋友參考下吧
    2018-05-05
  • JS圖片無縫滾動(dòng)(簡(jiǎn)單利于使用)

    JS圖片無縫滾動(dòng)(簡(jiǎn)單利于使用)

    現(xiàn)在又想做一個(gè)無縫滾動(dòng)了，所以在網(wǎng)上找啊找，好多都是相同的，而且調(diào)試復(fù)雜，好多都不能動(dòng)，也懶得去細(xì)看，終于讓我發(fā)現(xiàn)了這個(gè)，希望能幫到別人：
    2013-06-06
  • uni-app實(shí)現(xiàn)數(shù)據(jù)上拉加載更多功能實(shí)例

    uni-app實(shí)現(xiàn)數(shù)據(jù)上拉加載更多功能實(shí)例

    數(shù)據(jù)列表在很多時(shí)候,經(jīng)常會(huì)用到,下面這篇文章主要給大家介紹了關(guān)于uni-app實(shí)現(xiàn)數(shù)據(jù)上拉加載更多功能的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2022-08-08
  • 微信小程序添加插屏廣告并設(shè)置顯示頻率(一天一次)

    微信小程序添加插屏廣告并設(shè)置顯示頻率(一天一次)

    微信小程序今年新上線了插屏廣告，設(shè)置和在代碼庫(kù)中接入都非常方便。今天通過本文給大家分享微信小程序添加插屏廣告并設(shè)置顯示頻率(一天一次),需要的朋友可以參考下
    2019-12-12
  • 基于JavaScript實(shí)現(xiàn)圖片連播和聯(lián)級(jí)菜單實(shí)例代碼

    基于JavaScript實(shí)現(xiàn)圖片連播和聯(lián)級(jí)菜單實(shí)例代碼

    這篇文章主要介紹了基于JavaScript實(shí)現(xiàn)圖片連播和聯(lián)級(jí)菜單實(shí)例代碼,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
    2017-07-07
  • JavaScript浮點(diǎn)數(shù)及運(yùn)算精度調(diào)整詳解

    JavaScript浮點(diǎn)數(shù)及運(yùn)算精度調(diào)整詳解

    浮點(diǎn)數(shù)的精度問題不是JavaScript特有的，本文主要介紹了JavaScript浮點(diǎn)數(shù)及運(yùn)算精度調(diào)整詳解，有需要的朋友可以了解一下。
    2016-10-10
  • webpack打包多頁面的方法

    webpack打包多頁面的方法

    這篇文章主要介紹了webpack打包多頁面的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-11-11

最新評(píng)論