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使用方法的更多相关文章

  1. HTML5标签canvas制作平面图

    摘要: HTML5规范已经完成了,互联网上已经有数不清的站点使用了HTML5.从现在开始研究HTML5,本文是自己在学习canvas过程中的记录,以备后需. 历史: 这个 HTML 元素是为了客户端矢 ...

  2. HTML5标签canvas图像处理

    摘要: canvas可以读取图片后,使用drawImage方法在画布内进行重绘.本文介绍canvas的图像处理 drawImage drawImage() 方法在画布上绘制图像.画布或视频.drawI ...

  3. HTML5标签canvas制作动画

    摘要: canvas可以绘制图像,自然而然的就可以制作动画,因为动画的每一帧都是图像.我们可以利用javascript的setInterval函数来实现动画效果. 下面是一个例子,小圆绕着红点圆心不停 ...

  4. HTML5 canvas绘图基本使用方法

    <canvas></canvas>是HTML5中新增的标签,用于绘制图形,实际上,这个标签和其他的标签一样,其特殊之处在于该标签可以获取一个CanvasRenderingCon ...

  5. 完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法

    完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法   HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页 ...

  6. 解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法

    方式一:Coding JavaScript <!--[if lt IE9]> <script> (function() { var e = "abbr, articl ...

  7. HTML5新增Canvas标签及对应属性、API详解（基础一）

    知识说明: HTML5新增的canvas标签,通过创建画布,在画布上创建任何想要的形状,下面将canvas的API以及属性做一个整理,并且附上时钟的示例,便于后期复习学习!Fighting! 一.标签 ...

  8. 完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法zt

    HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单. HTML5的新标签元素有: <header&g ...

  9. 低版本浏览器支持HTML5标签的方法

    最近刷了一道面试题,是关于低版本浏览器支持HTM5标签的写法,在网上找了一些,都行之有效,但是缺少整体总结,所以在这里总结一下,方便其他人过来阅读. IE低版本需要支持HTML5标签: 方法1.传统引 ...

随机推荐

  1. Arcgis &ndash;&gt;ArcToolBox 有些工具不能用，没有许可

    问题描述 错误信息: You do not have the necessary license to execute the selected tool   我3D Analyst是有许可的.   ...

  2. iOS应用崩溃日志分析

    转自raywenderlich   作为一名应用开发者,你是否有过如下经历?   为确保你的应用正确无误,在将其提交到应用商店之前,你必定进行了大量的测试工作.它在你的设备上也运行得很好,但是,上了应 ...

  3. 【技巧】centos6.5_yum本地安装mysql

    环境:centos6.5 .64位.mysql5.6.3 有鉴于此前在网上得来的Yum换源安装mysql,成功是可以成功,就是会受网速等影响,有时候会因为yum下载rpm包很慢以致超时失败. 而且考虑 ...

  4. iOS: 学习笔记, 使用FMDatabase操作sqlite3

    使用FMDatabase操作sqlite3数据库非常简单和方便 // // main.m // iOSDemo0602_sqlite3 // // Created by yao_yu on 14-6- ...

  5. 多线程相互排斥--mutex(二)

    不知道大家对多线程或多进程间的同步相互排斥的控制机制了解的怎么样,事实上有非常多种方法能够实现这个目的,可是这些方法事实上由4种最主要的方法实现.这4种最主要的方法详细定义例如以下:在这有讲得不正确的 ...

  6. Windows10下安装Oracle 11g 64位的详细步骤

    直接附上我整理后的Word版<Windows10下安装Oracle 11g 64位的详细步骤>下载地址,提取码:9vak. 参考文献: 1.Win10 64位系统下安装Oracle11g详 ...

  7. MySQL 5.7.14 net start mysql 服务无法启动

    解决方法: 1.mysqld  --initialize 初始化data目录 2.重新输入net start mysql命令 补充,服务停止的方法:net stop mysql

  8. jQueryPrint 的简单使用

    jQueryPrint 的简单使用 一.为什么要使用 jQueryPrint?  1.当然是方便的要死尼,相比于其他的方法. 2.打印整个页面或者局部页面都是非常的可以的,使用很方便. 3.如果要导出 ...

  9. iOS 创建一个App目录结构

    Class:存放的是App中所有的模块功能 Base:存放一些基类,比如BaseViewController,BaseModel等,共性直接在基类中去修改 Vendor:三方,因为我的项目中使用coc ...

  10. kylin3

    RDBMS: 关系数据库管理系统(Relational Database Management System),是将数据组织为相关的行和列的系统,而管理关系数据库的计算机软件就是关系数据库管理系统, ...