HTML5 Canvas API 变换(translate函数)

下面我们来看下在canvas上绘制图像的另一种方式——变换(translate函数的应用）：

下面的代码：我们还是实现上篇文章的效果：画一条斜线。理论上的知识，自己买书去看吧！

<!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这两个坐标点连起来。

其它上篇已介绍过，就不多说了。如果觉得我理解错了，希望你能帮我指出来。在这里我还要向 artwl 表示感谢，他对我上某篇文章写的不好处的赐教。真心希望大家能赐教。。。。

posted @ 2012-09-29 00:42 追夢阅读(6616) 评论(2) 编辑收藏举报

刷新页面返回顶部

三秋邦

HTML5 Canvas API 变换(translate函数)

公告