chrome18-19版本的canvas的createPattern画不出来

0 0

chrome18-19版本的canvas的createPattern画不出来5

图片可以任意替换，但是在chrome18-19版本中就是怎么都画不出来，是不是chrome的bug？

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

问题补充：不是在测试版开发，是得兼容它。。

suziwen 写道

别在测试版上开发，

问题补充：看到代码好像有点小问题 31行多了一个ctx，偶是直接复制的，原代码没问题，不知道怎么就有了，原问题不能修改，麻烦要运行的朋友修改一下下。。。