HTML5 Canvas实战
3.3 拷贝、粘贴画布的某部分
阅读(

路径和文本

图形及组合

处理图像和视频

绘制图像

裁剪图像

拷贝、粘贴画布的某部分

本节,我们将仍然探讨drawImage()方法的另一个有趣的用法——拷贝画布的某部分。首先,我们在画布的中央绘制一个黑桃,然后拷贝黑桃的右半部分并粘贴到左边,再拷贝黑桃的左半部分并粘贴到右边。

拷贝画布的某个部分
图3-4 拷贝画布的某个部分

绘制步骤

按照以下步骤,在画布中央绘制黑桃,然后把图形的某部分拷贝、粘贴回画布:

1. 定义画布上下文:

window.onload  = function() {
  // 绘制画布及上下文
  var canvas  = document.getElementById("myCanvas");
  var context  = canvas.getContext("2d");

2. 使用第2章 图形及组合中创建的drawSpade()方法在画布中央绘制黑桃:

  //绘制黑桃
  var spadeX  = canvas.width  /  2;
  var spadeY  =  20;
  var spadeWidth  =  140; 
  var spadeHeight  =  200;
  //在画布中央绘制黑桃
  drawSpade(context, spadeX, spadeY, spadeWidth, spadeHeight);

3. 拷贝黑桃的右半部分,再调用drawImage()方法把它粘贴到黑桃的左边:

context.drawImage(
  canvas,
  spadeX,                // source x
  spadeY,                // source y
  spadeWidth  /  2,      // source width
  spadeHeight,           // source height
  spadeX  - spadeWidth,  // dest x
  spadeY,                // dest y
  spadeWidth  /  2,      // dest width
  spadeHeight            // dest height
);

4. 拷贝黑桃的左半部分,再调用drawImage()方法把它粘贴到黑桃的右边:

context.drawImage(
  canvas,
  spadeX  - spadeWidth  /  2,    // source x
  spadeY,                        // source y
  spadeWidth  /  2,              // source width
  spadeHeight,                   // source height
  spadeX  + spadeWidth  /  2,    // dest x
  spadeY,                        // dest y
  spadeWidth  /  2,              // dest width
  spadeHeight                    // dest height
  );
};

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

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

工作原理

要拷贝画布的某部分,我们可以向drawImage()方法传递canvas对象,而不是image对象:

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

在下一节我们将看到,使用drawImage()方法,不仅可以拷贝图像或画布的某部分,也可以拷贝HTML5视频的某部分。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我们提供更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验