主要是熟悉canvas里面的画图，在加上一定的数据基础，就可以画出好看的东西。

输入代码：

————————————————————————————————-

< html> < head> < meta charset=”utf-8″> < title>html5话出带圆的波浪线 < style> canvas {display: block; margin: 20px auto; border: 1px solid #333} < /style> < /head>

//第二段 context.beginPath(); context.arc(x+2*radius,y,radius,startAngel,endAngel,true); context.lineWidth = 3; context.stroke();

//第三段 context.beginPath(); context.arc(x+4*radius,y,radius,startAngel,endAngel,false); context.lineWidth = 3; context.stroke();

//第四段 context.beginPath(); context.arc(x+6*radius,y,radius,startAngel,endAngel,true); context.lineWidth = 3; context.stroke();

//画线上小圆 context.beginPath(); context.arc(x-radius,y,radius*0.2,0*startAngel,endAngel,false); context.lineWidth = 3; context.stroke(); context.fillStyle = “#495AFE”; context.fill();

context.beginPath(); context.arc(x+radius,y,radius*0.2,0*startAngel,endAngel,false); context.lineWidth = 3; context.stroke(); context.fillStyle = “#495AFE”; context.fill();

context.beginPath(); context.arc(x+3*radius,y,radius*0.2,0*startAngel,endAngel,false); context.lineWidth = 3; context.stroke(); context.fillStyle = “#495AFE”; context.fill();

context.beginPath(); context.arc(x+5*radius,y,radius*0.2,0*startAngel,endAngel,false); context.lineWidth = 3; context.stroke(); context.fillStyle = “#495AFE”; context.fill();

context.beginPath(); context.arc(x+7*radius,y,radius*0.2,0*startAngel,endAngel,false); context.lineWidth = 3; context.stroke(); context.fillStyle = “#495AFE”; context.fill();

//画上方的圆 context.beginPath(); context.arc(x,y-radius,radius*0.2,0*startAngel,endAngel,false); context.lineWidth = 3; context.stroke(); context.fillStyle = “#495AFE”; context.fill();

context.beginPath(); context.arc(x+2*radius,y+radius,radius*0.2,0*startAngel,endAngel,false); context.lineWidth = 3; context.stroke(); context.fillStyle = “#495AFE”; context.fill();

//画下方的圆 context.beginPath(); context.arc(x+4*radius,y-radius,radius*0.2,0*startAngel,endAngel,false); context.lineWidth = 3; context.stroke(); context.fillStyle = “#495AFE”; context.fill();

context.beginPath(); context.arc(x+6*radius,y+radius,radius*0.2,0*startAngel,endAngel,false); context.lineWidth = 3; context.stroke(); context.fillStyle = “#495AFE”; context.fill();

}; < /script>

< canvas id=”myCanvas” width=”800px” height=”200px”> < /body> < /html>

——————————————————————————————-