<!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>
