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 相关文章推荐
推荐10个CSS3 制作的创意下拉菜单效果
Feb 11 HTML / CSS
初探CSS3中的calc()功能
Jul 14 HTML / CSS
CSS3实现缺角矩形,折角矩形以及缺角边框
Dec 20 HTML / CSS
html5 button autofocus 属性介绍及应用
Jan 04 HTML / CSS
HTML5 Canvas实现平移/放缩/旋转deom示例(附截图)
Jul 04 HTML / CSS
HTML5 的新的表单元素(datalist/keygen/output)使用介绍
Jul 19 HTML / CSS
html5图片上传预览示例分享
Apr 14 HTML / CSS
HTML5所有标签汇总及标签意义解释
Mar 12 HTML / CSS
移动端Html5页面生成图片解决方案
Aug 07 HTML / CSS
html5 外链式实现加减乘除的代码
Sep 04 HTML / CSS
CSS实现fullpage.js全屏滚动效果的示例代码
Mar 24 HTML / CSS
VW、VH适配移动端的解决方案与常见问题
May 21 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 错误处理经验分享
2011/10/11 PHP
我的php学习笔记(毕业设计)
2012/02/21 PHP
PHP中通过HTTP_USER_AGENT判断是否为手机移动终端的函数代码
2013/02/14 PHP
thinkphp学习笔记之多表查询
2014/07/28 PHP
Zend Framework教程之Zend_Form组件实现表单提交并显示错误提示的方法
2016/03/21 PHP
TopList标签和JavaScript结合两例
2007/08/12 Javascript
php上传图片并给图片打上透明水印的代码
2010/06/07 Javascript
jquery在IE、FF浏览器的差别详细探讨
2013/04/28 Javascript
javascript内存管理详细解析
2013/11/11 Javascript
jQuery实现点击文本框弹出热门标签的提示效果
2013/11/17 Javascript
jQuery选择id属性带有点符号元素的方法
2015/03/17 Javascript
使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果
2016/10/17 Javascript
jQuery正则验证注册页面经典实例
2017/06/10 jQuery
微信小程序 rich-text的使用方法
2017/08/04 Javascript
利用Javascript实现一套自定义事件机制
2017/12/14 Javascript
基于wordpress的ajax写法详解
2018/01/02 Javascript
webpack-dev-server自动更新页面方法
2018/02/22 Javascript
对vue 键盘回车事件的实例讲解
2018/08/25 Javascript
Vue 通过自定义指令回顾v-内置指令(小结)
2018/09/03 Javascript
微信小程序动态增加按钮组件
2018/09/14 Javascript
JS中getElementsByClassName与classList兼容性问题解决方案分析
2019/08/07 Javascript
Element-UI 使用el-row 分栏布局的教程
2020/10/26 Javascript
jQuery实现全选按钮
2021/01/01 jQuery
python内存管理分析
2015/04/08 Python
Python selenium实现微博自动登录的示例代码
2018/05/16 Python
python 编写简单网页服务器的实例
2018/06/01 Python
在python中使用xlrd获取合并单元格的方法
2018/12/26 Python
详解python3 + Scrapy爬虫学习之创建项目
2019/04/12 Python
pandas 对日期类型数据的处理方法详解
2019/08/08 Python
Python从入门到精通之环境搭建教程图解
2019/09/26 Python
使用Matplotlib绘制不同颜色的带箭头的线实例
2020/04/17 Python
Python使用grequests并发发送请求的示例
2020/11/05 Python
SHEIN香港:价格实惠的女性时尚服装
2018/08/14 全球购物
Yummie官方网站:塑身衣和衣柜必需品
2019/10/29 全球购物
副职竞争上岗演讲稿
2014/05/12 职场文书
Python中的 No Module named ***问题及解决
2022/07/23 Python