如何在页面中添加Canvas元素与变换的使用|canvas|上下文|代码|调用

在页面中加入canvas元素

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

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

上边的代码我们为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的重要流程。

通过id获取canvas对象
调用canvas对象的getContext()方法，并传入希望使用canvas的类型。这里我传入了“2d”来获取一个二维上下文。
调用三个方法，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);