HTML5 Canvas - 특정 컨텍스트를 채우는 방법

Question

Canvas에서 이미지가 그려지는 웹 사이트를 만든 다음 나중에 버튼을 눌러 특정 부분을 ctx.fill() 할 수 있습니다. 색상. 나는 내가 원하는 모양이 아닌 가장 최근에 생성 된 모양 만 ctx.fill() 할 수있는 문제를 겪고 있습니다.

다음은 예입니다. 이 코드에서는 (live at http://build.rivingtondesignhouse.com/piol/test/) 첫 번째 사각형을 그린 다음 스택에 save() 한 다음 두 번째 사각형을 그립니다 (그리고 저장하지 않음). 그러면 fill() 함수가 호출 될 때 첫 번째 사각형을 복원()하고 다른 패턴으로 ctx.fill()을 수행하려고합니다. 그것은 작동하지 않습니다!

사실 실제로이 복잡한 모양의 회색 부분을 사용자가 이미지를 그린 후 사용자가 선택한 색상으로 채우려고합니다. 그러나이 기술은 동일하다고 생각합니다. (http://build.rivingtondesignhouse.com/piol/test/justTop.html)

미리 도움 주셔서 감사합니다 !!!

여기에 코드입니다 :

<script type="text/javascript"> 
var canvas; 
var ctx; 

function init() { 
    canvas = document.getElementById("canvas"); 
    ctx = canvas.getContext("2d"); 
    draw(); 
} 


function draw() { 
    ctx.fillStyle = '#FA6900'; 
    ctx.shadowOffsetX = 5; 
    ctx.shadowOffsetY = 5; 
    ctx.shadowBlur = 4; 
    ctx.shadowColor = 'rgba(204, 204, 204, 0.5)'; 
    ctx.fillRect(0,0,15,150); 
    ctx.save(); 

    ctx.fillStyle = '#E0E4CD'; 
    ctx.shadowOffsetX = 10; 
    ctx.shadowOffsetY = 10; 
    ctx.shadowBlur = 4; 
    ctx.shadowColor = 'rgba(204, 204, 204, 0.5)'; 
    ctx.fillRect(30,0,30,150); 
} 

function fill(){ 
    var image = new Image(); 
    image.src = "http://www.html5canvastutorials.com/demos/assets/wood-pattern.png"; 
    image.onload = drawPattern; 
    function drawPattern() { 
     ctx.restore(); 
     ctx.fillStyle = ctx.createPattern(image, "repeat"); 
     ctx.fill(); 
    } 
} 

init(); 

Answer 1

우리가 내가 질문에 대답하기 전에 정리해야 할 몇 가지 오해가있다.

save() 및 restore() 캔버스 비트 맵을 저장 및 복원하지 마십시오. 대신 캔버스 컨텍스트에 설정된 모든 속성을 저장하고 복원합니다. 예를

ctx.fillStyle = 'red'; 
ctx.save(); // save the fact that the fillstyle is red 
ctx.fillStyle = 'blue'; // change the fillstyle 
ctx.fillRect(0,0,5,5); // draws a blue rectangle 
ctx.restore(); // restores the old context state, so the fillStyle is back to red 
ctx.fillRect(10,0,5,5); // draws a red rectangle // draws a red rectangle 

를 들어

는 here 그 코드가 라이브를 참조하십시오.

따라서 save()을 호출하여 사각형 또는 그려진 것이 저장되지 않습니다. 비트 맵을 저장할 수있는 유일한 방법은 다른 캔바스 (또는 anotherCanvasContext.drawImage(canvasIWantToSave, 0, 0))를 사용하거나 전체 장면을 적절한 변경 사항으로 다시 그릴 수있는 충분한 정보를 저장하는 것입니다.

다음은 다시 구조 수있는 한 가지 방법 코드를 예입니다 그래서 당신이 원하는 것을 : http://jsfiddle.net/xwqXb/