canvas drawImage详解

一、基础概念

canvas drawImage方法是HTML 5标准中常用的Canvas API之一。它用于将图像文件（包括位图和矢量图）和其他Canvas对象绘制到一个Canvas上。该方法既可以绘制完整的图像，也可以只绘制图像的一部分。使用该方法，可以实现图像的缩放、裁剪、旋转等效果。

二、函数语法

context.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

参数解析：

image: 绘制到Canvas上的图像文件或Canvas对象。
sx: 绘制图像时开始裁剪的X坐标位置。
sy: 绘制图像时开始裁剪的Y坐标位置。
sWidth: 绘制图像时裁剪的宽度。
sHeight: 绘制图像时裁剪的高度。
dx: 绘制图像时开始绘制的X坐标位置。
dy: 绘制图像时开始绘制的Y坐标位置。
dWidth: 绘制出图像时的宽度。（可选）
dHeight: 绘制出图像时的高度。（可选）

三、图像文件的加载

在使用drawImage方法在Canvas上绘制图片之前，必须先加载图片文件。如下代码所示：

var img = new Image();
img.src = "路径/文件名.xxx";
img.onload = function(){
  //canvas drawImage方法绘制图片
}

在路径/文件名.xxx中，路径表示图片文件所在的路径，文件名是指图片文件的名称（包括后缀），xxx则表示图片文件的类型（如jpg、png等）。

四、简单示例

下面的示例演示了如何将图片文件绘制到Canvas上。示例中，我们先加载一个被绘制的图像文件（即panda.jpg），然后绘制该图像文件到Canvas上。

<canvas id="myCanvas"></canvas>

<script>
  var canvas=document.getElementById("myCanvas");
  var ctx=canvas.getContext("2d");
  var img=new Image();
  img.onload=function(){
    ctx.drawImage(img, 0, 0);
  };
  img.src="panda.jpg";
</script>

运行上述代码，即可在Canvas上绘制出一张名为panda.jpg的图片。

五、绘制部分图片

有时，我们并不需要绘制完整的图片，而是只需要绘制图片的一部分。如下代码所示：

<canvas id="myCanvas"></canvas>

<script>
  var canvas=document.getElementById("myCanvas");
  var ctx=canvas.getContext("2d");
  var img=new Image();
  img.onload=function(){
    ctx.drawImage(img, 0, 0, 50, 50, 0, 0, 100, 100);
  };
  img.src="panda.jpg";
</script>

在上述代码中，我们绘制了panda.jpg图像的左上角的50×50像素范围内的图片到Canvas上，然后将该部分图片放大到100×100像素的范围内。结果是，我们在Canvas上只看到了panda.jpg图像的左上角部分，并且这部分图像被放大了两倍。

六、缩放图片

我们可以通过修改Canvas上绘制图像的宽度和高度，来缩放图像。如下代码所示：

<canvas id="myCanvas"></canvas>

<script>
  var canvas=document.getElementById("myCanvas");
  var ctx=canvas.getContext("2d");
  var img=new Image();
  img.onload=function(){
    ctx.drawImage(img, 0, 0, img.width/2, img.height/2);
  };
  img.src="panda.jpg";
</script>

在上述代码中，我们将panda.jpg图像的宽度和高度都缩小了一半，使用的方法是将原始宽度和高度除以2。

七、旋转图片

我们可以通过rotate方法旋转Canvas上绘制的图像。如下代码所示：

<canvas id="myCanvas"></canvas>

<script>
  var canvas=document.getElementById("myCanvas");
  var ctx=canvas.getContext("2d");
  var img=new Image();
  img.onload=function(){
    ctx.rotate(20*Math.PI/180);
    ctx.drawImage(img, 0, 0, 100, 100);
  };
  img.src="panda.jpg";
</script>

在上述代码中，我们将绘制的图像旋转了20度，然后再将该图像绘制到了Canvas上。

八、实现图像填充

我们可以使用drawImage方法实现Canvas中的图像填充效果。如下代码所示：

<canvas id="myCanvas" width="300" height="150"></canvas>

<script>
  var canvas=document.getElementById("myCanvas");
  var ctx=canvas.getContext("2d");
  var img=new Image();
  img.onload=function(){
    var pat=ctx.createPattern(img,"repeat");
    ctx.fillStyle=pat;
    ctx.fillRect(0,0,300,150);
  };
  img.src="panda.jpg";
</script>

在上述代码中，我们使用drawImage方法创建一个图像填充效果。具体地，我们首先创建一个Canvas的2D上下文，然后使用createPattern方法创建了一个由panda.jpg图像组成的重复图案，然后将这个图案填充到Canvas上。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/289573.html