<html>
<head>
<script>
window.οnlοad=function(){
var canvas=document.getElementById('cs'); //获取到canvas元素
var gt=canvas.getContext('2d'); //获取2d上下文对象
//[1] gt.fillRect(10,10,100,100) //在横坐标和纵坐标为10的地方创建一个长宽为100的方块
//[2]gt.strokeRect(10,10,100,100) //在横坐标和纵坐标为10的地方创建一个长宽为100的边框
//[3]gt.fillStyle='blue';
// gt.fillRect(10,10,100,100); //方块的颜色就变成了蓝色
//[4]gt.strokeStyle='green';
// gt.strokeRect(); //边框颜色就变成绿色
//[5]gt.lineWidth=20;
// gt.strokeRect(); //将边框宽度设置为20
//[6]gt.lineJoin(round)
// gt.strokeRect(); //设置成圆角的边框
//[7]gt.beginPath() //当在一个路径中创建两条线，第二条会覆盖掉第一条。因为在同一个路径；创建两个路径就不会覆盖
//[8]gt.closePath() //当两条或者多条线条，一边想接的时候，会自动生成一条之间将其闭合
//[9][10][11] gt.moveTo(50,50) //在坐标(50,50)开始绘制一个点
// gt.lineTo(150,150) //在坐标(150,150)绘制一个连接moveTo的点
// gt.stroke(); //绘制出路径
}
</script>
</head>
<body style="background:block"> //设置成和canvas不同颜色比较好区别
<canvas id="cs" width="400" height="400" style="background:white" ></canvas> //将canvas的画布设置成长为400和宽为400的白色背景
</body>
</html>
//[1]fillRect(X,Y,W,H) 创建一个默认黑色的方块。 X,Y 表示坐标；W，H表示宽高
//[2]strokeRect(X,Y,W,H) 创建一个默认黑色的边框。X,Y,W,同上
//[3]fillStyle 修改填充颜色
//[4]strokeStyle 修改边框颜色
//[5]lineWidth 修改边线的颜色
//[6]lineJoin(round or bevel) 修改边框样式 round 为圆角 bevel为斜切
//[7]beginPath() 开辟一条新路径
//[8]closePath() 闭合
//[9]moveTo(x,y) 将绘图游标移动到(x,y),就是在(x,y)这里开始绘图（一个点）
//[10]lineTo (x,y) 从上一个点绘画一条直线到(x,y)
//[11]stroke() stroke() 方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色。
//[12]fill() 由点绘制成图形的图形进行填充颜色
//[13]Rect(X,Y,W,H) 在指定坐标创建一个不填充颜色的方块（[1]其实就是[12]和[13]的总和）
//[14]clearRect(x,y,w,h) //清除掉画布上指定区域的东西