2

キャンバスだけを使用して 2 つの形状を変換できるかどうか疑問に思っていました。

例: 星から円。

これは私がこれまでに持っているものです:

var canvas, 
    ctx,
    length = 15;

canvas = document.getElementById("star");
ctx = canvas.getContext("2d");

ctx.translate(30, 30);
ctx.rotate((Math.PI * 1 / 10));

for (var i = 5; i--;) {
    ctx.lineTo(0, length);
    ctx.translate(0, length);
    ctx.rotate((Math.PI * 2 / 10));
    ctx.lineTo(0, -length);
    ctx.translate(0, -length);
    ctx.rotate(-(Math.PI * 6 / 10));
}

ctx.lineTo(0, length);
ctx.closePath();
ctx.fill();
4

1 に答える 1

1

これが純粋なキャンバスの基本的な移行です。線の代わりに弧を使用することは、読者の練習問題として残されています;）

http://jsfiddle.net/pD9CM/

var canvas, 
    ctx,
    length = 15;

canvas = document.getElementById("star");
ctx = canvas.getContext("2d");

var max = 50;
var inset = 0;
var direction = +1;

function draw() {

    ctx.clearRect(0, 0, 300, 300);
    ctx.beginPath();

    var i = 11
    while (i--) {
      var angle = (i/10) * Math.PI * 2;
      var distance = (i % 2 === 0) ? (max - inset) : max;
      var pt = point(angle, distance);
      if (i === 0) ctx.moveTo(pt.x + 150, pt.y + 150);
      else ctx.lineTo(pt.x + 150, pt.y + 150);
    }
    ctx.fill();  

    if (inset < 0 || inset > 30) direction = -direction;
    inset += direction;
}

function point(angle, distance) {
  return {
    x: Math.cos(angle) * distance,
    y: Math.sin(angle) * distance
  };
}

setInterval(draw, 20);
于 2013-01-10T09:28:19.193 に答える