English (US) 
Español (ES) 
Português (PT) 
Français (CA) 
Español (MX) 
Español (VE) 
Español (CO) 
Español (AR) 
Português (BR) 
Quechua (PE) 
Guaraní (PY) 
简体中文 (ZH) 
繁體中文 (HK) 
日本語 (JP) 
한국어 (KR) 
हिन्दी (HI) 
Pilipino (PH) 
ไทย (TH) 
Tiếng Việt (VN) 
Bahasa Melayu (MY) 
Bahasa Indonesia (ID) 
বাংলা (BD) 
اردو (PK) 
සිංහල (LK) 
ភាសាខ្មែរ (KH) 
English (UK) 
Français (FR) 
Deutsch (DE) 
Italiano (IT) 
Русский (RU) 
Nederlands (NL) 
Türkçe (TR) 
Polski (PL) 
Svenska (SE) 
Norsk (NO) 
Dansk (DK) 
Suomi (FI) 
Ελληνικά (GR) 
Čeština (CZ) 
Magyar (HU) 
Română (RO) 
Български (BG) 
Српски (RS) 
Українська (UA) 
【HTML5】Canvas的图像与视频
由 
Deepseek提供支持
Deepseek提供支持
广告
基础语法：
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
参数：
- image：绘制到上下文的元素。允许任何的 canvas 图像源。例如：HTMLImageElement，HTMLVideoElement，或者 HTMLCanvasElement。
- dx：目标画布的左上角在目标canvas上 X 轴的位置。
- dy：目标画布的左上角在目标canvas上 Y 轴的位置。
- dWidth：在目标画布上绘制图像的宽度。 允许对绘制的图像进行缩放。 如果不说明， 在绘制时图片宽度不会缩放。
- dHeight：在目标画布上绘制图像的高度。 允许对绘制的图像进行缩放。 如果不说明， 在绘制时图片高度不会缩放。
- sx：需要绘制到目标上下文中的，源图像的矩形选择框的左上角 X 坐标。
- sy：需要绘制到目标上下文中的，源图像的矩形选择框的左上角 Y 坐标。
- sWidth：需要绘制到目标上下文中的，源图像的矩形选择框的宽度。如果不说明，整个矩形从坐标的sx和sy开始，到图像的右下角结束。
- sHeight：需要绘制到目标上下文中的，源图像的矩形选择框的高度。
要绘制图像，我们首先要获得图像：
第一种：直接获取
<img src="xxjpg" id="myimg"/>
<script>
var img=document.getElementById("myimg");
</script>
第二种：动态创建
<script>
var img=new Image();
img.src="xx.jpg";
img.onload = function(){
// 等待图片加载完毕后再执行绘制
}
</script>
获得了源图对象，我们就可以使用 drawImage() 方法将它渲染到 canvas 里。
drawImage() 方法有三种形态：
(1) 绘制图片默认大小
drawImage(image, x, y)
image 是 image 或者 canvas 对象或video对象，x 和 y 是其在目标 canvas 里的起始坐标。
实例：canvas-demo/drawImage1.html：
<canvas id="canvas" width="600" height="400">
不支持canvas
</canvas>
<script>
var canvas = document.getElementById('canvas');
var ctx = '';
ctx = canvas.getContext('2d');
var img=new Image();
img.src="images/demo.jpg";
img.onload=function(){
ctx.drawImage(img,10,10);
};
ctx.stroke();
</script>
会将图片完整的绘制在画布上。
(2) 绘制并设置大小
drawImage(image, x, y, width, height)
前面三个参数和第一种使用方式的参数含义一样，不过，这个方法多了2个参数：width 和 height，这两个参数用来控制 当图像画入时绘制的大小。
实例：canvas-demo/drawImage2.html：
<canvas id="canvas" width="600" height="400">
不支持canvas
</canvas>
<script>
var canvas = document.getElementById('canvas');
var ctx = '';
ctx = canvas.getContext('2d');
var img=new Image();
img.src="images/demo.jpg";
img.onload=function(){
ctx.drawImage(img,10,10,100,100);
};
ctx.stroke();
</script>
(3) 切片
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
第一个参数和其它的是相同的，都是一个图像或者另一个 canvas 的引用。其它8个参数中，前4个是定义图像源的切片位置和大小，后4个则是定义切片的目标在canvas上显示的位置和大小。
实例：canvas-demo/drawImage3.html：
<canvas id="canvas" width="600" height="400">
不支持canvas
</canvas>
<script>
var canvas = document.getElementById('canvas');
var ctx = '';
ctx = canvas.getContext('2d');
var img=new Image();
img.src="images/demo.jpg";
img.onload=function(){
ctx.drawImage(img,120,40,80,80,10,10,80,80);
};
ctx.stroke();
</script>
视频截图
除了将图像、canvas绘制到canvas上外，drawImage()方法的第一个参数还可以是video对象，这也是我们可以实现播放视频的关键。
实例：canvas-demo/video.html：
<video id="video" width="320" height="240" controls>
<source src="images/movie.mp4" type="video/mp4">
</video>
<canvas id="canvas" width="400" height="300">
不支持canvas
</canvas>
<script>
var canvas = document.getElementById('canvas');
var ctx = '';
ctx = canvas.getContext('2d');
var video = document.getElementById('video');
var times = video.duration;
var t = 0;
var timeId = setInterval(function() {
if (t > times) {
clearInterval(timeId);
} else {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(video, 0, 0);
t += 100;
}
}, 100)
</script>
注意：出于安全考虑，HTML5 Canvas 规范不允许我们保存和修改其他域中的图像。
温馨提示 : 非特殊注明，否则均为©李联华的博客网原创文章，本站文章未经授权禁止任何形式转载;来自:俄亥俄州·哥伦布 ，欢迎您的访问!
文章链接：https://www.lilianhua.com/html5-images-and-videos-of-canvas.html
文章链接：https://www.lilianhua.com/html5-images-and-videos-of-canvas.html
请先登录才能参与答题
