如何將同一對象的多個圖像繪製到單個畫布上

我想用同一圖像多次繪製到畫布上，換句話說，我想應用代碼，當我單擊畫布區域時會生成圖像當我再次點擊其他地方時，它會產生另一個圖像等等。如何將同一對象的多個圖像繪製到單個畫布上

<canvas></canvas>

但是，當試圖再次繪製它取代了之前繪製的圖像，然後繪製新的圖像。而不是將以前繪製的圖像保留在畫布上。

function drawAll(){ 
    context.drawImage(imageObj, 0, 0, imageObj.width, imageObj.height,0, 0, 700, 618); 

    if(coordinates.length > 0){ 
    coordinates.map((coord, key) =>{ 
    context.beginPath(); 

    context.moveTo(coord.startX, coord.startY); 

    context.lineTo(coord.toX,coord.toY); 

    context.strokeStyle="rgb(226, 104, 36)"; 
    context.lineWidth=2; 
    context.stroke();     
     }); 
    } 

    if(entry){ 
     context.drawImage(imageObjBall, entry.posX-8, entry.posY-8, 16, 16); 
    } 
}

編輯：嘿，不好意思忘記插入此位到這裏

function handleClick(e){ 
    if(!isDrawing && prize_id != null){ 
    var pos = getMousePos(canvas, e); 
    mouseX = pos.x; 
    mouseY = pos.y; 

    $x_id=`#cor_x_${prize_id}`; 
    $y_id=`#cor_y_${prize_id}`; 

    context.clearRect(0, 0, 700, 618); 

    context.drawImage(imageObjBall, mouseX-8, mouseY-8, 16, 16); 

    entry={posX:mouseX,posY:mouseY}; 

    $($x_id).text(mouseX); 
    $($y_id).text(mouseY);   
    drawAll(); 
    } 
}

注意：這是在laravel 5，有這個之外更多的代碼，但我感覺這是必要的剪斷需要你能夠幫助我，但如果您需要更多，請讓我編輯一些更多的代碼到這個後

來源

2017-05-08 Brendon Grundlingh

你在簡短的問題：「如何添加其他圖片到現有的畫布對象？」吧？ – reporter

是的，但同一個對象，而不是創建一個全新的。所以多「imageObjBall」 –

我剛剛編輯帖子，因爲我忘了插入一些重要的代碼，以及它的功能如何。 –

要使用單個圖像對象將多個圖像繪製到畫布上，請通過new Image()創建圖像對象並相應地設置src屬性。

或者，您也可以在HTML代碼中編寫<img src="">標記，並通過document.querySelector獲取對該標記的引用。

有一件重要的事情需要考慮：在您撥打drawImage之前，即使沒有加載時間（例如localhost或data-url），您也必須確保圖像已加載。

在我的例子中，我通過不立即開始動畫來解決這個問題。相反，requestAnimationFrame循環在圖像onload事件中啓動。

var R = Math.random 
 
var a = document.getElementById("a") 
 
var W = a.width = 400 
 
var H = a.height = 300 
 
var c = a.getContext("2d") 
 

 
var img = new Image() 
 
img.src = 'https://assets-cdn.github.com/images/icons/emoji/unicode/1f60d.png' 
 

 

 
function loop() { 
 
    var rndX = (R()*W)|0 
 
    var rndY = (R()*H)|0 
 
    c.drawImage(img, rndX, rndY) 
 
    requestAnimationFrame(loop) 
 
} 
 

 
img.onload=function() { 
 
    loop() 
 
}

body { 
 
    margin: 0; 
 
    overflow: hidden; 
 
} 
 

 
canvas { 
 
    width: 100%; 
 
    height: 100%; 
 
}

<canvas id="a"></canvas>

來源

2017-05-08 13:34:04 terabaud

你的代碼很好:)。但我不知道如何與我的實現它，我確實使用 var imageObjBall = new Image（）; imageObjBall.src ='/ images/golfball_small.png'; 我沒有使用循環。我怎麼用onclick來模擬這個？ –

如何將同一對象的多個圖像繪製到單個畫布上

回答

相關問題