如何在页面中添加Canvas元素与变换的使用

在页面中加入canvas元素

在页面中插入canvas元素非常直观，如下：

<canvas height=“200” width=“200”></canvas>

以上代码会在页面中创建一个200 X 200像素的区域。但是注意该区域是不可见的。如果要为其添加一个边框，可以通过设置一些CSS样式完成。

<canvas id=“square” style=”border: 1px solid;” height=“200” width=“200”> </canvas>

上边的代码我们为canvas指定了一个square属性，主要是方便我们可以使用dom方便的获取到canvas的对象，id属性时非常重要的，因为我们对canvas的一切操作都是通过JS来控制的，如果没有id获取canvas元素会非常复杂。

上边的代码会在页面的效果如下：

虽然仅仅是一个空白的方块，但是艺术家可以在一张白纸上画出美丽的图画。现在我们就尝试在这张白纸上画一条对角线吧。

//获取canvas对象 var canvas = document.getElementById(“square”); //获取context对象 var context = canvas.getContext(“2d”); //用绝对坐标来创建一条路径 context.beginPath(); context.moveTo(70,140); context.lineTo(140,70); //将这条线绘制在canvas上 context.stroke();

这段JS代码虽然简单，但是却展示出来使用Canvas API的重要流程。

1. 通过id获取canvas对象
2. 调用canvas对象的getContext()方法，并传入希望使用canvas的类型。这里我传入了“2d”来获取一个二维上下文。
3. 调用三个方法，beginPath、moveTo、lineTo。传入了这条线的起点终点和坐标。

方法moveTo和lineTo实际上并不画线，而是在结束canvas操作的时候，通过调用context.stroke()方法完成线条的绘制。绘制结果如下：

变换

现在我们来说一下在canvas上绘制图像的另一种方式——使用变换。接下来的代码显示结果和上面一样。只是绘制对角线的代码不同。这个示例可能会让人感觉使用变换增加了不必要的复杂性。但是实际上变换是实现复杂canvas操作的最好方式。在后面的示例中将会看到，我们使用了大量的变换，而这对数据Canvas的复杂功能至关重要。

我们可以把变换当成是介于开发人员发出的指令和canvas显示结果之间的一个修正层。不管开发中是否使用变换，修正层始终都是存在的。

修正——在绘制系统中的说法是变换——在应用的时候可以被顺序应用、组合或者随意修改。每个绘制操作的结果显示在canvas上之前都要经过修正层去做修正。虽然这么做增加了额外的复杂性，但却为绘制系统添加了更为强大的功能，可以像目前主流图像编辑工具那样支持实时的图像处理，所以API中这部分内容的复杂性是必要的。

translate函数

//获取canvas对象 var canvas = document.getElementById(“square”); //获取context对象 var context = canvas.getContext(“2d”); //保存当前绘图状态 context.save(); //向右下方移动绘图上下文 context.translate(70,140); //以原点为起点，绘制与前面相同的线段 context.beginPath(); context.moveTo(0,0); context.lineTo(70,-70); context.stroke(); //恢复原有的绘图状态 context.restore();

解析：

1. 通过id获取canvas对象
2. 调用getContext(“2d”)获取上下文对象
3. 保存尚未修改的context
4. 调用translate()函数。通过这个操作，当平移行为发生的时候，我们提供的变换坐标会被添加到结果坐标上，结果就是将对角线移动到了新的位置上。
5. 应用平移后就可以使用普通的绘制操作来画对角线了。
6. 在这条线勾画出来以后，调用stroke将其显示在canvas上
7. 恢复context值原始专题，这样后续的canvas操作就不会被刚才的平移操作影响。

执行结果：

虽然新绘制的对角线看着和前面的一模一样，但是这次绘制已经使用了强大的变换功能。下边我们还要来体会变换的强大之处。

想了解HTML5前端培训全栈开发技术，关注我，有更多精彩内容与您分享！

文章转载链接：http://www.atguigu.com/jsfx/1769.html