下面我们来看下在canvas上绘制图像的另一种方式——变换(translate函数的应用）：
下面的代码：我们还是实现上篇文章的效果：画一条斜线。理论上的知识，自己买书去看吧！
1、首先通过ID找到并访问canvas对象。
2、接着通过调用canvas对象的getContext函数获取上下文对象。
3、接下来，保存尚未修改的context对象，这样我们即使通过moveTo、lineTo、translate等操作后，我们还是可以恢复到这个状态，然后开始绘画另一个副图，或者另外一些操作。
4、下一步是在context中调用translate函数。通过这个操作，当进行平移行为(moveTo)发生时，我们的提供的变换坐标 ｛translate(70,140)｝会被加到结果坐标 ｛moveTo(0,0)｝上去，结果移动到了坐标点(70,140){即横向：70，纵向：140}(我们暂时称坐标A吧)上面了。
5、上一步完成后，我们调用lineTo(70，-70)，意思是在上一个坐标点(70,140)上横向加70(70+70=140)，纵向减70(140-70=70)，于是我们得一点(140，70)(我们暂时称为坐标B吧),得到两个坐标点后，lineTo方法告诉我们用一条直线把A、B这两个坐标点连起来。
下面的代码：我们还是实现上篇文章的效果：画一条斜线。理论上的知识，自己买书去看吧！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>转换</title>
<style type="text/css">
#diagonal {
border: 1px solid red;
width: 200px;
height: 200px;
}
</style>
<script type="text/javascript">
function drawDiagonal() {
//取得canvas元素及其绘图上下文
var canvas = document.getElementById("diagonal");
var context = canvas.getContext("2d");
//保存当前绘画状态，以便我们画完这副画以后，再恢复到这个状态，画另一副画。
context.save();
//向右下方移动绘图上下文
context.translate(70, 140);
//以原点为起点，绘制与前面相同的线段
context.beginPath();
context.moveTo(0, 0);
context.lineTo(70, -70);
//将这条线绘制到canvas画布上去。
context.stroke();
//恢复原有的绘图状态
context.restore();
//可以开始另外一副绘图。。。。。。
}
window.addEventListener("load", drawDiagonal, true);
</script>
</head>
<body>
<canvas id="diagonal"></canvas>
</body>
</html>1、首先通过ID找到并访问canvas对象。
2、接着通过调用canvas对象的getContext函数获取上下文对象。
3、接下来，保存尚未修改的context对象，这样我们即使通过moveTo、lineTo、translate等操作后，我们还是可以恢复到这个状态，然后开始绘画另一个副图，或者另外一些操作。
4、下一步是在context中调用translate函数。通过这个操作，当进行平移行为(moveTo)发生时，我们的提供的变换坐标 ｛translate(70,140)｝会被加到结果坐标 ｛moveTo(0,0)｝上去，结果移动到了坐标点(70,140){即横向：70，纵向：140}(我们暂时称坐标A吧)上面了。
5、上一步完成后，我们调用lineTo(70，-70)，意思是在上一个坐标点(70,140)上横向加70(70+70=140)，纵向减70(140-70=70)，于是我们得一点(140，70)(我们暂时称为坐标B吧),得到两个坐标点后，lineTo方法告诉我们用一条直线把A、B这两个坐标点连起来。
175
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
