html5标签canvas函数drawImage使用方法
html5中标签canvas,函数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)绘制出来。
其中image可以是一个页面中现有的dom元素,使用document.getElementById()获取的;
或者使用document.createElement("img")新创建元素,但赋值src后需要监听onload事件,回调里调用drawImage,如果立即调用未加载完成时,会画不出来图片。
html5标签canvas函数drawImage使用方法的更多相关文章
- HTML5标签canvas制作平面图
摘要: HTML5规范已经完成了,互联网上已经有数不清的站点使用了HTML5.从现在开始研究HTML5,本文是自己在学习canvas过程中的记录,以备后需. 历史: 这个 HTML 元素是为了客户端矢 ...
- HTML5标签canvas图像处理
摘要: canvas可以读取图片后,使用drawImage方法在画布内进行重绘.本文介绍canvas的图像处理 drawImage drawImage() 方法在画布上绘制图像.画布或视频.drawI ...
- HTML5标签canvas制作动画
摘要: canvas可以绘制图像,自然而然的就可以制作动画,因为动画的每一帧都是图像.我们可以利用javascript的setInterval函数来实现动画效果. 下面是一个例子,小圆绕着红点圆心不停 ...
- HTML5 canvas绘图基本使用方法
<canvas></canvas>是HTML5中新增的标签,用于绘制图形,实际上,这个标签和其他的标签一样,其特殊之处在于该标签可以获取一个CanvasRenderingCon ...
- 完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法
完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法 HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页 ...
- 解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法
方式一:Coding JavaScript <!--[if lt IE9]> <script> (function() { var e = "abbr, articl ...
- HTML5新增Canvas标签及对应属性、API详解(基础一)
知识说明: HTML5新增的canvas标签,通过创建画布,在画布上创建任何想要的形状,下面将canvas的API以及属性做一个整理,并且附上时钟的示例,便于后期复习学习!Fighting! 一.标签 ...
- 完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法zt
HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单. HTML5的新标签元素有: <header&g ...
- 低版本浏览器支持HTML5标签的方法
最近刷了一道面试题,是关于低版本浏览器支持HTM5标签的写法,在网上找了一些,都行之有效,但是缺少整体总结,所以在这里总结一下,方便其他人过来阅读. IE低版本需要支持HTML5标签: 方法1.传统引 ...
随机推荐
- windows的IIS下的负载均衡
来自http://www.cnblogs.com/allen0118/p/4294066.html 在大型Web应用系统中,由于请求的数据量过大以及并发的因素,导致Web系统会出现宕机的现象,解决这一 ...
- Servlet中的GET和POST之间的区别
自己的感悟: get和post这是http协议的两种方法,另外还有head, delete等 这两种方法有本质的区别,get只有一个流,参数附加在url后,大小个数有严格限制且只能是字符串.post的 ...
- Python——str(字符串)内部功能介绍
str内部功能详解: class str(object): """ str(object='') -> str str(bytes_or_buffer[, enco ...
- [html5] 学习笔记-Canvas 绘制渐变图形与绘制变形图形
在 HTML5 中,使用 Canvas API 绘制图形的知识,可以对绘制图形进行处理,包含使用 Canvas API 绘制渐变图形,使用 Canvas API 的坐标轴变换处理功能绘制变形图形.其中 ...
- strlen出错
1.特别奇怪的错误 $url="https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid= ...
- linux lnmp搭建及解释
lnmp的搭建linux nginx mysql(mariaDB) php 安装mysql依赖:yum -y install cmake(cmake编译工具)yum -y install gcc gc ...
- 小试ImageMagik——开发篇
===================================================== ImageMagick的使用和开发的文章: 小试ImageMagik--使用篇 小试Imag ...
- js 常用正则表达式
1 用户名正则 //用户名正则,4到16位(字母,数字,下划线,减号) var uPattern = /^[a-zA-Z0-9_-]{4,16}$/; //输出 true console.log(uP ...
- MySQL个人学习笔记
目录: 数据库的基本操作 创建.删除用户及授权 数据库字符校对集 创建.删除数据库和表 DML操作 DDL操作 索引 事务 一.数据库的基本操作 -- 选择要操作的数据库 -- world:数据库名 ...
- Helix Server 支持的文件格式
比如,对于WMV格式的文件,访问路径可以是:mms://192.168.1.1/mov/music.wmv 对于rm格式的文件rtsp://192.168.1.1/mov/123.rm 但,比如对于格 ...