イナヅマTVログ

Canvas始めました – 多角形(矢印)を描いてみる

| 0件のコメント

多角形を描いてみよう。
元ネタはbit101さんのActionScript Animation。

矢印

HTML

<canvas id='canvas'></canvas>

JavaScript

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var w=60,h=60,w0=w*0.5,h0=h*0.25,x=w,y=h;
 
context.setTransform(1,0,0,1,0,0);
context.translate(x,y);
 
context.beginPath();
context.fillStyle = 'red';
context.moveTo(-w0,-h0);
context.lineTo(0,-h0);
context.lineTo(0,-w0);
context.lineTo(w0,0);
context.lineTo(0,w0);
context.lineTo(0,h0);
context.lineTo(-w0,h0);
context.lineTo(-w0,-h0);
context.stroke();
context.fill();
context.closePath();
 
context.setTransform(1,0,0,1,0,0);

矩形を2個追加した。

context.fillStyle = 'rgba(0,0,255,0.5)';
context.fillRect(x,y,w,h);
 
context.fillStyle = 'rgba(0,255,0,0.5)';
context.fillRect(x-w0,y-h0*2,w,h);

Arrow + Rect

context.stroke();しないと黒の縁取り線無しの矢印になります。

コメントを残す

必須欄は * がついています