html5话出带圆的波浪线

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

输入代码:

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

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

<script> window.onload = function(){ var canvas = document.getElementById(“myCanvas”); var context = canvas.getContext(“2d”); var radius = 50; var x = 75; var y = 75; var startAngel = 1*Math.PI;//3.14 var endAngel = 2*Math.PI;//6.28 // 第一段 context.beginPath(); context.arc(x,y,radius,startAngel,endAngel,false); //context.closePath(); context.lineWidth = 3; context.stroke();

//第二段 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>

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

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

演示地址:http://www.cangzhang.com/wp-content/uploads/2012/08/canvas3.htm

共有 0 条评论

Top