canvas方块自转

来源：互联网发布：织梦if标签编辑：程序博客网时间：2024/04/29 19:24

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas方块自转</title>
<script>
/* requestAnimationFrame.js
* by zhangxinxu 2013-09-30
*/
(function() {
var lastTime = 0;
var vendors = ['webkit', 'moz','ms','o'];
for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || // name has changed in Webkit
window[vendors[x] + 'CancelRequestAnimationFrame'];
}
if (!window.requestAnimationFrame) {
window.requestAnimationFrame = function(callback, element) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16.7 - (currTime - lastTime));
var id = window.setTimeout(function() {
callback(currTime + timeToCall);
}, timeToCall);
lastTime = currTime + timeToCall;
return id;
};
}
if (!window.cancelAnimationFrame) {
window.cancelAnimationFrame = function(id) {
clearTimeout(id);
};
}
}());
</script>
<style>
*{
margin:0;
padding:0;
}
html,body{
width:100%;
height:100%;
}
#canvas{

margin:0 auto;
position: relative;
}
</style>
</head>
<body>
<div id="canvas" style="width:300px;height:300px;" ></div> 
</body>
</html>
<script>
var jquery = (function(){ //模拟jquery 封包函数
var $ = function(id){ //模拟 $ 函数
return document.getElementById(id) || id;
}
return $;
}());

var Cans = (function($){ //创建封包函数 Cans 并将jquery里的 $ 方法作为参数传入
var extend = function(target,source){ //判断option与传入的 key 是否存在
for(var key in source){
if(key in target){
target[key] = source[key];
}
}
return target;
};
var T,i = 0;

var init = function(opt){
this.option = {
elementId : null, //操作的元素对象id
text : "canvas",
speed : 5, //1-60；
width : 50, //方块的宽度
height : 50, //方块的高度
x : 50, //方块左上角的坐标x
y : 100, //方块左上角的坐标y
}

extend(this.option,opt);

//修正this.option.speed匹配只能是小于等于60的数字
var speed = this.option.speed.toString();
speed = speed > 60 || !(speed.match(/^\d+$/g)) ? 60 : speed;

this.initialize(); //调用初始化函数
}
init.prototype = { //设置属性
initialize : function(){ //初始化函数
this.canvas = this.initCanvas(); //生成canvas元素
this.ctx = this.canvas.getContext("2d"); //canvas初始化
this.loop();

},

reversal : function(){
var width = this.canvas.width;
var height = this.canvas.height;
var rectwidth = this.option.width;
var rectheight = this.option.height;
var x = this.option.x;
var y = this.option.y;

var leng = Math.sqrt(Math.pow(rectwidth,2)+Math.pow(rectheight,2))+1;
this.ctx.clearRect(x-((leng-rectwidth)/2),y-((leng-rectheight)/2),leng,leng); //清除旧的rect

this.ctx.save(); //用来保存Canvas的状态。save之后，可以调用Canvas的平移、放缩、旋转、错切、裁剪等操作。
this.ctx.fillStyle = 'rgba(120,93,222,0.25)';//填充颜色

this.ctx.translate(x+rectwidth/2,y+rectheight/2);//平移
//中心点要定在方块中心
//平移坐标x ,y 另外还要加上方块的宽/2 高/2
this.ctx.rotate(i*Math.PI/180);
this.ctx.translate(-rectwidth/2,-rectheight/2);//平移
//再次往方块的负宽/2 负高/2 ，在移动一次
this.ctx.fillRect(0,0,rectwidth,rectheight); //填充方块
this.ctx.restore(); //用来恢复Canvas之前保存的状态。防止save后对Canvas执行的操作对后续的绘制有影响。
// this.ctx.clearRect(0,0,width,height);

},
loop : function(){
var _this = this;
i+=this.option.speed;
if(360 - i < this.option.speed){i = 360;} //修正角度，使得最后一定是360度
if(i > 360){return;}
window.requestAnimationFrame(function(){_this.loop()}); //重复动画
this.reversal();
},
initCanvas : function(){
var canvas = document.createElement("CANVAS");
canvas.innerHTML = "你的浏览器居然不支持Canvas？！赶快换一个吧！！";
$(this.option.elementId).appendChild(canvas);

canvas.setAttribute("width",$(this.option.elementId).style.width);
canvas.setAttribute("height",$(this.option.elementId).style.height);
return canvas;
}
}
return init; //返回初始对象
}(jquery || {}))

window.onload = function(){
var option = {
elementId : "canvas",
text : "canvas",
speed : 50, //1-60
width : 50, //方块的宽度
height : 50, //方块的高度
x : 150, //方块左上角的坐标x
y : 100, //方块左上角的坐标y
}
new Cans(option);
}

</script>

阅读全文

0 0