传智博客
快捷导航
蚂蚁部落
蚂蚁部落 网站首页 实例代码 canvas实例 查看内容

canvas实现的画曲线图效果

2017-10-24 14:18| 发布者: admin| 查看: 153| 评论: 0|来自: 蚂蚁部落

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

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<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">浏览器不支持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>

鲜花

握手

雷人

路过

鸡蛋

最新评论

关于我们|手机版|小黑屋| ( 鲁ICP备10022556号-3 )

GMT+8, 2017-11-19 20:22 , Processed in 0.086618 second(s), 22 queries .

Powered by Discuz! X3.2 Licensed

Copyright © 2012-2017 Design: 蚂蚁部落

返回顶部