HTML5使用drawImage()方法绘制图像
摘要：一、绘制图像使用drawImage()方法绘制图像。绘图环境提供了该方法的三个不同版本。drawImage(image,x,y)：在canv...
一、绘制图像
使用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">
三、绘制图片
复制代码
【HTML5使用drawImage()方法绘制图像】相关文章：
★ HTML5 Canvas画线技巧——实现绘制一个像素宽的细线
★ 调用HTML5的Canvas API绘制图形的快速入门指南
★ HTML5 video播放器全屏(fullScreen)方法实例
上一篇：
HTML5 创建canvas元素示例代码
下一篇：
HTML5游戏前端开发秘籍
相关阅读
网友关注
网友最新关注视频
- 【部编】人教版语文七年级下册《逢入京使》优质课教学视频+PPT课件+教案，辽宁省
- 【部编】人教版语文七年级下册《过松源晨炊漆公店（其五）》优质课教学视频+PPT课件+教案，辽宁省
- 《小学数学二年级下册》第二单元测试题讲解
- 外研版英语七年级下册module3 unit2第一课时
- 七年级英语下册 上海牛津版 Unit5
- 第12章 圆锥曲线_12.7 抛物线的标准方程_第一课时(特等奖)(沪教版高二下册)_T274713
- 【部编】人教版语文七年级下册《泊秦淮》优质课教学视频+PPT课件+教案，辽宁省
- 北师大版数学 四年级下册 第三单元 第二节 小数点搬家
- 8.练习八_第一课时(特等奖)(苏教版三年级上册)_T142692
- 外研版英语三起6年级下册（14版）Module3 Unit1
精品推荐
分类导航
网页设计子分类
最新HTML5教程学习