今天在练习的时候照着视频敲了段代码结果运行结果不是这么回事，于是苦苦寻找半天没能解决，
<!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进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
