canvas drawImage() 方法绘制图片与视频
2018-11-14 17:25
597 查看
canvas drawImage() 方法
drawImage() 方法用于在画布上绘制图像、画布或视频。
drawImage() 方法也能够绘制图像的某些部分，以及/或者增加或减少图像的尺寸。
JavaScript 语法 1：在画布上定位图像—> context.drawImage(img,x,y);
JavaScript 语法 2：在画布上定位图像，并规定图像的宽度和高度—> context.drawImage(img,x,y,width,height);
JavaScript 语法 3：剪切图像，并在画布上定位被剪切的部分—> context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
| 参数 | 描述 |
|---|---|
| img | 规定要使用的图像、画布或视频。 |
| sx | 可选。图片开始剪切的 x 坐标位置。 |
| sy | 可选。图片开始剪切的 y 坐标位置。 |
| swidth | 可选。被剪切图像的宽度。 |
| sheight | 可选。被剪切图像的高度。 |
| x | 在画布上放置图像的 x 坐标位置。 |
| y | 在画布上放置图像的 y 坐标位置。 |
| width | 可选。要使用的图像的宽度。（伸展或缩小图像） |
| height | 可选。要使用的图像的高度。（伸展或缩小图像） |
注意事项：
在画布上绘制图片时，因为图片资源时动态加载的，所以必须要在图片加载完成后，才在 Canvas 上去渲染；否则如果图片在未加载完成的情况下去 Canvas 上绘制，则不会 有任何效果。
Image 对象有一个 onload时间，当图像装载完毕时调用的事件句柄，可以参考《HTML DOM Image 对象》
编码示例
context.drawImage(img,x,y)
x 表示在画布上放置图像的 x 坐标位置，必填
y 表示在画布上放置图像的 y 坐标位置，必填
以画布左上角为原点(0,0)，此时图片将以原尺寸进行绘制。
[code]<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>Cavas 演示</title>
<style type="text/css">
canvas {
margin-left: 150px;
}
</style>
<!-- JQuery CDN-->
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<!-- ES 6 使用 module 类型-->
<script type="module">
$(function () {
drawImage1();
drawImage2();
drawImage3();
});
/**
* 绘制第一张图
* 图片实际大小 75px * 75px，Canvas 大小 100px * 100px
* ctx.drawImage(img, 0, 0)
*/
var drawImage1 = function () {
/**获取 cavas Dom 对象*/
var canvasObj = document.getElementById("myCanvas1");
/**获取 context 对象，该对象提供了用于在画布上绘图的方法和属性
* 2d 是目前支持的二维图像*/
var ctx = canvasObj.getContext("2d");
var img = new Image();
img.src = "https://avatar.csdn.net/6/D/4/3_wangmx1993328.jpg";
/**等图片资源加载完成后，才在 Canvas 上进行绘制渲染*/
img.onload = function () {
ctx.drawImage(img, 0, 0);
}
}
/**
* 绘制第二张图
* 图片实际大小 75 * 75，Canvas 大小 100 * 100
* ctx.drawImage(img, 20, 20)
*/
var drawImage2 = function () {
/**获取 cavas Dom 对象*/
var canvasObj = document.getElementById("myCanvas2");
/**获取 context 对象，该对象提供了用于在画布上绘图的方法和属性
* 2d 是目前支持的二维图像*/
var ctx = canvasObj.getContext("2d");
var img = new Image();
img.src = "https://avatar.csdn.net/6/D/4/3_wangmx1993328.jpg";
/**等图片资源加载完成后，才在 Canvas 上进行绘制渲染*/
img.onload = function () {
ctx.drawImage(img, 20, 20);
}
}
/**
* 绘制第三张图
* 图片实际大小 75 * 75，Canvas 大小 100 * 100
* ctx.drawImage(img, 40, 40)
*/
var drawImage3 = function () {
/**获取 cavas Dom 对象*/
var canvasObj = document.getElementById("myCanvas3");
/**获取 context 对象，该对象提供了用于在画布上绘图的方法和属性
* 2d 是目前支持的二维图像*/
var ctx = canvasObj.getContext("2d");
var img = new Image();
img.src = "https://avatar.csdn.net/6/D/4/3_wangmx1993328.jpg";
/**等图片资源加载完成后，才在 Canvas 上进行绘制渲染*/
img.onload = function () {
ctx.drawImage(img, 40, 40);
}
}
</script>
</head>
<body>
<canvas id="myCanvas1" width="100" height="100" style="border:1px solid #000000;">
浏览器不支持 HTML5 canvas
</canvas>
<canvas id="myCanvas2" width="100" height="100" style="border:1px solid #000000;">
浏览器不支持 HTML5 canvas
</canvas>
<canvas id="myCanvas3" width="100" height="100" style="border:1px solid #000000;">
浏览器不支持 HTML5 canvas
</canvas>
</body>
</html>
context.drawImage(img,x,y,width,height)
x 表示在画布上放置图像的 x 坐标位置，必填
y 表示在画布上放置图像的 y 坐标位置，必填
width 表示要使用的图像的宽度，此时将拉伸或缩小图像，可选
height 表示要使用的图像的高度，此时将拉伸或缩小图像，可选
可以简单的理解成 (x,y) 表示起点坐标，(x+width,y+height) 表示重点坐标，图片以原尺寸进行放大或者缩小。
[code]<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>Cavas 演示</title>
<style type="text/css">
canvas {
margin-left: 150px;
}
</style>
<!-- JQuery CDN-->
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<!-- ES 6 使用 module 类型-->
<script type="module">
$(function () {
drawImage1();
drawImage2();
drawImage3();
});
/**
* 绘制第一张图
* 图片实际大小 75px * 75px，Canvas 大小 100px * 100px
* ctx.drawImage(img, 0, 0,75,75)
*/
var drawImage1 = function () {
/**获取 cavas Dom 对象*/
var canvasObj = document.getElementById("myCanvas1");
/**获取 context 对象，该对象提供了用于在画布上绘图的方法和属性
* 2d 是目前支持的二维图像*/
var ctx = canvasObj.getContext("2d");
var img = new Image();
img.src = "https://avatar.csdn.net/6/D/4/3_wangmx1993328.jpg";
/**等图片资源加载完成后，才在 Canvas 上进行绘制渲染*/
img.onload = function () {
ctx.drawImage(img, 0, 0, 75, 75);
}
}
/**
* 绘制第二张图
* 图片实际大小 75 * 75，Canvas 大小 100 * 100
* ctx.drawImage(img, 0, 0, 50, 50);
*/
var drawImage2 = function () {
/**获取 cavas Dom 对象*/
var canvasObj = document.getElementById("myCanvas2");
/**获取 context 对象，该对象提供了用于在画布上绘图的方法和属性
* 2d 是目前支持的二维图像*/
var ctx = canvasObj.getContext("2d");
var img = new Image();
img.src = "https://avatar.csdn.net/6/D/4/3_wangmx1993328.jpg";
/**等图片资源加载完成后，才在 Canvas 上进行绘制渲染*/
img.onload = function () {
ctx.drawImage(img, 0, 0, 50, 50);
}
}
/**
* 绘制第三张图
* 图片实际大小 75 * 75，Canvas 大小 100 * 100
* ctx.drawImage(img, 0, 0, 100, 100);
*/
var drawImage3 = function () {
/**获取 cavas Dom 对象*/
var canvasObj = document.getElementById("myCanvas3");
/**获取 context 对象，该对象提供了用于在画布上绘图的方法和属性
* 2d 是目前支持的二维图像*/
var ctx = canvasObj.getContext("2d");
var img = new Image();
img.src = "https://avatar.csdn.net/6/D/4/3_wangmx1993328.jpg";
/**等图片资源加载完成后，才在 Canvas 上进行绘制渲染*/
img.onload = function () {
ctx.drawImage(img, 0, 0, 100, 100);
}
}
</script>
</head>
<body>
<canvas id="myCanvas1" width="100" height="100" style="border:1px solid #000000;">
浏览器不支持 HTML5 canvas
</canvas>
<canvas id="myCanvas2" width="100" height="100" style="border:1px solid #000000;">
浏览器不支持 HTML5 canvas
</canvas>
<canvas id="myCanvas3" width="100" height="100" style="border:1px solid #000000;">
浏览器不支持 HTML5 canvas
</canvas>
</body>
</html>
context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height)
x 表示在画布上放置图像的 x 坐标位置，必填
y 表示在画布上放置图像的 y 坐标位置，必填
width 表示要使用的图像的宽度，此时将拉伸或缩小图像，可选
height 表示要使用的图像的高度，此时将拉伸或缩小图像，可选
sx 表示图片开始剪切的 x 坐标位置，可选
sy 表示图片开始剪切的 y 坐标位置，可选
swidth 表示被剪切图像的宽度，可选
sheight 表示被剪切图像的高度，可选
可以简单的理解成：截切图片上的(sx,sy) 到 (sx+swidth,sy+sheight) 区域放置到画布上的 (x,y) 到 (x+width,y+height)区域。
[code]<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>Cavas 演示</title>
<style type="text/css">
canvas {
margin-left: 150px;
}
</style>
<!-- JQuery CDN-->
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<!-- ES 6 使用 module 类型-->
<script type="module">
$(function () {
drawImage1();
drawImage2();
drawImage3();
});
/**
* 绘制第一张图
* 图片实际大小 75px * 75px，Canvas 大小 100px * 100px
* ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, 100, 100);
*/
var drawImage1 = function () {
/**获取 cavas Dom 对象*/
var canvasObj = document.getElementById("myCanvas1");
/**获取 context 对象，该对象提供了用于在画布上绘图的方法和属性
* 2d 是目前支持的二维图像*/
var ctx = canvasObj.getContext("2d");
var img = new Image();
img.src = "https://avatar.csdn.net/6/D/4/3_wangmx1993328.jpg";
/**等图片资源加载完成后，才在 Canvas 上进行绘制渲染*/
img.onload = function () {
ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, 100, 100);
}
}
/**
* 绘制第二张图
* 图片实际大小 75 * 75，Canvas 大小 100 * 100
* ctx.drawImage(img, 0, 0, img.width * 0.5, img.height * 0.5, 0, 0, 100, 100);
*/
var drawImage2 = function () {
/**获取 cavas Dom 对象*/
var canvasObj = document.getElementById("myCanvas2");
/**获取 context 对象，该对象提供了用于在画布上绘图的方法和属性
* 2d 是目前支持的二维图像*/
var ctx = canvasObj.getContext("2d");
var img = new Image();
img.src = "https://avatar.csdn.net/6/D/4/3_wangmx1993328.jpg";
/**等图片资源加载完成后，才在 Canvas 上进行绘制渲染*/
img.onload = function () {
ctx.drawImage(img, 0, 0, img.width * 0.5, img.height * 0.5, 0, 0, 100, 100);
}
}
/**
* 绘制第三张图
* 图片实际大小 75 * 75，Canvas 大小 100 * 100
* ctx.drawImage(img, 20, 20, 30, 30, 0, 0, 50, 50);
*/
var drawImage3 = function () {
/**获取 cavas Dom 对象*/
var canvasObj = document.getElementById("myCanvas3");
/**获取 context 对象，该对象提供了用于在画布上绘图的方法和属性
* 2d 是目前支持的二维图像*/
var ctx = canvasObj.getContext("2d");
var img = new Image();
img.src = "https://avatar.csdn.net/6/D/4/3_wangmx1993328.jpg";
/**等图片资源加载完成后，才在 Canvas 上进行绘制渲染*/
img.onload = function () {
ctx.drawImage(img, 20, 20, 30, 30, 0, 0, 50, 50);
}
}
</script>
</head>
<body>
<canvas id="myCanvas1" width="100" height="100" style="border:1px solid #000000;">
浏览器不支持 HTML5 canvas
</canvas>
<canvas id="myCanvas2" width="100" height="100" style="border:1px solid #000000;">
浏览器不支持 HTML5 canvas
</canvas>
<canvas id="myCanvas3" width="100" height="100" style="border:1px solid #000000;">
浏览器不支持 HTML5 canvas
</canvas>
</body>
</html>
获取画布以及 Image 尺寸
[code]<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>Cavas 演示</title>
<style type="text/css">
canvas {
margin-left: 150px;
}
</style>
<!-- JQuery CDN-->
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<!-- ES 6 使用 module 类型-->
<script type="module">
$(function () {
getSize();
});
/**
* 获取画布 以及 Image 的尺寸
* 图片实际大小 75px * 75px，Canvas 大小 100px * 100px
*/
var getSize = function () {
/**获取 cavas Dom 对象*/
var canvasObj = document.getElementById("myCanvas1");
var ctx = canvasObj.getContext("2d");
console.log("画布尺寸", canvasObj.width, canvasObj.height);//输出：画布尺寸 100 100
var img = new Image();
img.src = "https://avatar.csdn.net/6/D/4/3_wangmx1993328.jpg";
/**等图片资源加载完成后，才在 Canvas 上进行绘制渲染，或其他操作*/
img.onload = function () {
console.log("图片尺寸", img.width, img.height);//输出：图片尺寸 75 75
/**让图片铺满画布*/
ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, canvasObj.width, canvasObj.height);
}
}
</script>
</head>
<body>
<canvas id="myCanvas1" width="100" height="100" style="border:1px solid #000000;">
浏览器不支持 HTML5 canvas
</canvas>
</body>
</html>
画布上叠加绘制
画布 Canvas 相当于一块画板，可以在上面反复的进行绘制，比如画笔画图形，画图片等，可以一层一层的往上面进行绘制，微信小游戏就是通过这样的原理进行渲染的。
[code]<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>ES6 测试</title>
<!-- JQuery CDN-->
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<!-- ES6 JS-->
<script type="module">
$(function () {
let canvas = document.getElementById("myCanvas");
let ctx = canvas.getContext("2d");
let image = new Image();
image.src = "https://avatar.csdn.net/6/D/4/3_wangmx1993328.jpg";
image.onload = function () {
/**
* 连续化三张图
*/
ctx.drawImage(image, 0, 0, image.width, image.height, 0, 0, canvas.width, canvas.height / 2);
ctx.drawImage(image, 0, 0, image.width, image.height, 0, canvas.height / 2, canvas.width, canvas.height / 2);
ctx.drawImage(image, 0, 0, image.width, image.height, 0, 0, canvas.width / 2, canvas.height);
}
});
</script>
</head>
<body>
<canvas width="400" height="400" style="border: 1px solid red" id="myCanvas">
浏览器不支持 Canvas
</canvas>
</body>
</html>
画布上实时渲染动画
实现代码如下：
[code]<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>直线运动</title>
<style type="text/css">
.divContent {
width: 600px;
height: 150px;
background-color: #333333;
margin: 10px auto;
border-radius: 10px;
}
</style>
<!-- JQuery CDN-->
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="module">
/**第一个动画————————图片尺寸小于画布尺寸
* canvas：画布在整个过程中是不变的，所以作为参数传入，避免重复获取
* ctx：画布上下文
* img：加载成功的 Image 对象
* moveX：图片移动的 x 坐标
* speed：图片移动的速度(单位像素)
*/
let moveX = 0;
let speed = 2;
let drawRect1 = function (canvas, ctx, img) {
/**为画布设置宽(width)与高(height)，它会先清除整个画布内所有的旧像素
* 相当于调用 context.clearRect(0,0,canvas.width,canvas.height); 方法
* 如果每次需要重新渲染，则需要清除旧像素；如果是叠加绘图，则不需要清除旧像素
* */
canvas.width = $(".divContent").css("width").replace("px", "");
canvas.height = $(".divContent").css("height").replace("px", "");
/**因为图片尺寸小于画布尺寸，所以 drawImage 时，三个参数就可以搞定
* 图片的 x 坐标让它动态变化
* 图片的 y 坐标让图片的下边缘刚好与画布下边缘重合
*/
ctx.drawImage(img, moveX, canvas.height - img.height);
moveX += speed;
/**如果图片移动到画布最右侧，则将其 x 左边置0*/
if (moveX > canvas.width) {
moveX = 0;
}
/**帧动画中回调自己*/
requestAnimationFrame(function () {
drawRect1(canvas, ctx, img);
});
}
/**第一个动画————————图片尺寸大于画布尺寸
* canvas：画布在整个过程中是不变的，所以作为参数传入，避免重复获取
* ctx：画布上下文
* img：加载成功的 Image 对象
* moveLandX：图片移动的 x 坐标
*/
let moveLandX = 0;
let drawRect2 = function (canvas, ctx, img) {
/**为画布设置宽(width)与高(height)，它会先清除整个画布内所有的旧像素
* 相当于调用 context.clearRect(0,0,canvas.width,canvas.height); 方法
* 如果每次需要重新渲染，则需要清除旧像素；如果是叠加绘图，则不需要清除旧像素
* */
canvas.width = $(".divContent").css("width").replace("px", "");
canvas.height = $(".divContent").css("height").replace("px", "");
/**因为图片尺寸大于画布尺寸，所以需要进行裁剪，这里使用9个参数
* 同样是让它在画布底部进行运动
* 其中关键点是第六个参数 -moveLandX 为负数表示让它从右往左移动
* 如果需要向右运动，则第6个参数改为 +moveLandX 即可
*/
ctx.drawImage(img, 0, 0,
img.width, img.height,
-moveLandX, canvas.height - img.height,
img.width, img.height);
moveLandX += speed;
/**这里效果是让图片像陆地一样无止境的进行运动，所以它的画布的右侧要始终保持有图像，不能让它置空
* 所以当图片运动到左侧超过了图片刚开始在右侧隐藏的部分时，应该让它重新开始渲染
* */
if (moveLandX > (img.width - canvas.width)) {
moveLandX = 0;
}
/**帧动画中回调自己*/
requestAnimationFrame(function () {
drawRect2(canvas, ctx, img);
});
}
$(function () {
/**获取第一张画布*/
let canvas1 = document.getElementById("myCanvas1");
/**获取画布上下文*/
let ctx1 = canvas1.getContext("2d");
let img1 = new Image();
img1.src = "https://www.thymeleaf.org/images/thirdparty/broadleafcommerce_logo.png";
img1.onload = function () {
drawRect1(canvas1, ctx1, img1);
}
/**获取第二张画布*/
let canvas2 = document.getElementById("myCanvas2");
/**获取画布上下文*/
let ctx2 = canvas2.getContext("2d");
let img2 = new Image();
img2.src = "../images/land.png";
img2.onload = function () {
drawRect2(canvas2, ctx2, img2);
}
});
</script>
</head>
<body>
<div class="divContent">
<canvas id="myCanvas1" width="600" height="200">
浏览器不支持 Canvas
</canvas>
</div>
<br>
<div class="divContent">
<canvas id="myCanvas2" width="600" height="200">
浏览器不支持 Canvas
</canvas>
</div>
</body>
</html>
阅读更多
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Canvas中 drawImage绘制图片不显示
- Android 使用Canvas中的drawBitmap方法绘制拉伸的图片
- Canvas 在高清屏下绘制图片变模糊的解决方法
- HTML5 Canvas 开发 绘图方法整理 【六、canvas image /canvas绘制图片、平铺图片】
- 在canvas上面绘制图片--drawImage实例
- js HTML5 canvas绘制图片的方法
- Canvas-drawImage 绘制图片模糊问题
- Android 使用Canvas在图片上绘制文字的方法
- canvas使用drawImage()方法绘制img和video的区别
- Canvas 在高清屏下绘制图片变模糊的解决方法
- js+html5绘制图片到canvas的方法
- js+html5绘制图片到canvas的方法
- HTML5 Canvas ( 图片绘制 转化为base64 ) drawImage,toDataURL
- canvas把图片绘制上画布
- C++ GDI+ DrawImage方法详解(绘制指定图像Image)
- js+html5通过canvas指定开始和结束点绘制线条的方法
- ThinkPHP中同时上传视频和图片的简单处理方法
- HTML5 Canvas中绘制椭圆的4种方法
- [HTML5]将WebView的视频绘制在Canvas上
- 详解HTML5 Canvas绘制时指定颜色与透明度的方法