溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
今天在練習的時候照著視頻敲了段代碼結果運行結果不是這么回事，于是苦苦尋找半天沒能解決，
<!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進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
