canvas

html中，<canvas>标签规定一个图形容器（画布），然后通过脚本（ JavaScript等）来绘制具体图形

1 <canvas>标签常用的属性有id属性、width属性、height属性。id属性经常被脚本引用，width属性、height属性用来规定画布（容器）的宽高。
2 在该标签中建议写一段文本，当一些浏览器不支持的时候显示该文本内容！

<canvas id="myCanvas" width="200px" height="100px">你的浏览器不支持canvas标签！</canvas>

// 找到 <canvas> 元素
var c = document.getElementById("myCanvas");
// 创建 context 对象
var ctx = c.getContext("2d");

// 使用 arc() 方法绘制一个圆
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI); // 参数依次为圆的中心的 x 坐标、圆的中心的 y 坐标、圆的半径、起始角、结束角、规定应该逆时针还是顺时针绘图（False = 顺时针，true = 逆时针）
ctx.stroke();

// 绘制文字
ctx.font="30px Arial";   // 字体大小以及字体
ctx.fillText("Hello World",10,50);   // 绘制实心文本，参数是文字以及坐标
strokeText("Hello World",10,50);   // 绘制空心文本，参数同上

// 绘制正方形
ctx.fillRect(0,0,800,800);   // 实心
ctx.strokeRect(0,0,800,800);   // 空心
//设定填充图形的样式
ctx.fillStyle = "#EEEEFF";
//设定图形边框的样式
ctx.strokeStyle = "blue";