| 标题 | html5使用drawimage()方法绘制图像 |
| 内容 | 一、绘制图像 使用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)绘制出来。 二、<img>标签 绘制图片前，还需要将图片加载到浏览器中。这里我们仅仅在canvas标签后面添加一个<img>标签。 <img src = tk.jpg id = tkjpg> 三、绘制图片 代码如下: <!doctype html> <html> <head> <meta http-equiv=content-type content=text/html; charset = utf-8> <title>html5</title> <script type=text/javascript charset = utf-8> //这个函数将在页面完全加载后调用 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); } </script> </head> <body onload=pageloaded();> <canvas width = 500 height = 200 id = tcanvas style = border:black 1px solid;> <!--如果浏览器不支持则显示如下字体--> 提示：你的浏览器不支持<canvas>标签 </canvas> <img src = tk.jpg id = tkjpg> </body> </html> |
| 随便看 |
|
在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。