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()
.
精彩评论