Question

我有一个canvas元素，我需要动态添加图片。

function draw(){
var ctx = document.getElementById('myCanvas').getContext('2d');
ctx.drawImage("img/image1.jpg",0,0,200,200);
}

html代码是下一个：

<div id="divCanvas">
        <canvas id="myCanvas" width="322px" height="450px">Canvas not suported</canvas>
</div>

Answer 1

这样的东西？

<强> Live Demo

var startX = 0,
    startY = 0;

$('#clicker').click(function(){
    draw($('#testImage'));
});

function draw(image){
    image = image.get(0);
    var ctx = document.getElementById('myCanvas').getContext('2d');
    ctx.drawImage(image,startX,startY,20,20);
    startY+=20;
}

使用jQuery，因为你已将其标记为这样。不确定您遇到什么问题，但是为了让实际的DOM元素绘制到画布上，您必须使用.get()。

jQuery canvas addImage动态

1 个答案: