.png)
相關(guān)關(guān)鍵詞
關(guān)于我們
最新文章
- ThinkPHP 5.1、6.0、6.1 與 8.0 版本對比分析
- 涉嫌侵權(quán)的人只復(fù)制了版權(quán)軟件，沒有傳播給其他人，是否符合復(fù)制侵權(quán)的判定？
- 網(wǎng)站域名備案到企業(yè)名下后，即表明是商業(yè)使用了嗎？
- 軟件中使用了GPL & MIT 協(xié)議的文件 和 使用了 GPL | MIT 的有什么區(qū)別？
- 網(wǎng)站版權(quán)糾紛中的來源非法是否有嚴(yán)格的司法定義？
- [確定有效] ECSHOP后臺登錄不了的問題解決 https打不開
- 免費搜索代碼：如何利用百度做一個企業(yè)網(wǎng)站內(nèi)搜索？
- MySQL 中 HAVING 與 REPLACE 的用法解析
- 深入理解 MySQL 的連接操作：-h、-P、-u、-p 詳解
- 在 MySQL Workbench 中自定義導(dǎo)出文件格式的解決方案
html5畫布旋轉(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è)置原點
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);
});
})();