<!DOCTYPE HTML>
<html>
<title>Canvas直线</title>
<body>
<canvas id="myCanvas" width="200" height="200" style="border:#06F 1px solid;">
您的浏览器不支持Canvas.
</canvas>
<script type="text/javascript">
var c = document.getElementById("myCanvas");
var cxt = c.getContext("2d");
cxt.save();//保存当前绘制状态
cxt.translate(50,50);//向右下方移动绘制上下文
cxt.beginPath();
cxt.moveTo(50,0);
cxt.lineTo(50,100);
cxt.moveTo(0,50);
cxt.lineTo(100,50);
cxt.moveTo(100,0);
cxt.lineTo(0,100);
cxt.moveTo(0,0);
cxt.lineTo(100,100);
cxt.stroke();
cxt.restore();//恢复原有的绘图状态
</script>
</body>
</html>
显示效果如下
【Canvas 上使用变换(translation)绘制图像，和前面的文章显示是一样的，但是代码不同。变换(translation)是介于开发人员发出的指令和Canvas显示之间的一个修正层。在应用的时候可以被顺序应用，组合或者随意修改。】