前端html生成图片,HTML5 Canvas：绘制图片

通过前面的学习，我们现在已经可以在HTML5 canvas中绘制图形和文字，并给它们设置一些样式。我们还可以在中绘制图片。用于在作为绘制源的图片可以是下面的几种元素类型：

HTMLImageElement：可以是由Image()构造函数创建的图片，也可以是任何的元素。

HTMLVideoElement：使用一个HTML元素作为图片源，会从视频中截取当前帧作为图片源。

HTMLCanvasElement：也可以使用另一个元素作为图片源。

绘制图片

我们可以通过2D上下文的三种方法来在中绘制图片。drawImage(image, dx, dy);

drawImage(image, dx, dy, dw, dh);

drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dw, dh);

基本绘制图片方法：drawImage(image, dx, dy)

这个方法是在中绘制一张图片。image参数是要绘制的图片，dx和dy参数是“destinationX”和“destinationY”的简写，这两个参数决定在canvas中什么位置绘制图片。

下面是一个例子。这个例子在中(0,0)位置开始绘制指定的图片。var ctx = document.getElementById('ex1').getContext('2d');

var img = new Image();