您好,登錄后才能下訂單哦!
今天就跟大家聊聊有關(guān)怎么在html5中實(shí)現(xiàn)一個(gè)畫(huà)布旋轉(zhuǎn)效果,可能很多人都不太了解,為了讓大家更加了解,小編給大家總結(jié)了以下內(nèi)容,希望大家根據(jù)這篇文章可以有所收獲。
keleyi.htm的代碼如下:
<!DOCTYPE HTML> <html><head><title>html旋轉(zhuǎn)畫(huà)布</title><script type="text/javascript" src="/jquery-1.10.2.min.js"></script><script type="text/javascript" src="jb51.js"></script></head><body><canvas id="jb51"></canvas></body></html> jb51.js的代碼如下: 代碼如下: /** 功能:畫(huà)布旋轉(zhuǎn)*/(function(){ var canvas=null, context=null, angle=0; function resetCanvas(){ canvas=document.getElementById("jb51"); canvas.width=window.innerWidth; canvas.height=window.innerHeight; context=canvas.getContext("2d"); } function animate(){ context.save(); try{ //清除畫(huà)布 context.clearRect(0, 0, canvas.width, canvas.height); //設(shè)置原點(diǎn) context.translate(canvas.width * 0.5, canvas.height * 0.5); //旋轉(zhuǎn)角度 context.rotate(angle); //設(shè)置填充顏色 context.fillStyle = "#FF0000"; //繪制矩形 context.fillRect(-30, -30, 60, 60); angle += 0.05 * Math.PI; } finally{ context.restore(); } } $(window).bind("resize",resetCanvas).bind("reorient",resetCanvas); $(document).ready(function(){ window.scrollTo(0,1); resetCanvas(); setInterval(animate,40); });})();
看完上述內(nèi)容,你們對(duì)怎么在html5中實(shí)現(xiàn)一個(gè)畫(huà)布旋轉(zhuǎn)效果有進(jìn)一步的了解嗎?如果還想了解更多知識(shí)或者相關(guān)內(nèi)容,請(qǐng)關(guān)注億速云行業(yè)資訊頻道,感謝大家的支持。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。