drawImage 方法有三种形态：

drawImage(image, dx, dy) 在画布指定位置绘制原图
drawImage(image, dx, dy, dw, dh) 在画布指定位置上按原图大小绘制指定大小的图
drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh) 剪切图像，并在画布上定位被剪切的部分

参数	描述
image	规定要使用的图像、画布或视频
sx	可选。开始剪切图片的 x 坐标位置
sy	可选。开始剪切图片的 y 坐标位置
sw	可选。被剪切图像的宽度（就是裁剪之前的图片宽度，这里的宽度若小于图片的原宽。则图片多余部分被剪掉；若大于，则会以空白填充）
sh	可选。被剪切图像的高度（就是裁剪之前的图片高度）
dx	在画布上放置图像的 x 坐标位置
dy	在画布上放置图像的 y 坐标位置
dw	可选。要使用的图像的宽度（就是裁剪之后的图片高度，放大或者缩放）
dh	可选。要使用的图像的高度（就是裁剪之后的图片高度，放大或者缩放）

看实例（源图片是120*120的）

drawImage(image, dx, dy) 在画布指定位置绘制原图

var canvas = document.getElementById("canvas");
canvas.width=240;
canvas.height=240;
var ctx=canvas.getContext("2d");var image = new Image();
image.src="./images/head.jpeg";
image.onload=function(){
ctx.drawImage(this,0,0);
}

效果如下

可以看到图片没有做任何的处理，直接从0,0位置绘制出来

drawImage(image, dx, dy, dw, dh) 在画布指定位置上按原图大小绘制指定大小的图

var canvas = document.getElementById("canvas");
canvas.width=240;
canvas.height=240;
var ctx=canvas.getContext("2d");var image = new Image();
image.src="./images/head.jpeg";
image.onload=function(){
ctx.drawImage(this,0,0,240,240);
}

效果如下

后面的两个参数，指定了绘制的长宽，这里都指定240，会把画布占满。

drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh) 剪切图像，并在画布上定位被剪切的部分 ###


var canvas = document.getElementById("canvas");
canvas.width=240;
canvas.height=240;
var ctx=canvas.getContext("2d");var image = new Image();
image.src="./images/head.jpeg";
image.onload=function(){
ctx.drawImage(this,0,0,60,60,0,0,120,120);
}

效果如下

图片被截取了左上角一部分，然后还放大显示长宽120

说明：

img

就是图片对象，可以是页面上获取的 DOM 对象，也可以是虚拟 DOM 中的图片对象。

dx、dy、dWidth、dHeight

表示在 canvas 画布上规划出一片区域用来放置图片，dx, dy 为绘图位置在 Canvas 元素的 X 轴、Y 轴坐标，dWidth, dHeight 指在 Canvas 元素上绘制图像的宽度和高度（如果不说明，在绘制时图片的宽度和高度不会缩放）。

sx、sy、swidth、sheight

这 4 个参数是用来裁剪源图片的，表示图片在 canvas 画布上显示的大小和位置。sx, sy 表示在源图片上裁剪位置的 X 轴、Y 轴坐标，然后以 swidth, sheight 尺寸来选择一个区域范围，裁剪出来的图片作为最终在 Canvas 上显示的图片内容（ swidth, sheight 不说明的情况下，整个矩形（裁剪）从坐标的 sx 和 sy 开始，到图片的右下角结束）。

以下为图片绘制的实例：

context.drawImage(image, 0, 0, 100, 100);

context.drawImage(image, 300, 300, 200, 200);

context.drawImage(image, 0, 100, 150, 150, 300, 0, 150, 150);

页面效果如下：

Api 中奇怪之处在于，sx、sy、swidth、sheight 为选填参数，但位置在 dx、dy、dWidth、dHeight 之前。

drawImage 详解相关推荐

java中drawimage方法_canvas.drawImage()方法详解
首先看html5.js /** @param {Element} img_elem @param {Number} dx_or_sx @param {Number} dy_or_sy @param { ...
详解OS X和iOS图像处理框架Core Image
详解OS X和iOS图像处理框架Core Image width="22" height="16" src="http://hits.sinaj ...
HTML中的camera标签,详解HTML5 使用video标签实现选择摄像头功能
详解HTML5 使用video标签实现选择摄像头功能 1. html // jquery reference // // Open WebCam Snap Photo 2. javascript El ...
java canvas 缩放图片_详解如何用HTML5 Canvas API控制图片的缩放变换
摘要:这篇HTML5栏目下的"详解如何用HTML5 Canvas API控制图片的缩放变换",介绍的技术点是"html5_canvas.canvas.Html5.控制图片 ...
HTML5 多图片上传（前端+后台详解）
HTML5 多图片上传(前端+后台详解) 1.参考jquery插件库 2.修改代码 3.添加的后台代码 4.删除的后台代码 1.参考jquery插件库手机端实现多图片上传 2.修改代码我发现他这里 ...
html5 摄像头直播,详解HTML5 使用video标签实现选择摄像头功能
详解HTML5 使用video标签实现选择摄像头功能 1. html // jquery reference // // Open WebCam Snap Photo 2. javascript El ...
Canvas 实用API详解
说明本篇内容可以看做是一篇关于canvas的API文档,由于全文的篇幅较长,通常用于作为API文档查看,可通过目录查找.本篇也可做为想详细了解canvas所有操作的学习文章.Canvas 对象表示一 ...
详解Canvas动画部分
基础篇: Html5中Canvas绘制.样式详解(不包含动画部分) 此篇为后续目录 1. 状态的保存和恢复 2. translate移动 3. 旋转Rotating 4. 缩放Scaling 5. ...
java 窗体添加背景图片_Java Swing实现窗体添加背景图片的2种方法详解
本文实例讲述了java Swing实现窗体添加背景图片的2种方法.分享给大家供大家参考,具体如下: 在美化程序时,常常需要在窗体上添加背景图片.通过搜索和测试,发现了2种有效方式.下面分别介绍. 1. ...

drawImage 详解

背景：

drawImage 方法有三种形态：

看实例（源图片是120*120的）

drawImage(image, dx, dy) 在画布指定位置绘制原图

效果如下

drawImage(image, dx, dy, dw, dh) 在画布指定位置上按原图大小绘制指定大小的图

效果如下

说明：

drawImage 详解相关推荐

最新文章

热门文章