調整HTML5 Canvas圓圈onclick

嘗試將圓圈onclick（）的大小加倍。似乎沒有工作？調整HTML5 Canvas圓圈onclick

HTML

<canvas id="drawing" width="600px" height="600px" onclick="resize()"></canvas>

的Javascript

 window.onload = function() { 
      canvas=document.getElementById("drawing"); 
      context=canvas.getContext("2d"); 
      var centerX = canvas.width/2; 
      var centerY = canvas.height/2; 
      var radius = 70; 

      context.beginPath(); 
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false); 
      context.fillStyle = 'green'; 
      context.fill(); 
     } 

     function resize() { 
      context.fillStyle= "#701be0"; // This changes the rectangle to blue 
      context.fill(); 
      context.scale(10.5, 2.5); 
     }

來源

2013-02-07 Elijah Murray

您需要再次重新繪製你的圈子，也請記住，context.scale()也將擴展其位置，所以我不建議這樣做這條路。你可以用更大的半徑繪製一個新的圓。

的jsfiddle - http://jsfiddle.net/DSFMq/

來源

2013-02-07 01:16:08 dmk

與重繪的問題是，我也想添加一個過渡。然後似乎沒有工作。思考？ –

你是什麼意思的過渡？您可以清除畫布併爲每個畫框再次繪製圓圈。 – dmk

對不起，應該澄清一下。這是我想要的效果，但我需要在畫布上做到這一點： jsFiddle - http://jsfiddle.net/M362A/ –

這裏有一個對的jsfiddle我需要什麼，萬一有人需要幫助。

http://jsfiddle.net/elijahmurray/fHv82/1/

x=200; 
y=200;  
size=100; 
radius=30; 

function animate() { 
reqAnimFrame = window.mozRequestAnimationFrame || //get framerate 
       window.webkitRequestAnimationFrame || 
       window.msRequestAnimationFrame  || 
       window.oRequestAnimationFrame 
      ; 
reqAnimFrame(animate); 


if(radius <= 200) { 
    radius +=3; 
} //increase size by 1 per frame 

    draw(); 
} 

function draw() { 
var canvas = document.getElementById("ex1"); 
var context = canvas.getContext("2d"); 

    context.beginPath(); 
    context.arc(x, y, radius, 0, 2 * Math.PI, false); 
    context.fillStyle = 'green'; 
    context.fill(); 
} 
animate();

來源

2013-02-07 05:04:32

調整HTML5 Canvas圓圈onclick

回答

相關問題