html5畫布旋轉(zhuǎn)效果示例
發(fā)布時間：2014-01-27 11:15:37 作者：佚名 
我要評論
我要評論本文介紹了JS和html5實(shí)現(xiàn)畫布旋轉(zhuǎn)效果示例，大家參考使用吧
keleyi.htm的代碼如下：
復(fù)制代碼
代碼如下:<!DOCTYPE HTML>
<html>
<head>
<title>html旋轉(zhuǎn)畫布</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的代碼如下：
復(fù)制代碼
代碼如下:/*
* 功能：畫布旋轉(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{
//清除畫布
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);
});
})();
相關(guān)文章
- 這篇文章主要介紹了HTML5 畫布canvas使用方法，canvas 是一個矩形區(qū)域，可以控制其每一像素，介紹了canvas的多種功能，感興趣的小伙伴們可以參考一下2016-03-18
- 這篇文章主要介紹了使用分層畫布來優(yōu)化HTML5渲染的教程,來自于IBM官方網(wǎng)站開發(fā)者技術(shù)文檔,需要的朋友可以參考下2015-05-08
- html5的canvas很強(qiáng)大利用其畫布可輕松繪制貝塞爾曲線，為大家以后使用方便，特于此分享實(shí)現(xiàn)代碼，有此需求的朋友可以參考下2013-08-14
html5的畫布canvas——畫出簡單的矩形、三角形實(shí)例代碼
有兩種形式，一種是描邊（fill），一種是填充（stroke），具體的實(shí)現(xiàn)代碼如下，感興趣的朋友可以參考下哈，希望對大家有所幫助2013-06-09html5的畫布canvas——畫出弧線、旋轉(zhuǎn)的圖形實(shí)例代碼+效果圖
在做旋轉(zhuǎn)操作之前一定要理解一句話：旋轉(zhuǎn)的是畫布的坐標(biāo)系而不是圖形本身，首先認(rèn)識一下畫圓的坐標(biāo)：中心、起始角、結(jié)束角；接下來的就很簡單了2013-06-09HTML5邊玩邊學(xué)（1）畫布實(shí)現(xiàn)方法
Html5 引入了一個新的2010-09-21
Html5畫布_動力節(jié)點(diǎn)Java學(xué)院整理
這篇文章主要介紹了Html5畫布,canvas 元素用于在網(wǎng)頁上繪制圖形。有興趣的小伙伴可以一起來了解一下2017-07-13
