首先看html5.js

/**
@param {Element} img_elem
@param {Number} dx_or_sx
@param {Number} dy_or_sy
@param {Number} [dw_or_sw]
@param {Number} [dh_or_sh]
@param {Number} [dx]
@param {Number} [dy]
@param {Number} [dw]
@param {Number} [dh]
*/
CanvasRenderingContext2D.prototype.drawImage = function(img_elem,dx_or_sx,dy_or_sy,dw_or_sw,dh_or_sh,dx,dy,dw,dh) {};
再底层
drawImage(image: HTMLElement, offsetX: number, offsetY: number, width?: number, height?: number, canvasOffsetX?: number, canvasOffsetY?: number, canvasImageWidth?: number, canvasImageHeight?: number): void;

其实平时调用支持三种传参
void ctx.drawImage(image, dx, dy);//dx,dy决定了生成的图像与画布的间隔距离
void ctx.drawImage(image, dx, dy, dWidth, dHeight);//dWidth, dHeight决定了生成图片的宽高,默认是img.width,img.height
void ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);// dWidth, dHeight是对生成图片的缩放值


  image
绘制到上下文的元素。允许任何的 canvas 图像源(CanvasImageSource),例如:CSSImageValueHTMLImageElementSVGImageElementHTMLVideoElementHTMLCanvasElementImageBitmap 或者OffscreenCanvas
  dx
目标画布的左上角在目标canvas上 X 轴的位置。生成图像与画布坐标第一象限的间隔(y轴)
  dy
目标画布的左上角在目标canvas上 Y 轴的位置。生成图片与画布坐标第四象限的间隔(x轴)
  dWidth可选
在目标画布上绘制图像的宽度。 允许对绘制的图像进行缩放。 如果不说明, 在绘制时图片宽度不会缩放。
  dHeight可选
在目标画布上绘制图像的高度。 允许对绘制的图像进行缩放。 如果不说明, 在绘制时图片高度不会缩放。
  sx可选
需要绘制到目标上下文中的,源图像的矩形选择框的左上角 X 坐标。
  sy可选
需要绘制到目标上下文中的,源图像的矩形选择框的左上角 Y 坐标。
  sWidth可选
需要绘制到目标上下文中的,源图像的矩形选择框的宽度。如果不说明,整个矩形从坐标的sx和sy开始,到图像的右下角结束。
  sHeight可选
需要绘制到目标上下文中的,源图像的矩形选择框的高度。

抛出异常

INDEX_SIZE_ERR
如果 canvas 或者图像矩形区域的宽度或高度为0 。
INVALID_STATE_ERR
图像没有数据。
TYPE_MISMATCH_ERR
提供的原始元素不支持。
NS_ERROR_NOT_AVAILABLE
图像尚未加载。使用.complete === true.onload确定何时准备就绪。
 

canvas.drawImage()方法详解的更多相关文章

  1. 【CITE】DrawImage方法详解(转)

    Image和Bitmap类概述 GDI+的Image类封装了对BMP.GIF.JPEG.PNG.TIFF.WMF(Windows元文件)和EMF(增强WMF)图像文件的调入.格式转换以及简单处理的功能 ...

  2. canvas createPattern()方法详解

    createPattern作用 createPattern() 方法在指定的方向内重复指定的元素. 元素可以是图片.视频,或者其他 <canvas> 元素. 被重复的元素可用于绘制/填充矩 ...

  3. canvas绘图API详解

    canvas绘图API详解 1.context的状态 矩阵变换属性 当前剪辑区域 context的其他状态属性: strokeStyle, fillStyle, globalAlpha, lineWi ...

  4. Android中Canvas绘图基础详解(附源码下载) (转)

    Android中Canvas绘图基础详解(附源码下载) 原文链接  http://blog.csdn.net/iispring/article/details/49770651   AndroidCa ...

  5. session的使用方法详解

    session的使用方法详解 Session是什么呢?简单来说就是服务器给客户端的一个编号.当一台WWW服务器运行时,可能有若干个用户浏览正在运正在这台服务器上的网站.当每个用户首次与这台WWW服务器 ...

  6. Kooboo CMS - Html.FrontHtml[Helper.cs] 各个方法详解

    下面罗列了方法详解,每一个方法一篇文章. Kooboo CMS - @Html.FrontHtml().HtmlTitle() 详解 Kooboo CMS - Html.FrontHtml.Posit ...

  7. HTTP请求方法详解

    HTTP请求方法详解 请求方法:指定了客户端想对指定的资源/服务器作何种操作 下面我们介绍HTTP/1.1中可用的请求方法: [GET:获取资源]     GET方法用来请求已被URI识别的资源.指定 ...

  8. ecshop后台增加|添加商店设置选项和使用方法详解

    有时候我们想在Ecshop后台做个设置.radio.checkbox 等等来控制页面的显示,看看Ecshop的设计,用到了shop_config这个商店设置功能 Ecshop后台增加|添加商店设置选项 ...

  9. (转)Spring JdbcTemplate 方法详解

    Spring JdbcTemplate方法详解 文章来源:http://blog.csdn.net/dyllove98/article/details/7772463 JdbcTemplate主要提供 ...

随机推荐

  1. 洛谷P4281 紧急集合 / 聚会

    LCA 题目要求找离三个点最近的点,我们先看两个点的情况,自然是找LCA,那么三个点的时候是否与LCA有关呢? 显然,离三个点最近的点一定是在这三个点联通的简单路径上. 可以简单证明一下,假设某个点离 ...

  2. 「Link-Cut Tree」学习笔记

    Link-Cut Tree,用来解决动态树问题. 宏观上,LCT维护的是森林而非树.因此存在多颗LCT.有点像动态的树剖(链的确定通过$Access$操作),每条链用一颗$splay$维护.$spla ...

  3. maven编译时出现There are test failures

    [ERROR] Failed to execute goal org.apache.maven.plugins:maven-surefire-plugin:2.10:test (default-tes ...

  4. scrapy 发送post请求

    登录人人网为例 1.想要发送post请求,那么使用'scrapy.FormRequest'方法,可以方便的指定表单数据 2.如果想在爬虫一开始的时候就发送post请求,那么应该重写'start_req ...

  5. python学习日记(函数进阶)

    命名空间 内置命名空间 存放了python解释器为我们提供的名字:print,input...等等,他们都是我们熟悉的,拿过来就可以用的方法. 内置的名字在启动解释器(程序运行前)的时候被加载在内存里 ...

  6. 【CF1139D】Steps to One(动态规划)

    [CF1139D]Steps to One(动态规划) 题面 CF 你有一个数组,每次随机加入一个\([1,n]\)的数,当所有数\(gcd\)为\(1\)时停止,求数组长度的期望. 题解 设\(f[ ...

  7. 【BZOJ5322】[JXOI2018]排序问题(模拟)

    [BZOJ5322][JXOI2018]排序问题(模拟) 题面 BZOJ 洛谷 题解 这题就显得很呆. 显然就是每次找到\([l,r]\)中出现次数最小的那个数并且放一个. 然后随便模拟一下就好了Qw ...

  8. Linux及Windows查看占用端口的进程

    想必大家在部署环境启动服务的时候,会遇到服务起不起来的问题,看日志,说是端口被占用了. 有的时候,我们不想改端口,那么,就需要去查看到底是哪个应用把这个端口给占用了,然后干掉它即可. 下面分别列举li ...

  9. Anaconda换源小记

    如果还没有安装可以参考:https://www.cnblogs.com/dotnetcrazy/p/9158715.html 一键更新所有库:conda update --all 清华的源有时候有点小 ...

  10. 使用jquery.pjax实现SPA单页面应用

    前面文章介绍了前端路由简单实现和Pjax入门方面的文章,今天来分享一个单页面应用神器jquery.pjax.js. HTML 我们准备一个加载div#loading,默认隐藏,ajax请求的时候才显示 ...