Question

我正在尝试创建一个在Canvas上绘制图像的网站，使用模式图像来tshirt多种颜色，并且在mozila中工作正常但不能在chrome中工作

<!doctype html>
<html>
<head>

<script src="http://code.jquery.com/jquery.min.js"></script>

<style>
</style>

<script>
$(function(){


    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");


    var img1=new Image();
    var img=new Image();
    img.onload=function(){

        img1.onload=function(){
            start();
        }
        img1.src="http://apsoftech.org/tshirt_customdesign/images/front_color.png";
    }


     img.src="http://apsoftech.org/tshirt_customdesign/images/color/AntiqueWhite.png";

     $('.color1').click(
     function(){
          img.src="http://apsoftech.org/tshirt_customdesign/images/color/AliceBlue.png";
     }
);

    $('.color2').click(
     function(){

         img.src="http://apsoftech.org/tshirt_customdesign/images/color/AntiqueWhite.png";
     }
);

$('.color3').click(
     function(){

         img.src="http://apsoftech.org/tshirt_customdesign/images/color/aqua.png";
     }
);
$('.color4').click(
     function(){

         img.src="http://apsoftech.org/tshirt_customdesign/images/color/Aquamarine.png";
     }
);

$('.color5').click(
     function(){

         img.src="http://apsoftech.org/tshirt_customdesign/images/color/Azure.png";
     }
);
    function start(){

        ctx.drawImage(img1,0,0);

        ctx.globalCompositeOperation="source-atop";

        ctx.globalAlpha=.85;

        var pattern = ctx.createPattern(img, 'repeat');
        ctx.rect(0, 0, canvas.width, canvas.height);
        ctx.fillStyle = pattern;
        ctx.fill();

        ctx.globalAlpha=.100;
        ctx.drawImage(img1,0,0);
        ctx.drawImage(img1,0,0);

    }


}); // end $(function(){});
</script>
<style>
.color_style
{
    width:20px;
    height:20px;    
}
</style>

</head>

<body>
<div style="float:left">
    <canvas id="canvas" width=436 height=450></canvas>
    </div>
    <div>
    <a href="#" ><img src="images/color/AliceBlue.png" class="color1 color_style"></a>
    <a href="#"><img src="images/color/AntiqueWhite.png" class="color2 color_style"></a>
    <a href="#"><img src="images/color/aqua.png" class="color3 color_style"></a>
    <a href="#"><img src="images/color/Aquamarine.png" class="color4 color_style"></a>
    <a href="#"><img src="images/color/Azure.png" class="color5 color_style"></a>

    </div>
</body>
</html>

上面的代码在mozila中工作，但不在chrome中工作。如何解决这个问题是chrome问题？

Html5 Canvas填充图案使用图像无法在chrome中工作

0 个答案: