R-SQUARE.net

研究開発部

canvasでらくがき

JavaScriptで2次元図形を描画してみた。

動作例



サンプルソース

JavaScript ソース
/**
 * canvs.js
 */
$(document).ready(function(){
  /* htmlのcanvas要素を取得する */
  var cnv = $('canvas#rakugaki').get(0);
  
  /* CanvasRenderingConext2D 描画コンテキストオブジェクトを取得 */
  var ctx = cnv.getContext('2d');

  /* 線形グラデーションの矩形 */
  ctx.beginPath();
  var grd = ctx.createLinearGradient(0,0,500,350);
  grd.addColorStop(0.0,'blue');        /* 線形グラデーションの始点の色 */
  grd.addColorStop(0.4,'lightyellow');
  grd.addColorStop(0.5,'yellow');      /* 線形グラデーションの真ん中の色 */
  grd.addColorStop(0.6,'lightyellow');
  grd.addColorStop(1.0,'red');         /* 線形グラデーションの終点の色 */
  ctx.fillStyle = grd;                 /* 塗りにグラデーションを設定 */
  ctx.fillRect(0,50,500,200);          /* 塗りのみ矩形 */
  
  /* 三角形 */
  ctx.beginPath();           /* 新しいパスを開始 */
  ctx.moveTo(10,10);         /* [1] 始点へ移動 */
  ctx.lineTo(110,110);       /* [2] 1の右ななめ下あたりまで線を引く */
  ctx.lineTo(10,110);        /* [3] 2の左横、1の左下あたりまで線を引く */
  ctx.closePath();           /* パスを閉じると3と1がつながる */
  ctx.lineWidth = 5.0;       /* 線幅 */
  ctx.strokeStyle = 'rgba(128,0,128,0.8)'; /* 線色、purple、ちょっと透明 */
  ctx.stroke();              /* 線を描画 */
  ctx.fillStyle = 'rgba(255,192,203,0.6)'; /* 塗り色、pink、もうちょっと透明 */
  ctx.fill();                /* 塗りつぶし */
  
  /* 塗りのみ矩形と線のみの矩形 */
  ctx.beginPath();
  ctx.lineWidth = 20.0;
  ctx.strokeStyle = 'rgba(0,255,0,0.5)'; /* lime、半透明 */
  ctx.strokeRect(150,30,100,100);        /* 線のみの矩形 */
  ctx.fillStyle = 'rgba(0,0,255,0.5)';   /* blue、半透明 */
  ctx.fillRect(170,50,80,80);            /* 塗りのみの矩形 */
  
  /* 0度から135度の円弧(時計回り) */
  ctx.beginPath();
  ctx.lineWidth = 2.0;
  ctx.fillStyle = 'rgba(255,165,0,0.5)'; /* orange、半透明 */
  ctx.strokeStyle = 'rgba(255,0,0,0.5)'; /* red、半透明 */
  ctx.moveTo(105,220);                   /* 中心点へ移動 */
  ctx.arc(105,220,100,0,135*(2*Math.PI/360),false); /* 時計回りの円周 */
  ctx.closePath();                       /* 中心点へ線をつなぐ */
  ctx.stroke();                          /* 線を描画 */
  ctx.fill();                            /* 塗りつぶし */
  
  /* 0度から135度の円弧(反時計回り) */
  ctx.beginPath();
  ctx.lineWidth = 2.0;
  ctx.fillStyle = 'rgba(255,165,0,0.5)'; /* orange、半透明 */
  ctx.strokeStyle = 'rgba(255,0,0,0.5)'; /* red、半透明 */
  ctx.moveTo(350,220);                   /* 中心点へ移動 */
  ctx.arc(350,220,100,0,135*(2*Math.PI/360),true); /* 反時計回りの円周 */
  ctx.closePath();                       /* 中心点へ線をつなぐ */
  ctx.stroke();                          /* 線描 */
  ctx.fill();                            /* 塗りつぶし */
  
  /* 線 */
  ctx.beginPath();
  ctx.moveTo(300,80);                  /* 始点へ移動 */
  ctx.lineWidth = 3.0;                 /* 線幅 */
  ctx.strokeStyle = 'rgba(0,0,0,0.5)'; /* black、半透明 */
  ctx.lineTo(450,80);                  /* 線 */
  ctx.stroke();                        /* 線を描画 */
  
  /* テキスト */
  ctx.font='bold 400% TanukiMagic';
  ctx.textAlign = 'left';              /* 左中右の左揃え */
  ctx.textBaseline = 'top';            /* 上中下の上揃え */
  ctx.fillStyle = 'rgba(0,128,0,0.5)'; /* green、半透明 */
  ctx.fillText('緑',350,80);           /* 塗り文字 */
  
  ctx.font='bold 400% serif';
  ctx.textAlign = 'center';              /* 左中右の中揃え */
  ctx.textBaseline = 'middle';           /* 上中下の中揃え */
  ctx.lineWidth = 1.0;                   /* 線幅 */
  ctx.strokeStyle = 'rgba(255,0,0,0.5)'; /* red、半透明 */
  ctx.strokeText('赤',350,80);           /* 縁取り文字 */
  
  ctx.font='bold 400% sans-serif';
  ctx.textAlign = 'right';               /* 左中右の右揃え */
  ctx.textBaseline = 'bottom';           /* 上中下の下揃え */
  ctx.fillStyle = 'rgba(0,255,255,0.5)'; /* aqua、半透明 */
  ctx.fillText('水',350,80);             /* 塗り文字 */
});
					


css ソース
@font-face {
  font-family : 'TanukiMagic';
  src: url('/fonts/TanukiMagic.woff') format('woff'),
  url('/fonts/TanukiMagic.ttf') format('truetype');
}
/**
 * R-SQUARE.net converted 'TanukiMagic.woff' from 'TanukiMagic.tff'. 
 *  -> http://tanukifont.com/
 */
					


html ソース
<div>
	<canvas id="rakugaki" width="500" height="330"></canvas>
</div>
<script src="./js/canvas.js"></script>					


まとめ

  • closePath()でパスを始点へつなげてから、stroke()、fill()とやる。
  • fillStyle、strokeStyleに設定できるのはcssのcolorプロパティに設定できる値と同じらしい。
  • fillStyle、strokeStyleにグラデーションを設定する場合は、CanvasGradientオブジェクトを作ってから、それを設定する。
  • fontに設定できるのはcssのfontプロパティ(一括指定するときのfont)に設定できる値と同じらしい。
  • cssの@font-faceを定義しておくと、Webフォントも使える。
  • ブラウザによっては、テキストが表示されないようだ。(JavaScriptエンジンのバージョンによる?)
  • canvas上の座標の原点(0,0)は左上。translate()メソッドで原点の座標を指定することができる。
  • 円の角度はラジアン。360度は2π。中心角0度の円周上の位置は時計の3時の位置。
  • 円グラフを1個だけ描く場合は原点の座標を円の中心に移動したほうが、楽かもしれない。
  • 3Dはwebglらしい


参考文献

「JavaScript 第6版」 David Flanagan (著), 村上 列 (翻訳) オライリージャパン (2012/08/15 初版 第1刷) 
「JavaScriptリファレンス 第6版」 David Flanagan (著), 木下 哲也 (翻訳) オライリージャパン (2012/08/15 初版 第1刷) 
last modified : 2015-11-26T19:10:33+09:00