使用HTML和JavaScript绘制对角线图形-优快云博客

<!DOCTYPE HTML>
<HTML>
 <HEAD>
  <!--http://www.xiaoxiaozi.com/2011/06/03/2123/-->
  <TITLE> New Document </TITLE>
  <script>
      function drawDiagonal() {
			//获得canvas对象
            var canvas = document.getElementById('diagonal');

			//指定绘制的类型为2d，并返回其绘画环境
            var context = canvas.getContext('2d');
			
			//保存变换前的context状态
            context.save();

			//平移坐标系 
            context.translate(200,0);

			//开始绘制图形:canvas需要据此计算图形的内部和外部范围
			//以便后续的描边和填充
			context.beginPath();

			//这个0,0 其实是200，0
            context.moveTo(0,0);
            context.lineTo(-200,200);

			//moveTo 不绘制，只是当前位置移动到新的坐标
            context.moveTo(-200,0);

			//不仅移动坐标，而且在两个坐标之间画线，但不是真正画出图形
            context.lineTo(0,200);
			
			//恢复context平移前的状态
            context.restore();

            //这时候的100,0是真正相对于原来的0，0时的100，0
            context.moveTo(100,0);
            context.lineTo(100,200);
            context.moveTo(0,100);
            context.lineTo(200,100);

			//把所有的线绘制到canvas上
            context.stroke();
	  }
	  window.addEventListener("load", drawDiagonal, true);
  </script>
 </HEAD>

 <BODY>
	<canvas id="diagonal" height="200" width="200" style="border:1px solid red"></canvas>
 </BODY>
</HTML>

html5_canvas