画布绘制图像

Question

我在绘制图片时遇到问题。当我使用c.fillRect()时，一切正常，但drawImage()由于某种原因不起作用。图像与文件位于同一目录中，变量框在函数外定义。 / p>

        window.onload = function () {
            var canvas = document.getElementById("map");
            var c = canvas.getContext("2d");

            var s = {
                rows: 10,
                cols: 10,
                width: 60.2,
                height: 60.2
            };


            var box;

            init();

            function init() {
                box = new Image();
//here
                box.src = "box.png";

                drawCanvas();
            }

            function drawCanvas() {
                c.clearRect(0,0,700,700);

                for (var i=0; i<s.rows; i++) {
                    for (var n=0; n<s.cols; n++) {
                        var x = n*s.width;
                        var y = i*s.height;
//here
                        c.drawImage(box,x,y);
                        //c.fillRect(x,y,60,60);

                    }
                }
            }
        }