canvas.

1.矩形
//获取画布
var mycanvasEle = document.getElementById("mycanvas");
//内容
var ctx = mycanvasEle.getContext("2d");
// (x, y, width, heiht)
ctx.rect(200, 200, 100, 100);//
//设置颜色
ctx.fillStyle = "gray";
//填充
ctx.fill();//画上去
ctx.stroke();
-fill填充满
-stroke为描边
2.线条
//把笔头挪动到某个位置
ctx.moveTo(100, 20);
//从当前位置画到某个位置
ctx.lineTo(100, 100);
ctx.lineTo(130, 100);
ctx.stroke();
// ctx.fill();
-fill时链接起点到终点
3.画圆
（x y 圆的半径 开始角到结束角 ）
ctx.arc(100, 100, 20, 0.5 * Math.PI, 2 * Math.PI);
ctx.stroke();
//ctx.fill();//
-fill时从结束点到起始点全部填满
4.文字
ctx.font = "20px 微软雅黑"; 字号字体
ctx.textBaseline = "top"; 位置
ctx.shadowBlur = 10; 阴影半径
ctx.shadowColor="black"; 阴影颜色
ctx.fillText("hello word！！", 0, 0);文字以及出现的x和y位置
5. save&restore
ctx.save();//保存当前状态
ctx.rect(100, 100, 100, 100);
ctx.fillStyle = "yellow";//状态1~~~（会影响所有的图形）
ctx.translate(100, 100);//状态2~~~
ctx.restore();//回到上一个save的状态
ctx.fill();
//save和restore要搭配使用，不然要出问题
只影响上一个状态，回到状态之前的样子
6.closePath&beginPath
ctx.rect(50, 50, 100, 100);
ctx.arc(50, 50, 50, 0, Math.PI * 2);
ctx.beginPath();//清空缓存的图形（矩形、线条、原型）
ctx.stroke();
ctx.moveTo(50, 150);
ctx.lineTo(50, 250);
ctx.lineTo(100, 250);
ctx.closePath();//回到起点
ctx.stroke();
//套路：一块整体中，先beginPath开头，closePath结束
清空后新建之前的不会被覆盖