javascript. canvas. 화면 반전 및 회전 예제

canvas 에 그린 내용이 반전 및 회전되어 나오도록 할 수 있습니다.

var c = document.createElement( 'canvas' );
c.width = 300;
c.height = 300;
document.body.appendChild( c );
var ctx = c.getContext( '2d' );

var l = 10;
var t = 10;
var w = 20;
var h = 40;

ctx.save();

//반전

ctx.translate( 0, ctx.canvas.height );
ctx.scale( 1, -1 );

ctx.beginPath();
ctx.rect( l, t, w, h );
ctx.fillStyle = 'orange';
ctx.fill();

ctx.save();

//반전된 상태에서 270도 회전

ctx.translate( ctx.canvas.width, 0 );
ctx.rotate( 90 * Math.PI/180 );

ctx.beginPath();
ctx.rect( l, t, w, h );
ctx.fillStyle = 'blue';
ctx.fill();

ctx.restore();

ctx.save();

//반전된 상태에서 90도 회전

ctx.translate( 0, ctx.canvas.height );
ctx.rotate( 270 * Math.PI/180 );

ctx.beginPath();
ctx.rect( l, t, w, h );
ctx.fillStyle = 'red';
ctx.fill();

ctx.restore();

ctx.restore();

http://jsfiddle.net/acidraincity/qtnh7h4o/2/

다른글 읽기