www/corelib/coredraw.js

   1 //
   2 //Canvas直接描画関連
   3 //
   4
   5 //フォント設定方法
   6 //context.font = "normal 20px sans-serif";
   7
   8 //色設定方法
   9 //context.fillStyle = "rgba(200,255,200,0.5)";
  10 //context.strokeStyle = "rgba(0, 0, 0, 0.5)";
  11
  12 function drawText(gcontext, text, x, y)
  13 {
  14         //背景をfillStyle
  15         //前景をstrokeStyleで塗りつぶした文字列を描画する
  16         //塗りつぶし高さは20px固定
  17         //座標は文字列の左上の座標となる
  18         textsize = gcontext.measureText(text);
  19         gcontext.fillRect(x, y, textsize.width, 20);
  20         gcontext.save();
  21         gcontext.fillStyle = gcontext.strokeStyle;
  22         //fillText引数の座標は文字列の左下！
  23         gcontext.fillText(text, x, y + 20 - 1);
  24         gcontext.restore();
  25 }
  26
  27 function drawArcDegree(gcontext, radius, startAngleDegree, endAngleDegree, x, y, anticlockwise)
  28 {
  29         //半径radius, 中心座標(x,y)の円弧の、
  30         //startAngleDegreeからendAngleDegreeまでの範囲を、
  31         //(!anticlockwise)=時計回り
  32         //(anticlockwise) =反時計回り
  33         //に描画する。
  34         //角度は度を利用する。
  35         startAngleRadian = startAngleDegree * Math.PI / 180;
  36         endAngleRadian = endAngleDegree * Math.PI / 180;
  37
  38         gcontext.beginPath();
  39         gcontext.arc(drawCoordinatesInInteger(x), drawCoordinatesInInteger(y), drawCoordinatesInInteger(radius), startAngleRadian, endAngleRadian, anticlockwise);
  40         gcontext.fill();
  41         gcontext.stroke();
  42         gcontext.closePath();
  43 }
  44
  45 function fillRect(gContext, x, y, w, h)
  46 {
  47         gContext.fillRect(drawCoordinatesInInteger(x), drawCoordinatesInInteger(y), drawCoordinatesInInteger(w), drawCoordinatesInInteger(h));
  48 }
  49
  50 function strokeRect(gContext, x, y, w, h)
  51 {
  52         gContext.strokeRect(drawCoordinatesInInteger(x), drawCoordinatesInInteger(y), drawCoordinatesInInteger(w), drawCoordinatesInInteger(h));
  53 }
  54
  55 function drawCoordinatesInInteger(coordinateElement)
  56 {
  57         //from http://www.html5rocks.com/ja/tutorials/canvas/performance/
  58         // With a bitwise or.
  59         return ((0.5 + coordinateElement) | 0);
  60 }