Question

我正在使用预装的图像数组，其中包含：

<img src='myimage.jpg'/>

我正在使用的代码如下：

var img = images[0];
ctx.drawImage(img,-centerX,-centerY, cwidth, cheight);
ctx.beginPath();
ctx.arc(10, 10, 10,0,Math.PI*2,false);
ctx.lineWidth = 5;
ctx.strokeStyle = "rgb(0, 0, 255)";
ctx.stroke();

为什么上面代码中的绘制弧不起作用？

Answer 1

我准备了一个fiddle here，它运行正常。如果切换到document.images后你的工作不起作用，试试看看它。：）

Answer 2

试试这个。

HTML代码：

<canvas id="myCanvas" width="600" height="600";">

JS代码：

 function startCanvas() {
        var c = document.getElementById("myCanvas");
        var ctx = c.getContext("2d");

        var image = new Image();

        image.onload = function () {
            ctx.drawImage(image, 69, 50);
            //draw a circle
            ctx.beginPath();
            ctx.arc(75, 75, 10, 0, Math.PI * 2, true);
            ctx.closePath();
            ctx.fill();
        };

        image.src = 'download.jpg';

fiddle here..

使用javascript在预加载的图像上绘制弧

2 个答案: