javascript. canvas. 바운딩박스(BoundingBox)에 맞춰 원(Circle) 그리기

이번에도 역시 코드로 설명하겠습니다.


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

var l = 50;
var t = 50;
var w = 200;
var h = 100;

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

ctx.beginPath();
ctx.save();
ctx.translate( l + w / 2, t + h / 2 );
ctx.scale( 1, h / w );
ctx.arc( 0, 0, w / 2, 0, 2 * Math.PI, false );
ctx.restore();

ctx.fillStyle = 'orange';
ctx.fill();
ctx.strokeStyle = 'red';
ctx.lineWidth = 2;
ctx.stroke();

http://jsfiddle.net/acidraincity/so4ht6ah/

다른글 읽기