【HTML5】Canvas图像

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

把一幅图像放置到画布上, 使用以下方法:

drawImage(Img,x,y);

注：这里的Img必须是一个图像对象。

显示一个canvas图像：

<!DOCTYPE html><html> <head> <title>picture.html</title> <meta name="keywords" content="keyword1,keyword2,keyword3"> <meta name="description" content="this is my page"> <meta name="content-type" content="text/html; charset=UTF-8">  </head> <body><p>画布:</p><canvas id="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;">您的浏览器不支持 HTML5 canvas 标签。</canvas><script>var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");img = new Image();img.src="scream.jpg";img.onload = function(){ ctx.drawImage(img,10,10);}</script> </body></html>
注：getContext("2d");是一个内置的HTML5对象，拥有多种绘制路径、矩形、圆形及添加图形的方法。

canvas图像与<img>标签显示图像对比：
<!DOCTYPE html><html> <head> <title>picture.html</title> <meta name="keywords" content="keyword1,keyword2,keyword3"> <meta name="description" content="this is my page"> <meta name="content-type" content="text/html; charset=UTF-8">  </head> <body><p>Image to use:</p><img id="scream" src="scream.jpg" alt="The Scream" width="220" height="277"><p>Canvas:</p><canvas id="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;">您的浏览器不支持 HTML5 canvas 标签。</canvas><script>var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");var img=document.getElementById("scream");img.onload = function() {ctx.drawImage(img,10,10);}</script> </body></html>