canvas.drawImage()方法详解
首先看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
),例如:CSSImageValue
,HTMLImageElement
,SVGImageElement
,HTMLVideoElement
,HTMLCanvasElement
,ImageBitmap
或者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()方法详解的更多相关文章
- 【CITE】DrawImage方法详解(转)
Image和Bitmap类概述 GDI+的Image类封装了对BMP.GIF.JPEG.PNG.TIFF.WMF(Windows元文件)和EMF(增强WMF)图像文件的调入.格式转换以及简单处理的功能 ...
- canvas createPattern()方法详解
createPattern作用 createPattern() 方法在指定的方向内重复指定的元素. 元素可以是图片.视频,或者其他 <canvas> 元素. 被重复的元素可用于绘制/填充矩 ...
- canvas绘图API详解
canvas绘图API详解 1.context的状态 矩阵变换属性 当前剪辑区域 context的其他状态属性: strokeStyle, fillStyle, globalAlpha, lineWi ...
- Android中Canvas绘图基础详解(附源码下载) (转)
Android中Canvas绘图基础详解(附源码下载) 原文链接 http://blog.csdn.net/iispring/article/details/49770651 AndroidCa ...
- session的使用方法详解
session的使用方法详解 Session是什么呢?简单来说就是服务器给客户端的一个编号.当一台WWW服务器运行时,可能有若干个用户浏览正在运正在这台服务器上的网站.当每个用户首次与这台WWW服务器 ...
- Kooboo CMS - Html.FrontHtml[Helper.cs] 各个方法详解
下面罗列了方法详解,每一个方法一篇文章. Kooboo CMS - @Html.FrontHtml().HtmlTitle() 详解 Kooboo CMS - Html.FrontHtml.Posit ...
- HTTP请求方法详解
HTTP请求方法详解 请求方法:指定了客户端想对指定的资源/服务器作何种操作 下面我们介绍HTTP/1.1中可用的请求方法: [GET:获取资源] GET方法用来请求已被URI识别的资源.指定 ...
- ecshop后台增加|添加商店设置选项和使用方法详解
有时候我们想在Ecshop后台做个设置.radio.checkbox 等等来控制页面的显示,看看Ecshop的设计,用到了shop_config这个商店设置功能 Ecshop后台增加|添加商店设置选项 ...
- (转)Spring JdbcTemplate 方法详解
Spring JdbcTemplate方法详解 文章来源:http://blog.csdn.net/dyllove98/article/details/7772463 JdbcTemplate主要提供 ...
随机推荐
- 洛谷P4281 紧急集合 / 聚会
LCA 题目要求找离三个点最近的点,我们先看两个点的情况,自然是找LCA,那么三个点的时候是否与LCA有关呢? 显然,离三个点最近的点一定是在这三个点联通的简单路径上. 可以简单证明一下,假设某个点离 ...
- 「Link-Cut Tree」学习笔记
Link-Cut Tree,用来解决动态树问题. 宏观上,LCT维护的是森林而非树.因此存在多颗LCT.有点像动态的树剖(链的确定通过$Access$操作),每条链用一颗$splay$维护.$spla ...
- maven编译时出现There are test failures
[ERROR] Failed to execute goal org.apache.maven.plugins:maven-surefire-plugin:2.10:test (default-tes ...
- scrapy 发送post请求
登录人人网为例 1.想要发送post请求,那么使用'scrapy.FormRequest'方法,可以方便的指定表单数据 2.如果想在爬虫一开始的时候就发送post请求,那么应该重写'start_req ...
- python学习日记(函数进阶)
命名空间 内置命名空间 存放了python解释器为我们提供的名字:print,input...等等,他们都是我们熟悉的,拿过来就可以用的方法. 内置的名字在启动解释器(程序运行前)的时候被加载在内存里 ...
- 【CF1139D】Steps to One(动态规划)
[CF1139D]Steps to One(动态规划) 题面 CF 你有一个数组,每次随机加入一个\([1,n]\)的数,当所有数\(gcd\)为\(1\)时停止,求数组长度的期望. 题解 设\(f[ ...
- 【BZOJ5322】[JXOI2018]排序问题(模拟)
[BZOJ5322][JXOI2018]排序问题(模拟) 题面 BZOJ 洛谷 题解 这题就显得很呆. 显然就是每次找到\([l,r]\)中出现次数最小的那个数并且放一个. 然后随便模拟一下就好了Qw ...
- Linux及Windows查看占用端口的进程
想必大家在部署环境启动服务的时候,会遇到服务起不起来的问题,看日志,说是端口被占用了. 有的时候,我们不想改端口,那么,就需要去查看到底是哪个应用把这个端口给占用了,然后干掉它即可. 下面分别列举li ...
- Anaconda换源小记
如果还没有安装可以参考:https://www.cnblogs.com/dotnetcrazy/p/9158715.html 一键更新所有库:conda update --all 清华的源有时候有点小 ...
- 使用jquery.pjax实现SPA单页面应用
前面文章介绍了前端路由简单实现和Pjax入门方面的文章,今天来分享一个单页面应用神器jquery.pjax.js. HTML 我们准备一个加载div#loading,默认隐藏,ajax请求的时候才显示 ...