html5综合应用案例4.6,4.6 切割画布上下文 - HTML5 Canvas 实战

本节，我们将使用在画布上下文对象的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标签：

工作原理

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

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

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

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