| スタイル指定の基本 | = "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があるのでそれを利用する。ピクセルで数値を指定すればよい。
