开发者

jQuery canvas addImage dynamically

开发者 https://www.devze.com 2023-04-07 20:45 出处:网络
I have a canvas element and I need to add images dynamically. function draw(){ var ctx = document.getElementById(\'myCanvas\').getContext(\'2d\');

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

精彩评论

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