Html5 Canvas 예비 연구 노트(11) - 간단한 이미지 작업

이번 글에서는 간단한 그림 조작을 소개합니다

효과는 다음과 같습니다.

은 웹 페이지에 간단한 jpg 형식의 그림을 표시하는 것입니다. 코드도 매우 간단합니다.

var image = new Image();
image.src = "icon.jpg";
image.onload = function(){
 context.drawImage(image,50,50);
}

먼저 Image 개체를 만든 다음 image 개체의 src 속성을 ​​다음으로 설정합니다. 이미지의 상대 경로, 그리고 마지막으로 onload 메서드를 재정의하여 이미지가 로드되면 이를 표시합니다.

다음은 우리가 그린 그래픽을 그림으로 내보내는 방법을 설명합니다.

사실 효과에 대해서는 특별한 것이 없습니다. 주로 코드를 살펴보겠습니다.

context.beginPath();
context.moveTo(50,200);
//context.lineTo(50,250);
context.bezierCurveTo(100,100,150,300,200,200);
context.closePath();
context.stroke();
var dataURL = canvas.toDataURL();
//document.write(dataURL);
var output = new Image();
output.src = dataURL;
output.onload = function(){
context.drawImage(output,20,150);
}

스트로크 후에는 통과합니다. canvas toDataURL 기능은 앞서 그린 내용을 url로 내보냅니다. , 그 뒤의 형식은 다음과 같습니다.

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA+8AAAKlCAYAAAC6zt2bAAAgAElEQVR4Xu3dfcj2d1kG8.....

요컨대, 이를 그림으로 변환하여 이 몇 개의 문장을 통해 내보내고 표시할 수 있습니다.

var output = new Image();
output.src = dataURL;
output.onload = function(){
   context.drawImage(output,20,150);
}

위 내용은 Html5 Canvas 사전 학습 노트(11) - 간단한 이미지 조작 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!