当前阅读教程:HTML5入门电子教程 > Canvas 图像 | |
阅读(22555525) 收藏 赞(5685) 分享 | |
上一篇: Canvas 渐变 | 下一篇: HTML5 基础标签 |
把一幅图像放置到画布上, 使用以下方法: drawImage(image,x,y) 把一幅图像放置到画布上。下面我们来看下在网页中的效果,示例 代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>Canvas - 图像</title> </head> <body>
<p>原始图片:</p> <img id="scream" src="img/book.jpg" alt="The Scream" width="220"><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> 效果如图7-10。 |
|
上一篇: Canvas 渐变 | 下一篇: HTML5 基础标签 |