円の拡大

次の例は、円の半径を拡大する。

[HTML]
<canvas id="canvas1" width="400" height="400"></canvas>

[JavaScript]
window.addEventListener("load",draw,false);

function draw(){
  var ripples = [];
  chgZoom = 1;
  var xsize = 400;
  var ysize = 400;
  var canvas = document.querySelector("#canvas1")
  var context = canvas.getContext("2d");
  canvas,addEventListener('click',function(event) {
    var rect = canvas.getBoundingClientRect();
    var cur_x = rect.left;
    var cur_y = rect.top;
    var x_value = (event.clientX - cur_x) * chgZoom;
    var y_value = (event.clientY - cur_y) * chgZoom;
    if(( x_value > 0 && x_value < xsize) && ( y_value > 0 && y_value < ysize)){
       ripples.push({ x: x_value, y: y_value, r: 0 });
    }
  },false);

  context.lineWidth = 4;
  context.strokeStyle = "lightblue";
  setInterval(function() {
    context.clearRect(0, 0, xsize, ysize); 
    drawRipples();
  }, 20);

  function drawRipples() {
    for (var i = 0; i < ripples.length; i++) {
      circle(context, ripples[i].x, ripples[i].y,
      ripples[i].r);
      ripples[i].r++;
      if(ripples[i].r > (xsize*1.5) && ripples[i].r > (ysize*1.5)){
        ripples.shift();
      }
    }
  }
  function circle(context, x, y, r) {
    context.beginPath();
    context.arc(x, y, r, 0, Math.PI*2, false);
    context.strokeStyle = 'rgb(192, 80, 77)'; 
    context.stroke();
  }
}

四角の中をクリックしてください