HTML5 Canvas API 变换(translate函数)

追夢-微发微积 · 发表于 2012-10-25 00:25:29

下面我们来看下在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>

		自动登录	找回密码
密码			立即注册