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";