<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body style="margin: 0"> <canvas id="myCanvas" width="300" height="150" style=" border:1px solid black ;" > <!-- body里创建一个cavas画板，直接设定他的长度宽度，样式里的边框。--> </canvas> <script type="text/javascript"> var c=document.getElementById("myCanvas");/*获取创建的canvas*/ var cxt= c.getContext("2d");/*创建一个画笔与之关联*/ cxt.fillStyle="rgb(0,255,0)"; /* 填充颜色 "rgb(0,0,0)"这是一种颜色的表现形式。 还有就是#ffffff 一共六 位，也是RGB，十六位进制 还有别的颜色形式 具体的参见http://www.w3school.com.cn/cssref/css_colors_legal.asp CSS 合法颜色值*/ cxt.beginPath();/*起始一条路径，或者重置当前路径。*/ cxt.arc(70,30,30,0,Math.PI*2,true); /*画圆函数，（座标X，座标Y，半径，起始角度，结束角度，顺时针或者逆时针） * http://www.w3school.com.cn/tags/canvas_arc.asp * */ cxt.closePath();/*创建从当前点回到起始点的路径*/ cxt.fill();/*填充当前绘图（路径），没有这个，绘制不出来*/ </script> </body> </html>
具体效果如下：
思路解释如下：
在body里创建一个canvas标签用作画板。
<canvas id="myCanvas" width="300" height="150" style=" border:1px solid black ;" > <!-- body里创建一个cavas画板，直接设定他的长度宽度，样式里的边框。--> </canvas>并且在canvas标签里设置一些他的属性。属性赋值时一般都是 xx="yyy" 而属性里具有别的属性还要赋值时， 格式是 xx:y (可能有特殊情况，因为我学习的还不是很多)
接着将绘制函数写在script标签里，sc标签直接写在body里，也可写在head里。
<script type="text/javascript"> var c=document.getElementById("myCanvas");/*获取创建的canvas*/ var cxt= c.getContext("2d");/*创建一个画笔与之关联*/ cxt.fillStyle="rgb(0,255,0)"; /* 填充颜色 "rgb(0,0,0)"这是一种颜色的表现形式。 还有就是#ffffff 一共六 位，也是RGB，十六位进制 还有别的颜色形式 具体的参见http://www.w3school.com.cn/cssref/css_colors_legal.asp CSS 合法颜色值*/ cxt.beginPath();/*起始一条路径，或者重置当前路径。*/ cxt.arc(70,30,30,0,Math.PI*2,true); /*画圆函数，（座标X，座标Y，半径，起始角度，结束角度，顺时针或者逆时针） * http://www.w3school.com.cn/tags/canvas_arc.asp * */ cxt.closePath();/*创建从当前点回到起始点的路径*/ cxt.fill();/*填充当前绘图（路径），没有这个，绘制不出来*/ </script>cxt.beginPath(); cxt.closePath();不要这两句也能绘制成功，可能这两句与绘制多个对象时有关系。还没有学习到。下来再研究。