今天在练习的时候照着视频敲了段代码结果运行结果不是这么回事，于是苦苦寻找半天没能解决，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
<canvas id="canvas" width="640" height="480" ></canvas>
</body>
<script>
var Context={
canvas : null,
context : null,
create:function(canvas_tag_id){
this.canvas=document.getElementById(canvas_tag_id);
this.context=this.canvas.getContext("2d");
return this.context;
}
};
var Sprite=function(filename,is_pattern){
this.p_w_picpath=null;
this.pattern = null;
this.TO_RADIANS=Math.PI/180;
if(filename!=undefined && filename!=""&&filename!=null){
this.p_w_picpath=new Image();
this.p_w_picpath.src=filename;
if(is_pattern)//createPattern
//console.log("this is a pattern");
this.pattern=Context.context.createPattern(this.p_w_picpath,"repeat");
//return this.pattern;
//此处赋值bug,火狐中正常，谷歌中错误
}else{
console.log("unable to load sprite");
}
this.draw=function(x,y,w,h){
//
if(this.pattern !=null){//
console.log("pattern is not null");
Context.context.fillStyle=this.pattern;
Context.context.fillRect(x,y,w,h);
}else{
//
if(w != undefined|| h != undefined ){
Context.context.drawImage(this.p_w_picpath,x,y,this.p_w_picpath.width,this.p_w_picpath.height);
}else{
Context.context.drawImage(this.p_w_picpath,x,y,w,h);
}
}
};
this.rotate=function(x,y,angle){
Context.context.save();
Context.context.translate(x,y);
Context.context.rotate(angle * this.TO_RADIANS);
Context.context.drawImage(this.p_w_picpath,
-(this.p_w_picpath.width/2),
-(this.p_w_picpath.height/2));
Context.context.restore();
};
}
//var img=new Sprite("wall.png",false);
$(document).ready(function(){
//Initalize
Context.create("canvas");
var WALL="http://www.tigrisgames.com/wall.png";
var CRATE="http://www.tigrisgames.com/crate.png";
var pattern=new Sprite(CRATE,true);
var p_w_picpath=new Sprite(WALL,false);
var p_w_picpath3=new Sprite(CRATE,false);
var angle=0;
setInterval(function(){
Context.context.fillStyle="#000000";
Context.context.fillRect(0,0,800,800);
pattern.draw(160,160,256,180);
p_w_picpath.draw(0,0,64,64);
p_w_picpath.draw(0,74.256,32);
p_w_picpath.rotate(115,160,angle+=4.0);
p_w_picpath3.rotate(115,260,-angle/2);
},50)
/* Context.context.beginPath();
Context.context.rect(0,0,640,480);
Context.context.fillStyle="black";
Context.context.fill();*/
});
</script>
</html>
应该是上图的结果，而在谷歌浏览器中却没有平铺形成了如下的结果。
不知道为什么会是这样的结果。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
