4.6 切割画布上下文

优质

小牛编辑

125浏览

2023-12-01

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

绘制步骤

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

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的值增加的越大，上下文在垂直方向上切割的就越多。