さぁ!検索しよう!

HTML5+JavaScriptでフラットな木を描く方法です。

DEMO

HTML

<canvas id="canvas"></canvas>

CSS

body {
  margin: 0;
  overflow: hidden;
}

canvas {
  background: #333;
}

JavaScript

(function() {
  var canvas = document.getElementById('canvas');
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  var ctx = canvas.getContext('2d');

  //左側の三角形
  ctx.beginPath();
  ctx.moveTo(50, 10);
  ctx.lineTo(20, 80);
  ctx.lineTo(50, 80);
  ctx.closePath();
  ctx.fillStyle = "#26AE90";
  ctx.fill();

 //右側の三角形
  ctx.beginPath();
  ctx.moveTo(50, 10);
  ctx.lineTo(50, 80);
  ctx.lineTo(80, 80);
  ctx.closePath();
  ctx.fillStyle = "#60C4B0";
  ctx.fill();

 //左側の幹
  ctx.fillStyle = "#C0392B";
  ctx.fillRect(45, 80, 5, 30);

 //右側の幹
  ctx.fillStyle = "#E74C3C";
  ctx.fillRect(50, 80, 5, 30);
})();

描画方法

フラットな木は、JavaScriptで以下の図形を描画し、それらを組み合わせることで完成します。

左側の三角形を描画

左側の三角形を描画するコード

ctx.moveTo(50, 10);
  ctx.lineTo(20, 80);
  ctx.lineTo(50, 80);
  ctx.closePath();
  ctx.fillStyle = "#26AE90";
  ctx.fill();

左側の三角形を描画するには以下のことを行ないます。

1. 開始点を決める

ctx.moveTo(50, 10);でどこから線を伸ばしていくかの開始点を決めており、カンバス左端から50px、上端から10pxの座標に設定しています。

ctx.moveTo(50, 10);

2. 開始点から線を描画

lineTo(x,y)で開始点から伸ばす線を描きます。最初に開始点より左側の線を決めます。ctx.lineTo(20, 80);で、開始点からカンバス左端から20px、上端から80pxの座標に向かって線が引かれます。

ctx.lineTo(20, 80);

それと同様に、開始点より右側の線を決めます。ctx.lineTo(50, 80);で、開始点からカンバス左端から50px、上端から80pxの座標に向かって線が引かれます。

ctx.lineTo(50, 80);

3. 線同士を結ぶ

ctx.closePath();で2点が結ばれ、三角形が出来上がります。

ctx.closePath();

4. 塗りを設定

ctx.fillStyleで三角形の塗りを設定し、ctx.fill();で塗りつぶします。

ctx.fillStyle = "#26AE90";
ctx.fill();

右側の三角形を描画

右側の三角形は左側の三角形の描画と対称となるように配置し、カラーは左側よりも明るくします。

右側の三角形を描画するコード

ctx.beginPath();
  ctx.moveTo(50, 10);
  ctx.lineTo(50, 80);
  ctx.lineTo(80, 80);
  ctx.closePath();
  ctx.fillStyle = "#60C4B0";
  ctx.fill();

左側の幹を描画

左側の幹はfillRect(x,y,w,h)で長方形を描画し、fillStyleで長方形を塗りつぶすだけです。※下記のように、fillStyleを先に書かないと動作しません。

ctx.fillStyle = "#C0392B";
ctx.fillRect(45, 80, 5, 30);

右側の幹を描画

左側の幹の対称となるように配置し、カラーは右側よりも明るくします。

ctx.fillStyle = "#E74C3C";
ctx.fillRect(50, 80, 5, 30);

以上で、HTML5のcanvasでフラットな木を描く方法を終わります。