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. 使用border做三角形

    网站上经常会使用一些三角形,除了图片的方式,实际上利用border我们可以做出纯CSS的三角形.我们知道border是个边抖可以单独设置,当四个边相交的时候他们是什么时候改变的? .t0{ margi ...

  2. yii2的form表单样式怎么灵活控制呢？

    <?php $form = ActiveForm::begin(['id' => 'login-form', 'fieldConfig'=>[ 'template'=> &qu ...

  3. C语言操作文件

    #include <stdio.h> struct stu{ ]; int num; int age; ]; }boya[],boyb[]; struct stu *pa,*pb; mai ...

  4. jQuery 遍历(上)

    目录: 一:定义二:遍历 DOM三:jQuery 参考手册 - 遍历 定义:什么是遍历?jQuery 遍历,意为"移动",用于根据其相对于其他元素的关系来"查找" ...

  5. C函数及指针学习2

    1.break  永久终止循环,continue 结束当前循环 2.switch 每个case标签要有唯一值,(且为常量或常量表达式) 不加break 时执行流会贯穿整个case 标签 3 赋值操作符 ...

  6. 【开源项目9】ImageLoaderConfiguration详解

    ImageLoader类中包含了所有操作.他是一个单例,为了获取它的一个单一实例,你需要调用getInstance()方法.在使用 ImageLoader来显示图片之前,你需要初始化它的配置-Imag ...

  7. 安装nging,php

    http://www.zihou.me/html/2010/11/14/2658.html http://www.linuxidc.com/Linux/2011-04/34964p4.htm http ...

  8. 【剑指offer】Q40：数组中出现一次的数

    书里面关于分类的推断有些麻烦,通过某一位为0为1来对数组元素进行分类.假如第3位为1.那么也就是元素x & 8 等于或不等于0,所以不是必需非的用第几位去推断. def once(array) ...

  9. ResultSet.TYPE_SCROLL_SENSITIVE问题（完全摘自他人）

    摘自CSDN博客 我们先来做一个例子,在例子中我用的是mysql-essential-5.1.30-win32版. 来跟我做以下几个命令: mysql> create database axma ...

  10. Linux进程/内核模型

    内核必须实现一组服务和相应的接口,应用程序则可以使用这些接口,而不是直接与硬件打交道. Linux内核主要由以下5个子系统组成:进程调度.内存管理.虚拟文件系统.进程间通信以及设备驱动. 在这个组成中 ...