jQuery Canvas 动态添加图像

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 元素绘制到 Canvas 上，您必须使用 .get()。