CANVAS 이미지 회전시키기

CANVAS 이미지 회전시키기

캔버스에서 image 를 회전시킬 수 있다.

scale 1 이상은 확대의 의미이다.

<script>

function drawImageRotate(image, x, y, degrees, scale) {

var w = image.width * scale;

var h = image.height * scale;

ctx.save();

ctx.translate(x, y);

ctx.rotate(degrees * Math.PI/180);

ctx.drawImage(image, -(w/2), -(h/2), w, h);

ctx.restore();

}

var drawCanvas = document.getElementById('drawCanvas');

var ctx = drawCanvas.getContext('2d');

var img = new Image();

img.onload = function() {

drawImageRotate(img, drawCanvas.width/2, drawCanvas.height/2, 90, 1);

}

img.src = url;

</script>

<canvas id="drawCanvas" width="300" height="200" style="border:1px solid #000000;"></canvas>