javascript - onclick 调整 HTML5 Canvas 圆的大小

Question

尝试将 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); 
        }

Answer 1

您需要再次重新绘制圆圈，并记住 context.scale() 也会缩放其位置，因此我不建议这样做。您可以用更大的半径绘制一个新圆。

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