getContext()：返回一个用于在画布上绘图的环境，2d表示二维绘图；
beginPath()：开始一条路径，或重置当前的路径；
moveTo()：把路径移动到画布中的指定点，不创建线条。
lineTo()：添加一个新点，然后创建从该点到画布中末了指定点的线条（该方法并不会创建线条）；
closePath()：创建从当前点到开始点的路径；
strokeStyle属性：设置或返回用于笔触的颜色、渐变或模式；
stroke()：会实际地绘制出路径；
fillStyle属性：设置或返回用于添补绘画的颜色、渐变或模式；
fill()：添补任前的图像（路径），默认颜色是玄色；
//空心三角形var canvas=document.getElementById(\公众myCanvas\公众);var cxt=canvas.getContext(\公众2d\"大众);cxt.beginPath();cxt.moveTo(50,50);cxt.lineTo(100,50);cxt.lineTo(75,100);cxt.closePath();//添补或闭合 须要先闭合路径才能画cxt.strokeStyle=\"大众red\公众;cxt.stroke();//实心三角形cxt.beginPath();cxt.moveTo(150,50);cxt.lineTo(250,50);cxt.lineTo(200,150);cxt.closePath();cxt.fillStyle=\公众#89E1BF\公众cxt.fill();
演示图
图1
七、利用Canvas绘制一个空心圆arc()：创建弧或曲线（用于创建圆或部分圆）；
<body> <canvas id=\"大众myCanvas\"大众 width=\公众200\公众 height=\"大众200\"大众 style=\公众border:1px solid #000;\"大众></body><script type=\"大众text/javascript\"大众> var can=document.getElementById(\公众myCanvas\公众) var ctx=can.getContext(\"大众2d\"大众); //创建context工具 ctx.beginPath();//标志开始一个路径 ctx.arc(100,100,50,0,2Math.PI);//在canvas中绘制圆形 ctx.stroke() </script>
演示图
图2
八、绘制一个实心圆<body> <canvas id=\"大众myCanvas\"大众 width=\公众200\"大众 height=\公众200\公众 style=\"大众border:1px solid #000;\"大众></body><script type=\"大众text/javascript\公众> var c=document.getElementById(\"大众myCanvas\"大众); var ctx=c.getContext(\公众2d\"大众); ctx.beginPath(); ctx.arc(100,100,50,0,2Math.PI); ctx.fillStyle=\"大众#deffff\公众; ctx.fill(); ctx.strokeStyle=\"大众red\"大众 ctx.stroke(); </script>
演示图
图3
九、绘制一个空心矩形strokeRect()：绘制矩形（不填色），笔触的默认颜色是玄色；
<body> <canvas id=\"大众myCanvas\"大众 width=\公众300\"大众 height=\"大众300\"大众 style=\"大众border:1px solid #000;\"大众></body><script type=\"大众text/javascript\公众> var can=document.getElementById(\公众myCanvas\公众); //得到画板数据 var ctx=can.getContext('2d'); //得到笔刷 ctx.strokeStyle=\"大众blue\"大众; //设置线条颜色 ctx.strokeRect(100,100,100,100); //线条画矩形 </script>
演示图
图4
十、绘制一个实心的矩形fillRect()：绘制“已填色”的矩形，默认的添补颜色是玄色；
<body> <canvas id=\"大众myCanvas\"大众 width=\"大众300\公众 height=\公众300\"大众 style=\公众border:1px solid #000;\"大众></body><script type=\"大众text/javascript\公众>var can=document.getElementById(\公众myCanvas\"大众);//得到画板数据var ctx=can.getContext('2d'); //得到笔刷 ctx.strokeStyle=\"大众blue\"大众; //设置线条颜色 ctx.fillStyle=\"大众#ddedee\公众; //添补矩形 ctx.fillRect(100,100,100,100); ctx.strokeRect(100,100,100,100);//线条画矩形 </script>
演示图
图5
