多角形を描いてみよう。
元ネタは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); |
＊context.stroke();しないと黒の縁取り線無しの矢印になります。