ベジェ曲線のテスト

by ethertank

JavaScript

var c = document.createElement("canvas");
c.setAttribute("id", "canvas", false);
c.setAttribute("width", "200", false);
c.setAttribute("height", "200", false);
c.setAttribute("style", "border:1px solid #000", false);
document.body.appendChild(c);
var ctx = c.getContext("2d");

for (i = 0; i < 20; i++) {
    ctx.fillStyle = "#09c";
    ctx.fillRect(0, 0, 200, 200);

    //start
    ctx.moveTo(190, 10);

    //ポイント、ポイント、終点
    ctx.bezierCurveTo(100, 10, 17 * i, i * 10, 10, 190);

    ctx.lineWidth = 1; //太さ
    ctx.strokeStyle = "#fff"; //線の色
    ctx.stroke(); //喰らわす
};