Javascript 再次单击调整HTML5画布圆圈大小

正在尝试将圆的大小加倍onclick（）。好像不起作用了

HTML

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

---

您需要再次重新绘制圆，同时请记住，

context.scale（）

也将缩放其位置，因此我不建议这样做。你可以画一个半径更大的新圆

---

jsFiddle-

这里有一个jsFiddle，正好满足我的需要，以防有人需要帮助

x=200；
y=200；
尺寸=100；
半径=30；
函数animate（）{
reqAnimFrame=window.mozRequestAnimationFrame | |//获取帧速率
window.webkitRequestAnimationFrame||
window.msRequestAnimationFrame||
window.oRequestAnimationFrame
;
重新设置动画帧（动画）；
如果（半径重画的问题是，我还想添加一个过渡。那似乎不起作用。想法？过渡是什么意思？你可以清除画布并为每一帧重新绘制圆。对不起，应该已经澄清了。这是我想要的效果，但我需要在画布上进行：jsFiddle-是的，你只需清除画布上的每一帧。）用新的尺寸和位置重新绘制圆。检查本教程-
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();