HTML canvas drawImage() 方法

实例

向画布上面绘制图片：

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
img.onload = function(){
    ctx.drawImage(img,10,10);
}

尝试一下

浏览器支持

Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持 drawImage() 方法。

注意：Internet Explorer 8 及之前的版本不支持 <canvas> 元素。

定义和用法

drawImage() 方法在画布上绘制图像、画布或视频。

drawImage() 方法也能够绘制图像的某些部分，以及/或者增加或减少图像的尺寸。

JavaScript 语法

在画布上定位图像：

在画布上定位图像，并规定图像的宽度和高度：

剪切图像，并在画布上定位被剪切的部分：

参数值

更多实例

实例1

在画布上对图像进行定位，然后规定图像的宽度和高度：

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
img.onload = function(){
    ctx.drawImage(img,10,10,150,180);
}

尝试一下

实例2

剪切图片，并在画布上对被剪切的部分进行定位：

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img,90,130,50,60,10,10,50,60);

尝试一下

实例3

每 20 毫秒，绘制视频的当前帧：

var v = document.getElementById("video1");
var c = document.getElementById("myCanvas");
ctx = c.getContext('2d');
v.addEventListener('play', function() {
    var i = window.setInterval(function() {
        ctx.drawImage(v, 5, 5, 260, 125)
    }, 20);
}, false);
v.addEventListener('pause', function() {
    window.clearInterval(i);
}, false);
v.addEventListener('ended', function() {
    clearInterval(i);
}, false);

尝试一下