当前位置: 首页 > 文档资料 > HTML5 Canvas 实战 >

3.2 裁剪图像

优质
小牛编辑
133浏览
2023-12-01

本节,我们将裁剪图像的一部分,然后把其结果绘制到画布上。

裁剪图像
图3-2 裁剪图像

绘制步骤

按照以下步骤,裁剪图像的一部分,再把结果绘制到画布:

1. 定义画布上下文:

window.onload  = function(){
  var canvas  = document.getElementById("myCanvas");
  var context  = canvas.getContext("2d");

2. 创建一个image对象,把onload属性设置为一个裁剪图像的函数,然后设置图像的源地址:

  var imageObj  = new Image();
  imageObj.onload  = function() {
    //源矩形区域  
    var sourceX  =  550;
    var sourceY  =  300;
    var sourceWidth  =  300; 
    var sourceHeight  =  214;
    //目标图像的尺寸和位置
    var destWidth  = sourceWidth;
    var destHeight  = sourceHeight;
    var destX  = canvas.width  /  2  - destWidth  /  2;
    var destY  = canvas.height  /  2  - destHeight  /  2;
    context.drawImage(this, sourceX, sourceY, sourceWidth,
    sourceHeight, destX, destY, destWidth, destHeight);
  };
  imageObj.src  = "jet_1000x714.jpg";
};

3. 在HTML文档的body部分嵌入canvas标签:

<canvas id="myCanvas" width="600" height="250" style="border:1px solid black;">
</canvas>

工作原理

上一节,我们已经讨论了使用drawImage()方法,把图像绘制到画布的两种不同方法。在第一种情况下,我们传递一个image对象和位置,这种方式简单地把图像绘制到指定的位置。在第二种情况下,我们传递一个image对象、一个位置信息、一个尺寸信息,这种方式按指定尺寸把图像绘制到指定位置。另外,如果想裁剪图像,我们也可以给drawImage()方法增加另外6个参数:

Context.drawImage(imageObj, sourceX, sourceY, sourceWidth, sourceHight, sourceHeight, sourceHeight, destX, destY, destWidth, destHeight);

请看下图:

drawImage()方法的原理
图3-3 drawImage()方法的原理

正如你看到的,sourceX和sourceY是指源图像中被裁剪区域的左上角坐标。sourceWidth和sourceHeight是指从源图像中被裁剪下来的图像的宽度和高度。destX和destY是指被裁剪下来的图像在画布上的坐标。destWidth和destHeight是指被裁剪下来的图像绘制到画布上的实际宽度和高度。

如果不打算对被裁剪的图像进行缩放,则destWidth 等于sourceWidth,且destHeight等于sourceHeight。