2014-01-21 33 views
0

我使用的是预装的图像阵列,其中包含:画弧的JavaScript

<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(); 

为什么是平局上述代码中的弧线不工作?

+0

我们需要更多的细节来回答。或者你可以添加一个小提琴? –

+0

请尝试使用'document.images'。你是在'onload'上运行这个代码还是在其他时候图像已经加载? – MildlySerious

回答

0

试试这个。

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

0

我准备了fiddle here,它工作正常。如果您在切换到document.images后不工作,请尝试查看它。 :)