JS Canvas定時器模擬動態(tài)加載動畫
更新時間：2016年09月17日 14:07:52 作者：li_han
這篇文章主要為大家詳細(xì)介紹了JS Canvas定時器模擬動態(tài)加載動畫,具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了Canvas定時器動態(tài)加載動畫，供大家參考，具體內(nèi)容如下
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
</style>
</head>
<body>
<canvas id="canvas" width="500" height="500">你的瀏覽器不支持canvas技術(shù)</canvas>
<script>
var c=document.getElementById('canvas');
var ctx= c.getContext('2d');
ctx.translate(c.width/2, c.height/2);
//首先繪制8個靜態(tài)環(huán)繞的圓形
function create() {
for (var i = 1; i < 9; i++) {
if (i==1) {
ctx.beginPath();
ctx.arc(0, -30, 5, 0, 2 * Math.PI);
ctx.fillStyle='#f0f';
ctx.fill();
}else{
ctx.beginPath();
ctx.arc(0, -30, 5, 0, 2 * Math.PI);
ctx.strokeStyle ='#000';
ctx.stroke();
}
ctx.rotate(Math.PI * 45 / 180);
}
}
//定時轉(zhuǎn)動
setInterval(function(){
ctx.clearRect(-c.width/2,-c.height, c.width, c.height);
create();
ctx.rotate(Math.PI*45/180);
},300);
//定時關(guān)閉加載
setTimeout(function(){
c.style.display='none';
},12200);
//
</script>
</body>
</html>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
這篇文章主要介紹了jquery提示效果,以一個簡單實例較為詳細(xì)的分析了jQuery提示效果的實現(xiàn)方法與相關(guān)注意事項,具有一定的參考借鑒價值,需要的朋友可以參考下2014-11-11
鋒利的jQuery 第三章章節(jié)總結(jié)的例子
改寫《鋒利的jQuery》第三章章節(jié)總結(jié)的例子2010-03-03
這篇文章主要介紹了jQuery獲取頁面元素絕對與相對位置的方法,涉及jQuery中offset、position等方法的使用技巧,需要的朋友可以參考下2015-06-06
點贊，網(wǎng)絡(luò)用語，表示“贊同”、“喜愛”。今天小編通過實例代碼給大家分享jQuery實現(xiàn)點擊關(guān)注和取消功能，需要的朋友參考下吧2017-07-07
jQuery 使用手冊，大家可以耐心的看完，就基本上入門了。2009-09-09
jQuery實現(xiàn)網(wǎng)頁頂部固定導(dǎo)航效果代碼
這篇文章主要介紹了jQuery實現(xiàn)網(wǎng)頁頂部固定導(dǎo)航效果代碼,涉及jQuery響應(yīng)scroll事件動態(tài)操作頁面元素樣式的相關(guān)技巧,需要的朋友可以參考下2015-12-12
jquery實現(xiàn)鼠標(biāo)滑過顯示二級下拉菜單效果
這篇文章主要介紹了jquery實現(xiàn)鼠標(biāo)滑過顯示二級下拉菜單效果,通過jquery操作鼠標(biāo)事件及頁面樣式動態(tài)變換實現(xiàn)該功能,非常具有實用價值,需要的朋友可以參考下2015-08-08
jQuery替換節(jié)點用法示例(使用replaceWith方法)
這篇文章主要介紹了jQuery替換節(jié)點的方法,結(jié)合簡單實例形式分析了jQuery使用replaceWith方法替換P標(biāo)簽顯示內(nèi)容的相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2016-09-09
jquery插件star-rating.js實現(xiàn)星級評分特效
Bootstrap Star Rating是一個簡單而強大的jQuery插件實現(xiàn)星級分?jǐn)?shù)評級。支持像分?jǐn)?shù)星填充和RTL輸入先進的功能。在利用純CSS-3造型使控制重點開發(fā)。該插件使用引導(dǎo)標(biāo)記和造型默認(rèn)情況下，但它可以覆蓋與其他任何CSS的標(biāo)記。2015-04-04![jQuery 練習(xí)[一] 學(xué)習(xí)jquery的準(zhǔn)備工作](http://img.jbzj.com/images/xgimg/bcimg9.png)
jQuery 練習(xí)[一] 學(xué)習(xí)jquery的準(zhǔn)備工作
初次嘗試 jQuery, 近乎震撼! 簡潔、高效、優(yōu)雅、平易, 太有思想了.2010-05-05