当前位置:

html5 canvas 画图时的bug_HTML5_WEB

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

<!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" style="border:1px solid grey;width:640px;height:480px;"></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.image=null;
    this.pattern = null;
    this.TO_RADIANS=Math.PI/180;
    if(filename!=undefined && filename!=""&&filename!=null){
        this.image=new Image();
        this.image.src=filename;

        if(is_pattern)//createPattern
            //console.log("this is a pattern");
            this.pattern=Context.context.createPattern(this.image,"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.image,x,y,this.image.width,this.image.height);
            }else{
                Context.context.drawImage(this.image,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.image,
                -(this.image.width/2),
                -(this.image.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 image=new Sprite(WALL,false);
    var image2=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);
        image.draw(0,0,64,64);
        image.draw(0,74.256,32);


        image.rotate(115,160,angle+=4.0);
        image2.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>

wKioL1dIG-uQLMoBAAGZwL_KAW8453.png-wh_50

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

wKioL1dIHF6jSbq6AAB0eps_NXg348.png-wh_50

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


评论:

登录后发表评论




2023.01.28 群组聊天