在 Chrome 18Dev+ 中。 Html5画布'createPattern'无法正确绘制图像答案

【问题标题】：In Chrome 18Dev+. Html5 canvas 'createPattern' can't draw the image right在 Chrome 18Dev+ 中。 Html5画布'createPattern'无法正确绘制图像
【发布时间】：2012-03-19 20:31:11
【问题描述】：

这个问题只发生在 Chrome 18Dev+。版本 17 不会。应该是图案的区域用黑色填充。

这是代码，你可以复制它并在chrome中运行它：

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>clock</title>
    <style type="text/css">
        canvas{
            display:block;
            width:400px;
            height:400px;
            border:2px solid #000;
            margin:100px auto;
        }
    </style>
</head>
<body>
    <canvas id='c'></canvas>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        var pic = new Image();
        $(function(){
            $(pic).load(function() {
                var canvas = document.getElementById('c');
                canvas.width = 400;
                canvas.height = 400;

                if (canvas.getContext) {
                    var ctx = canvas.getContext('2d');

                    ctx.fillStyle = ctx.createPattern(pic, 'repeat');


                    setInterval(function() {
                        ctx.clearRect(0, 0, canvas.width, canvas.height);
                        ctx.arc(canvas.width*0.5, canvas.height*0.5, 165, 0, Math.PI*2, false);
                        ctx.fill();
                    }, 1000);
                }
            });
        });
        pic.src = 'https://www.google.com.hk/images/nav_logo105.png';
    </script>
</body>

【问题讨论】：

标签： html google-chrome canvas

【解决方案1】：

哦，我知道这个。

I reported it back in January, its still broken in Chrome Dev。请参阅那里的最后一条评论。

事实证明，该模式第一次在选项卡中绘制时会起作用。然后你必须关闭标签并创建一个新标签，它才能再次工作。刷新页面不会这样做。真的很痛苦。

【讨论】：