« css font の英語日本語対応 | メイン | mysqlのgeneral_log »
2019年03月19日
canvasメモ１
◆四角系
幅、高さ、角丸のサイズ
◆円
ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise)
x, y：中心点
radius：半径
startAngle：開始角度
endAngle：終了角度
anticlockwise：右回り左回り
◆楕円
ctx.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle [, anticlockwise]);
x, y：中心点
radiusXY：横縦半径
startAngle：開始角度
endAngle：終了角度
もしくは
/* 円を描く */
ctx.save();
ctx.scale(2, 1); // 横２倍のスケールに引き伸ばして円を書いて元に戻せば楕円に
ctx.beginPath();
ctx.arc(100, 100, 50, Math.PI * 2, false);
ctx.restore();
ctx.stroke();
倍率かえて描画すれば円を潰した感じで楕円になる
◆共通
傾き context.rotate( 50 * Math.PI / 180 ) ;
線 幅、色（幅は内側、外側？おぺらは外に線が表示された）
ctx.strokeStyle = color;
ctx.lineWidth = 5;
影 shadowColor shadowBlur (ぼかしのサイズ) shadowOffsetY shadowOffsetX
/* ぼかしの範囲を定義 */
ctx.shadowBlur = 10;
/* ぼかしの色を定義 */
ctx.shadowColor = "#990000";
ctx.shadowOffsetY = "3";
ctx.shadowOffsetX= "3";
ctx.beginPath();
ctx.arc(50, 50, 35, 0, Math.PI*2, false);
ctx.fillStyle = "#cc0000";
ctx.fill();
中の画像（データ、位置、拡大率、透明度）
回転は基本的に座標0,0を中心に回転する
なので、個別のオブジェクトを回転したい場合は以下のような感じ
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
// Non-rotated rectangle
ctx.fillStyle = 'gray';
ctx.fillRect(80, 60, 140, 30);
// Matrix transformation
ctx.translate(150, 75);
ctx.rotate(Math.PI / 2);
ctx.translate(-150, -75);
// Rotated rectangle
ctx.fillStyle = 'red';
ctx.fillRect(80, 60, 140, 30);
投稿者 muuming : 2019年03月19日 06:04