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. 士兵杀敌(三)_RMQ(区间最值查询)

    士兵杀敌(三) 时间限制:2000 ms  |  内存限制:65535 KB 难度:5   描述 南将军统率着N个士兵,士兵分别编号为1~N,南将军经常爱拿某一段编号内杀敌数最高的人与杀敌数最低的人进 ...

  2. js的闭包

    一,关于js闭包的只是感觉很高大上似乎,对于学弱来说任何问题都是这样的,值得去钻研和提高. 资料上理解的都是关于js的闭包其实就是js的变量的作用域的灵活使用. 函数内部定义变量的时候,一定要用 va ...

  3. BZOJ 3527: [ZJOI2014]力(FFT)

    BZOJ 3527: [ZJOI2014]力(FFT) 题意: 给出\(n\)个数\(q_i\),给出\(Fj\)的定义如下: \[F_j=\sum \limits _ {i < j} \fra ...

  4. Redis集群(主从模式)

    主从模型   在Redis的集群当中,每个节点(实例)都有一个身份:Master或者Slave,Master:主要负责数据写入,Slave一般提供数据读取,Master与Slave之间是一对多关系,M ...

  5. ansible笔记(9):常用模块之包管理模块

    ansible笔记():常用模块之包管理模块 yum_repository模块 yum_repository模块可以帮助我们管理远程主机上的yum仓库. 此处我们介绍一些yum_repository模 ...

  6. Clean ThreadLocals

    A method to clean ThreadLocal private void cleanThreadLocals() { try { // Get a reference to the thr ...

  7. Angular2入门:TypeScript的类型 - 数组解构

  8. 百度api查询多个地址的经纬度的问题

    在使用百度api查询多个地址的经纬度的时候,由于百度api提供的经纬度查询方法是回调函数,并且后续操作必须等经纬度获取完成才能进行,问题就存在于怎么判断所有地点是否都回调完成了,问了之前的一个前端大佬 ...

  9. Java_8排序(冒泡排序和选择排序)

    1.选择排序 package demo1; public class Demo1 { public static void main(String[] args) { int[] arr= {23,5 ...

  10. burpsuit常用功能

    1.生成GET数据包:复制url -> 打开burp -> repeater -> 右键paste url as request 2.生成POST数据包:生成一个GET数据包 -&g ...