HTML5 Canvas实战
4.6 切割画布上下文
阅读(

路径和文本

图形及组合

处理图像和视频

画布变换

平移画布上下文

旋转画布上下文

缩放画布上下文

创建镜像变换

创建自定义变换

切割画布上下文

本节,我们将使用在画布上下文对象的transform()方法中已经学过的知识,来创建一个自定义的切割变换,使画布上下文在水平方向上发生倾斜。

切割画布上下文
图4-8 切割画布上下文

绘制步骤

按照以下步骤,绘制一个被切割的矩形:

1. 定义画布上下文及矩形尺寸:

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

2. 平移画布上下文,并为上下文应用自定义的切割变换:

  //切割矩阵:
  //   1    sx  0
  //   sy   1   0
  //   0    0   1
  var sx  =  0.75;  //水平切割比例为0.75
  var sy  =  0;     //垂直方向不切割
  //把上下文平移到画布的中央
  context.translate(canvas.width  /  2, canvas.height  /  2);
  //应用自定义变换
  context.transform(1, sy, sx,  1,  0,  0);

3. 绘制该矩形:

  context.fillStyle  = "blue";
  context.fillRect(-rectWidth  /  2,  -rectHeight  /  2, rectWidth, rectHeight);
};

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

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

工作原理

要切割画布上下文,我们可以应用以下变换矩阵:

我们可以使用下面参数调用transform()方法:

context.transform(1,sy,sx,1,0,0);

sx的值增加的越大,上下文在水平方向上切割的就越多。sy的值增加的越大,上下文在垂直方向上切割的就越多。

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

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

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验