HTML5使用drawImage()方法绘制图像


Posted in HTML / CSS onJune 23, 2014

一、绘制图像

使用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>

四、绘制效果
HTML5使用drawImage()方法绘制图像 
五、附上原坦克素材
HTML5使用drawImage()方法绘制图像
HTML / CSS 相关文章推荐
CSS3 制作旋转的大风车(充满童年回忆)
Jan 30 HTML / CSS
详解CSS3 Media Queries中媒体属性的使用
Feb 29 HTML / CSS
CSS3不透明度实例讲解
Apr 26 HTML / CSS
CSS3制作圆角图片和椭圆形图片
Jul 08 HTML / CSS
css3 盒模型以及box-sizing属性全面了解
Sep 20 HTML / CSS
利用CSS3制作简单的3d半透明立方体图片展示
Mar 25 HTML / CSS
使用 css3 实现圆形进度条的示例
Jul 05 HTML / CSS
HTML5 用动画的表现形式装载图像
Mar 08 HTML / CSS
解决H5的a标签的download属性下载service上的文件出现跨域问题
Jul 16 HTML / CSS
利用HTML5中Geolocation获取地理位置调用Google Map API在Google Map上定位
Jan 23 HTML / CSS
简单介绍 http请求响应参数、无连接无状态、MIME、状态码、端口、telnet、curl
Mar 31 HTML / CSS
HTML中的表单Form实现居中效果
May 25 HTML / CSS
HTML5 CSS3打造相册效果附源码下载
Jun 16 #HTML / CSS
HTML5 CSS3实现一个精美VCD包装盒个性幻灯片案例
Jun 16 #HTML / CSS
HTML5调用手机摄像头拍照的实现思路及代码
Jun 15 #HTML / CSS
html5在移动端的屏幕适应问题示例探讨
Jun 15 #HTML / CSS
HTML5 创建canvas元素示例代码
Jun 04 #HTML / CSS
解决Firefox下不支持outerHTML问题代码分享
Jun 04 #HTML / CSS
html5小技巧之通过document.head获取head元素
Jun 04 #HTML / CSS
You might like
PHP多线程批量采集下载美女图片的实现代码(续)
2013/06/03 PHP
Ajax+PHP快速上手及简单应用说明
2013/07/24 PHP
使用PHP Socket写的POP3类
2013/10/30 PHP
PHP eval函数使用介绍
2013/12/08 PHP
PHP APC配置文件2套和参数详解
2014/06/11 PHP
PHP读取汉字的点阵数据
2015/06/22 PHP
yii2中添加验证码的实现方法
2016/01/09 PHP
PHP创建文件,并向文件中写入数据,覆盖,追加的实现代码
2016/03/25 PHP
Docker搭建自己的PHP开发环境
2018/02/24 PHP
laravel 关联关系遍历数组的例子
2019/10/10 PHP
Javascript让DEDECMS告别手写Tag
2014/09/01 Javascript
jQuery仿Flash上下翻动的中英文导航菜单实例
2015/03/10 Javascript
JavaScript实现的简单幂函数实例
2015/04/17 Javascript
js和jquery分别验证单选框、复选框、下拉框
2015/12/17 Javascript
jQuery事件的绑定、触发、及监听方法简单说明
2016/05/10 Javascript
Bootstrap基本模板的使用和理解1
2016/12/14 Javascript
webpack配置sass模块的加载的方法
2017/07/30 Javascript
使用vue构建移动应用实战代码
2017/08/02 Javascript
[01:18]一目了然!DOTA2DotA快捷操作对比第一弹
2014/07/01 DOTA
[01:16:12]完美世界DOTA2联赛PWL S2 FTD vs Inki 第一场 11.21
2020/11/23 DOTA
举例讲解如何在Python编程中进行迭代和遍历
2016/01/19 Python
pandas 选择某几列的方法
2018/07/03 Python
python模拟斗地主发牌
2020/04/22 Python
Python中的With语句的使用及原理
2020/07/29 Python
Pytorch之Tensor和Numpy之间的转换的实现方法
2020/09/03 Python
scrapy利用selenium爬取豆瓣阅读的全步骤
2020/09/20 Python
python 实现单例模式的5种方法
2020/09/23 Python
python把一个字符串切开的实例方法
2020/09/27 Python
CSS类名支持中文命名的示例
2014/04/04 HTML / CSS
技能比赛获奖感言
2014/02/14 职场文书
《问银河》教学反思
2014/02/19 职场文书
2014年社区植树节活动方案
2014/02/28 职场文书
商场租赁意向书
2014/07/30 职场文书
2016年最美孝心少年事迹材料
2016/02/26 职场文书
Python使用random模块实现掷骰子游戏的示例代码
2021/04/29 Python
SQL SERVER中的流程控制语句
2022/05/25 SQL Server