CANVAS에 이미지를 로딩하고 라인 DRAW 시키기

CANVAS에 이미지를 로딩하고 라인 DRAW 시키기

개요

  - HTML5 + Javascripts 를 이용하여 브라우저 CANVAS를 얻는다.

  - CANVAS에 지정된 이미지를 로딩할 수 있다.

  - CANVAS에 지정된 컬러로 LINE을 DRAW 할 수 있다.

소스보기

* HTML Source

	이 브라우저는 CANVAS를 지원하지 않습니다.

* JavaScripts Source

    var canvas = document.getElementsByTagName('canvas');
    var context = canvas[0].getContext('2d');

    var L = 13, T = 434, R = 1402, B = 1145;
    var scale;

	var img = new Image();
	img.src = "http://www.xxx.xxx/images/755d6f164fd0bd84caea.jpg";

    img.onload = function()
    {
        //context.canvas.width = img.width;
        scale = (600/img.width);
        L = L * scale;
        R = R * scale;
        T = T * scale;
        B = B * scale;
        
        context.canvas.height = img.height*scale;
        context.drawImage(img, 0,0, context.canvas.width, context.canvas.height);
        context.beginPath();
        context.lineWidth = 2;
        context.strokeStyle = 'blue';
        context.moveTo(L,T);
        context.lineTo(R,T);
        context.lineTo(R,B);
        context.lineTo(L,B);
        context.closePath();
        context.stroke();
    }

* 결과보기