這篇“HTML5中Canvas旋轉(zhuǎn)動(dòng)畫的示例”除了程序員外大部分人都不太理解，今天小編為了讓大家更加理解“HTML5中Canvas旋轉(zhuǎn)動(dòng)畫的示例”，給大家總結(jié)了以下內(nèi)容，具有一定借鑒價(jià)值，內(nèi)容詳細(xì)步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望大家通過(guò)這篇文章有所收獲，下面讓我們一起來(lái)看看具體內(nèi)容吧。

創(chuàng)新互聯(lián)公司長(zhǎng)期為上1000+客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺(tái)，與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為沙灣企業(yè)提供專業(yè)的成都做網(wǎng)站、網(wǎng)站建設(shè)、外貿(mào)營(yíng)銷網(wǎng)站建設(shè)，沙灣網(wǎng)站改版等技術(shù)服務(wù)。擁有10多年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。

html有什么特點(diǎn)

1、簡(jiǎn)易性：超級(jí)文本標(biāo)記語(yǔ)言版本升級(jí)采用超集方式，從而更加靈活方便，適合初學(xué)前端開發(fā)者使用。 2、可擴(kuò)展性：超級(jí)文本標(biāo)記語(yǔ)言的廣泛應(yīng)用帶來(lái)了加強(qiáng)功能，增加標(biāo)識(shí)符等要求，超級(jí)文本標(biāo)記語(yǔ)言采取子類元素的方式，為系統(tǒng)擴(kuò)展帶來(lái)保證。  3、平臺(tái)無(wú)關(guān)性：超級(jí)文本標(biāo)記語(yǔ)言能夠在廣泛的平臺(tái)上使用，這也是萬(wàn)維網(wǎng)盛行的一個(gè)原因。 4、通用性：HTML是網(wǎng)絡(luò)的通用語(yǔ)言，它允許網(wǎng)頁(yè)制作人建立文本與圖片相結(jié)合的復(fù)雜頁(yè)面，這些頁(yè)面可以被網(wǎng)上任何其他人瀏覽到，無(wú)論使用的是什么類型的電腦或?yàn)g覽器。

效果圖：

方法一：

 

   

   

  your browser does not support the canvas tag 

   

  var deg = 0; 

  var r = 30; 

  var rl = 100; 

  function drawTaiji() { 

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

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

  var colorA = "rgb(0, 0, 0)"; 

  var colorB = "red"; 

  var px =Math.sin(deg)*r; 

  var py =Math.cos(deg)*r; 

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

  context.beginPath(); 

  context.fillStyle = colorA; 

  context.arc(rl, rl, 60, 0.5 * Math.PI +deg, 1.5 * Math.PI +deg, true); 

  context.closePath(); 

  context.fill(); 

  context.fillStyle = colorB; 

  context.beginPath(); 

  context.arc(rl, rl, 60, 1.5* Math.PI +deg, 0.5 * Math.PI +deg, true); 

  context.closePath(); 

  context.fill(); 

  context.fillStyle = colorB; 

  context.beginPath(); 

  context.arc(rl+px, rl-py, 30, 0.5 * Math.PI + deg, 1.5 * Math.PI + deg, true); 

  context.closePath(); 

  context.fill(); 

  context.fillStyle = colorA; 

  context.beginPath(); 

  context.arc(rl-px, rl+py, 30, 1.5 * Math.PI + deg, 0.5 * Math.PI + deg, true); 

  context.closePath(); 

  context.fill(); 

  context.fillStyle = colorA; 

  context.beginPath(); 

  context.arc(rl+px, rl-py, 8, 0, 2 * Math.PI, true); 

  context.closePath(); 

  context.fill(); 

  context.fillStyle = colorB; 

  context.beginPath(); 

  context.arc(rl-px, rl+py, 8, 0, 2 * Math.PI, true); 

  context.closePath(); 

  context.fill(); 

  deg +=0.1; 

  } 

  setInterval(drawTaiji, 100);

   

 

  

方法二：

 

   

   

  your browser does not support the canvas tag  

   

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

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

  var angle = 0; 

  var count = 360; 

  var clrA = '#000'; 

  var clrB = 'red'; 

  function taiji(x, y, radius, angle, wise) { 

  angleangle = angle || 0; 

  wisewise = wise ? 1 : -1; 

  ctx.save(); 

  ctx.translate(x, y); 

  ctx.rotate(angle); 

  ctx.fillStyle = clrA; 

  ctx.beginPath(); 

  ctx.arc(0, 0, radius, 0, Math.PI, true); 

  ctx.fill(); 

  ctx.beginPath(); 

  ctx.fillStyle = clrB; 

  ctx.arc(0, 0, radius, 0, Math.PI, false); 

  ctx.fill(); 

  ctx.fillStyle = clrB; 

  ctx.beginPath(); 

  ctx.arc(wise * -0.5 * radius, 0, radius / 2, 0, Math.PI * 2, true); 

  ctx.fill(); 

  ctx.beginPath(); 

  ctx.fillStyle = clrA; 

  ctx.arc(wise * +0.5 * radius, 0, radius / 2, 0, Math.PI * 2, false); 

  ctx.arc(wise * -0.5 * radius, 0, radius / 10, 0, Math.PI * 2, true); 

  ctx.fill(); 

  ctx.beginPath(); 

  ctx.fillStyle = clrB; 

  ctx.arc(wise * +0.5 * radius, 0, radius / 10, 0, Math.PI * 2, true); 

  ctx.fill(); 

  ctx.restore(); 

  } 

  loop = setInterval(function () { 

  beginTag = true; 

  ctx.clearRect(0, 0, canvas.width, canvas.height); 

  taiji(200, 200, 50, Math.PI * (angle / count) * 2, true); 

  //taiji(350, 350, 50, Math.PI * ((count - angle) / count) * 2, false); 

  angle = (angle + 5) % count; 

  }, 50); 

   

 

  

感謝你的閱讀，希望你對(duì)“HTML5中Canvas旋轉(zhuǎn)動(dòng)畫的示例”這一關(guān)鍵問(wèn)題有了一定的理解，具體使用情況還需要大家自己動(dòng)手實(shí)驗(yàn)使用過(guò)才能領(lǐng)會(huì)，快去試試吧，如果想閱讀更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！