你的位置:首页 > 网页设计

[网页设计]HTML5的canvas实现的画曲线图效果


HTML5的canvas实现的画曲线图效果:

本章节分享一段代码实例,此代码能够实现画曲线图和心形图等,感兴趣的朋友可以自己做一下分析。

代码实例如下:

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.51texiao.cn/" /><title>蚂蚁部落</title><style type="text/css">#apDiv1 {  position:absolute;  width:120px;  height:300px;  z-index:1;  left: 840px;  top: 80px;}</style></head><body><canvas id="canvas" width="900" height="600" style="border:1px solid #c3c3c3">浏览器不支持canvas</canvas><div id="apDiv1"> <form>  玫瑰曲线方程:  r=a+bsin(m/n*x)  选择参数:  m:<input type="number" name="m" min="2" max="29" value="29"/>  n:<input type="number" name="n" min="1" max="12" value="11"/>  a:<input type="number" name="a" min="0" max="5" value="1"/>  b:<input type="number" name="b" min="1" max="7" value="5"/>  <input type="button" value=" 画 图 " onClick="draw();">  <hr>  <input type="button" value=" 画 图 2 " onClick="draw2();">  <hr>  <input type="button" value=" 心形图 " onClick="draw3();"> </form></div><script type="text/javascript"> function draw(){  var ctx = document.getElementById('canvas').getContext('2d');  ctx.save();  ctx.translate(400,300);  ctx.clearRect(-400,-300,800,600); ctx.strokeStyle = "#cc0000";  var a = 0, b = 1, m = 6, n = 1; m = document.forms[0].m.value; n = document.forms[0].n.value; a = document.forms[0].a.value;  b = document.forms[0].b.value;  drawRose(ctx,a,b,m,n);  ctx.restore(); } function drawRose(ctx,a,b,m,n){  ctx.beginPath();  var e = 0, c = 120;  var k = 2 * Math.PI / 360; do {   var r = a/b + Math.sin( m * e / n * k);  r = r * c;   var x = r * Math.cos( e * k );  var y = r * Math.sin( e * k );  e += 0.1;   ctx.lineTo(x,y);  }  while ( e <= 4320 );  ctx.stroke(); } function draw2(){  var ctx = document.getElementById('canvas').getContext('2d');  ctx.save();  ctx.translate(400,300);  ctx.clearRect(-400,-300,800,600); ctx.strokeStyle = "#cc0000";  ctx.beginPath(); //ctx.moveTo(0,0); var e = 0, c = 150;  var k = 2 * Math.PI / 360; do {   x = 150*Math.cos( 5/2 * e*k ) + 50*Math.cos( 15/16 * 5/2 * e*k );   y = 150*Math.sin( 5/2 * e*k ) - 50*Math.sin( 15/16 * 5/2 * e*k );   e += 0.1;   ctx.lineTo(x,y);  }  while ( e <= 3600 );  ctx.stroke();  ctx.restore();} function draw3(){  var ctx = document.getElementById('canvas').getContext('2d');  ctx.save();  ctx.translate(400,300);  ctx.clearRect(-400,-300,800,600); ctx.strokeStyle = "#ff0000";  ctx.beginPath();  var x = 1, y; do {   y = -80*(Math.sqrt(1-x*x) + Math.pow(x*x,1/3));   x -= 0.001;   ctx.lineTo(100*x,y);  }  while ( x >= -1 );  do {   y = 80*(Math.sqrt(1-x*x) - Math.pow(x*x,1/3));   x += 0.001;   ctx.lineTo(100*x,y);  }  while ( x <= 1 ); ctx.closePath();   var grad = ctx.createRadialGradient(-40,-60,10,-40,-40,200); grad.addColorStop(0, "#ffcc00");  grad.addColorStop(1, "#ff0000");  ctx.fillStyle = grad; ctx.fill();  ctx.restore();} window.onload=function (){  draw();} </script></body></html>

原文地址是:http://www.51texiao.cn/HTML5jiaocheng/2015/0613/4159.html

最为原始地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=13478