HTML5 canvas drawImage()

Your browser does not support the HTML5 canvas tag.

JavaScript:

var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); var img=document.getElementById("tulip"); ctx.drawImage(img,10,10);

Internet Explorer 9FirefoxOperaChrome Safari drawImage()

Internet Explorer 8 <canvas>

÷

drawImage()

drawImage() Щ/硣

JavaScript 1

λ

context.drawImage(img,x,y); JavaScript 2

λ涨

context.drawImage(img,x,y,width,height); JavaScript 3

λе

context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

img 涨

sx е x λá

sy е y λá

swidth

sheight

x x λá

y y λá

width С

height С

1

жλ涨

Your browser does not support the HTML5 canvas tag.

JavaScript:

var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); var img=document.getElementById("tulip"); ctx.drawImage(img,10,10,240,160); 2

ежλ

Your browser does not support the HTML5 canvas tag.

JavaScript:

var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); var img=document.getElementById("scream"); ctx.drawImage(img,90,130,90,80,20,20,90,80); 3 Your browser does not support the HTML5 canvas tag.

JavaScript 20

var v=document.getElementById("video1"); var c=document.getElementById("myCanvas"); ctx=c.getContext('2d'); v.addEventListener('play',function() {var i=window.setInterval(function() {ctx.drawImage(v,0,0,270,135)},20);},false); v.addEventListener('pause',function() {window.clearInterval(i);},false); v.addEventListener('ended',function() {clearInterval(i);},false);