by shigemk2

当面は技術的なことしか書かない

グラデーションを描画しよう

HTML5

createLinearGradient(x0, y0, x1, y1)は、(x0, y0)から(x1, y1)への直線に沿って色が移り変わる。

<body>
  <canvas id="d1" width=300 height=225></canvas>
  <canvas id="d2" width=300 height=225></canvas>
  <canvas id="d3" width=300 height=225></canvas>
  <script>
    var d_canvas = document.getElementById("d1");
    var context = d_canvas.getContext("2d");
    // 線形やっただけじゃ描画されない
    var my_gradient = context.createLinearGradient(0, 0, 300, 0);
    // グラデーションの色を定義しても描画されない
    // オブジェクトが存在するだけだから
    my_gradient.addColorStop(0, "black");
    my_gradient.addColorStop(1, "white");
    // fillStypeをグラデーションに設定して、矩形や直線などの
    // シェーブを描く
    context.fillStyle = my_gradient;
    context.fillRect(0, 0, 300, 225);

    // 上下のグラデーション
    var d_canvas = document.getElementById("d2");
    var context = d_canvas.getContext("2d");
    var my_gradient = context.createLinearGradient(0, 0, 0, 225);
    my_gradient.addColorStop(0, "black");
    my_gradient.addColorStop(1, "white");
    context.fillStyle = my_gradient;
    context.fillRect(0, 0, 300, 225);

    // 斜めのグラデーション
    var d_canvas = document.getElementById("d3");
    var context = d_canvas.getContext("2d");
    var my_gradient = context.createLinearGradient(0, 0, 300, 225);
    my_gradient.addColorStop(0, "black");
    my_gradient.addColorStop(1, "white");
    context.fillStyle = my_gradient;
    context.fillRect(0, 0, 300, 225);
  </script>
</body>

完成品。


入門 HTML5

入門 HTML5