HTML5 Canvas 覚書
Canvas Note
// VScodeで書いてる自分用Canvas referenceの置き場です // Last updated: 2018-11-03.
Environment
// this makes full range of browser.
var canvas = document.querySelector('canvas');
var cW = canvas.width = window.innerWidth;
var cH = canvas.height = window.innerHeight;
var c = canvas.getContext('2d');
var midX = cW/2;
var midY = cH/2;
Back Ground
// in CSS
canvas { background: #000;
width: 100%; height: 100%;}
body {margin: 0;}
Animation
function render() {
c.clearRect(0,0,cW,cH);
c.beginPath();
hogeohoge; h++;
requestAnimationFrame(render);
} render();
Draw Circle easier
function drawCircle(x, y, r, color) {
c.beginPath();
c.arc(x, y, r, 0, 2*Math.PI, false);
c.fillStyle = color;
c.fill();
}
drawCircle(200,200,30, 'darkblue');
Transformation
// x, y => 追加移動座標
// x1, y1, => 伸縮。 1 = 100%?
// x2, y2 => 傾き。1 = 90?
c.transform(x1, y2, x2, y1, x, y);
Expand from center
// 必要であれば初期化
c.setTransform(1,0,0,1,0,0;)
c.scale(2,2);
c.translate(x + 0.5 * w , y + 0.5 * h);
// これで図形が拡大される。
Radial Gradient
// x,y,r is starting value
// x2,y2,r2 is ending value
c.createRadialGradient(x,y,r,x2,y2,r2);
Draw Text
c.beginPath();
c.fillStyle = '#fff';
c.textAlign = "center";
c.font = '75px serif';
c.fillText('🎃Happy Halloween!!!🎃',cW/2,cH*.1);
Bezier Line
// 2D bezier curve line.
// (0, 0) to (endX,endY).
// (midX,0) is the curving point.
c.lineWidth = "20";
c.beginPath();
c.moveTo(0, 0);
c.quadraticCurveTo(midX,0,endX,endY);
c.stroke();
// 3D one.
// (0, midY) to (endX,midY)
// (endX/3,0),(midX,endY) are the curving point!
c.beginPath();
c.strokeStyle = '#0a0'
c.moveTo(0, midY);
c.bezierCurveTo(endX/3,0,midX,endY,endX,midY);
c.stroke();