html5 canvas 画图时的bug

发布时间：2020-08-09 17:45:42 作者：zhan66958
来源：网络阅读：1020

今天在练习的时候照着视频敲了段代码结果运行结果不是这么回事，于是苦苦寻找半天没能解决，

<!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>

应该是上图的结果，而在谷歌浏览器中却没有平铺形成了如下的结果。

html5 canvas 画图时的bug

不知道为什么会是这样的结果。

html5 canvas 画图时的bug

相关阅读