미리 정의 된 이미지가있는 HTML5 캔버스

Question

최근에 저는 HTML5 Canvas에서 작업하기 시작했습니다. 내가 생성 할 수 있습니다 그 후 등

, 일부 선, 도형을 그릴 것입니다

내가 몸 차트 이미지 (미리 정의 된 이미지)와 캔버스를로드하고있어 그 사용에 다음과 같이 나는 문제를했습니다

그러나 여기서는 사용자 (선, 도형)가 PNG 이미지로 그려주는 요소 만 생성합니다. 미리 정의 된 캔버스 배경 이미지는 사용하지 않습니다.

캔버스 배경 이미지와 사용자 입력 그리기 요소를 모두 포함해야하는 PNG 이미지를 생성해야합니다.

어떻게 하시겠습니까?

Answer 1

봅니다 실제로 이러한 기능을 활용, 캔버스에 당신이 이미지를 그립니다 : 당신이 지금 그것을 저장하려고하면

var canvas = document.getElementById("MyCanvas"); 
    var img = new Image(); 
    img.src = 'pathToYourImageHere'; 
    canvas.drawImage(img,0,0); /* 0,0 is x and y from the top left */ 

, 또한 배경 이미지를 저장해야합니다.

편집 : 귀하의 코멘트에 응답에서 :

당신은 두 개의 서로 다른 캔버스를 사용하여 레이어 문제를 circument 수 있습니다. 하나는 이미지 용이고 다른 하나는 그림 용입니다. 그런 다음 절대 위치 지정을 사용하여 서로 겹치게하십시오. 여기에서 자세한 내용을보실 수 있습니다 : Save many canvas element as image

EDIT2 : 그러나 다음 코드는 먼저 이미지를 그릴 다음 호를 그리하고, 레이어가 잘 될 것입니다 때문에 실제로는 레이어 문제가 안 :

var canvas = document.getElementById("myCanvas"); 
var context = canvas.getContext("2d"); 
var imageObj = new Image(); 
imageObj.src = "somePathToAnImage"; 
context.drawImage(imageObj, 50, 50); 

var x = canvas.width/2; 
var y = canvas.height/2; 
var radius = 75; 
var startAngle = 1.1 * Math.PI; 
var endAngle = 1.9 * Math.PI; 
var counterClockwise = false; 

context.beginPath(); 
context.arc(x, y, radius, startAngle, endAngle, counterClockwise); 
context.lineWidth = 15; 
// line color 
context.strokeStyle = "red"; 
context.stroke(); 

레이어링이 좋지만 배경이없는 경우에만 그림을 저장하려는 경우에 대비하여 두 개의 캔버스를 사용하는 것이 좋습니다. 언제나 새로운 캔버스에 둘 다 저장하고 저장할 수 있습니다. 한 캔버스 만 사용하면 배경과 도면을 분리하는 데 어려움을 겪을 수 있습니다.

Answer 2

이미지로드 시간이 필요하기 때문에 onload 기능을 사용해야합니다.

imgObj.onload = function() { context.drawImage(imageObj, 50, 50); imgLoaded = true;} 
if (imgLoaded) { /*you draw shapes here */ }