html5_canvas_2-优快云博客

本文链接：https://blog.youkuaiyun.com/phoenix_qiqi/article/details/6976458

<!DOCTYPE HTML>
<HTML>
 <HEAD>
  
  <TITLE> New Document </TITLE>
  <script>
      function drawDiagonal() {
			//获得canvas对象
            var canvas = document.getElementById('diagonal');

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

			//开始绘制图形:canvas需要据此计算图形的内部和外部范围
			//以便后续的描边和填充
			context.beginPath();
	
			context.fillStyle="#f00";
			//圆心 x,y 坐标 半径 起始弧度 终止弧度 顺时针
            context.arc(100,150,6,0,Math.PI*2,true);
			
			//填充圆形
			context.fill();


			//边线颜色改成红色
			context.strokeStyle="#f00";

			//加宽线条
			context.lineWidth = 4;

			//平滑路径链接点
			context.lineJoin='round';

			context.moveTo(100,0);
			context.lineTo(0,200);
			context.lineTo(200,200);
			context.lineTo(100,0);

            //矩形 x,y 坐标，矩形 宽高
			context.fillRect(95, 50, 10, 90);


			//把所有的线绘制到canvas上
            context.stroke();

	  }
	  window.addEventListener("load", drawDiagonal, true);
  </script>
 </HEAD>

 <BODY>
	<canvas id="diagonal" height="200" width="200"></canvas>
 </BODY>
</HTML>