开发者

jQuery canvas addImage dynamically

I have a canvas element and I need to add images dynamically.

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

The html code is the next:

<div id="divCanvas开发者_运维百科">
        <canvas id="myCanvas" width="322px" height="450px">Canvas not suported</canvas>
</div>


Something like this?

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;
}

Used jQuery because you have it tagged as such. Not sure what issue your running into exactly, but to get the actual DOM element to draw onto the canvas you have to use .get().

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜