<!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();不要这两句也能绘制成功,可能这两句与绘制多个对象时有关系。还没有学习到。下来再研究。