HTML5 canvas コピペ用

スタイル指定の基本 = "white"; = "#FFFFFF"; = "rgba()"
塗りつぶしスタイル ctx.fillStyle = スタイル;
線スタイル ctx.strokeStyle = スタイル;
線の描画 ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(x, y);
ctx.storoke();
矩形でクリア ctx.clearRect(x, y, width, height);
画像の描画 ctx.drawImage(image, x, y);
座標の移動 ctx.translate(x, y);
座標の回転 ctx.rotate(角度 * Math.PI / 180);
状態の保存 ctx.save();
状態の復元 ctx.restore();
フォント指定 ctx.font = "18pt Ariel";
フォント指定(スペースがある場合) ctx.font = "18pt 'hooge 05_53'";
文字描画 ctx.fillStyle = 'red';
ctx.font = "12pt 'Meiryo'";
ctx.textAlign = "left";
ctx.textBaseline = "top"; // これ大事
ctx.fillText('9999', 0, 0);
  • canvasの注意事項
    canvasの大きさを変えたいときはスタイルで変更してはならない。
    描画内容がそのまま拡大しまうから。
    属性にwidth, heightがあるのでそれを利用する。ピクセルで数値を指定すればよい。
web拍手
This entry was posted in HTML5 canvas. Bookmark the permalink.

コメントを残す

メールアドレスが公開されることはありません。

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>