0

円のサイズを2倍にしようとしています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); 
        }
4

2 に答える 2

1

誰かが助けを必要とする場合に備えて、これがまさに私が必要としていたものの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-07T05:04:32.470 に答える
1

円を再度描画する必要があります。また、円context.scale()の位置も拡大縮小されるため、この方法はお勧めしません。より大きな半径で新しい円を描くことができます。

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

于 2013-02-07T01:16:08.850 に答える