html5使用drawimage()方法绘制图像.pdfVIP

一、绘制图像 使用 drawimage() 方法绘制图像。绘图环境提供了该方法的三个不同版本。 drawimage(image,x,y) ： 在 canvas 中(x,y) 处绘制图片。 drawimage(image,x,y,width,height) ： 在 canvas 中(x,y) 处绘制图片，并将其缩放到指定 的宽度和高度。 drawimage(image,sourcex,sourcey,sourcewidth,sourceheight,x,y,width,height) ： 从图片中 切割出一个矩形区域 (sourcex,sourcey,sourcewidth,sourceheight) ，缩放到指定的宽度和高度， 并在 canvas 中(x,y) 绘制出来。 二、 lt;imggt; 标签 绘制图片前，还需要将图片加载到浏览器中。这里我们仅仅在 canvas 标签后面添加一 个lt;imggt; 标签。 lt;img src = tk.jpg id = tkjpggt; 三、绘制图片 代码如下 : lt;!doctype htmlgt; lt;htmlgt; lt;headgt; lt;meta http-equiv=content-type content=text/html; charset = utf-8gt; lt;titlegt;html5lt;/titlegt; lt;script type=text/javascript charset = utf-8gt; //这个函数将在页面完全加载后调用 function pageloaded() { // 获取 canvas 对象的引用 ,注意 tcanvas 名字必须和下面 body 里面的 id 相同 var canvas = document.getelementbyid(tcanvas); // 获取该 canvas 的 2d 绘图环境 var context = canvas.getcontext(2d); // 获取图片对象的引用 var image = document.getelementbyid(tkjpg); //在 (0,50) 处绘制图片 context.drawimage(image,0,50); //缩小图片至原来的一半大小 context.drawimage(image,200,50,165/2,86/2); // 绘制图片的局部 (从左上角开始切割 0.7 的图片 ) context.drawimage(image,0,0,0.7*165,0.7*86,300,70,0.7*165,0.7*86); } lt;/scriptgt; lt;/headgt; lt;body onload=pageloaded();gt; lt;canvas width = 500 height = 200 id = tcanvas style = border:black 1px solid;gt; lt;!-- 如果浏览器不支持则显示如下字体 --gt; 提示：你的浏览器不支持 lt;canvasgt; 标签 lt;/canvasgt; lt;img src = tk.jpg id = tkjpggt; lt;/bodygt; lt;/htmlgt; 更多信息请查看 IT 技术专栏