猿问

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

如何使用html5的canvas 做一个曲线图 请附小例子

如何使用html5的canvas 做一个曲线图 请附小例子


跃然一笑
浏览 470回答 3
3回答

慕斯王

在右边在绘制一条直线角度和右边的棱大约25°，要稍微短一些，然后连接；在右边在绘制一条直线角度和右边的棱大约35°；例子如下：<!DOCTYPE HTML><html><title>canvas test</title><head><style>#canvas{width:800px;height:800px;box-shadow: 0px 0px 10px rgba(0, 0, 0, .8);margin: 10px 10px;}</style></head><body><canvas id='canvas' width=800 height=800>unsupport</canvas></body><script>window.onload = function(){var canvas = document.getElementById('canvas');var ctx = canvas.getContext('2d');ctx.strokeColor = 'black';ctx.lineWidth = 3;ctx.shadowOffsetX = 10;ctx.shadowOffsetY = 5;ctx.shadowBlur = 2;ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';ctx.save();ctx.translate(100, 100);ctx.beginPath();ctx.moveTo(0, 0);ctx.lineTo(400, 0);ctx.moveTo(0, 0);for(var i = 0; i < 20; i += 0.1){var x = i * 20;var y = Math.sin(i) * 20;ctx.lineTo(x, y);}ctx.stroke();ctx.restore();ctx.save();ctx.translate(100, 200);ctx.beginPath();ctx.moveTo(0, 0);ctx.lineTo(400, 0);ctx.moveTo(0, 0);ctx.quadraticCurveTo(150, -100, 200, 0);ctx.quadraticCurveTo(250, 200, 400, 0);ctx.stroke();ctx.restore();ctx.save();ctx.translate(100, 400);ctx.beginPath();ctx.moveTo(0, 0);ctx.lineTo(400, 0);ctx.moveTo(0, 0);ctx.bezierCurveTo(50, 0, 100, -50, 150, -100);ctx.bezierCurveTo(175, -75, 150, -25, 100, 0);ctx.bezierCurveTo(300, -75, 600, -100, 400, 0);ctx.stroke();ctx.restore();ctx.save();ctx.translate(100, 600);ctx.beginPath();ctx.moveTo(0, 0);ctx.lineTo(400, 0);ctx.moveTo(0, -124);for(var i = 0; i < 25; i += 0.1){var x = i * 10;var y = -(((i - 12) * (i - 12)) - 20);ctx.lineTo(x, y);}ctx.stroke();ctx.restore();ctx.save();ctx.beginPath();ctx.moveTo(100, 0);ctx.lineTo(100, 800);ctx.stroke();ctx.restore();};</script></html>&nbsp;
0

一只名叫tom的猫

script代码var g=canvas.getContext("2d");g.beginPath();g.strokeStyle="#F00";g.moveTo(0,0);g.bezierCurveTo(300,0, 0,300, 200,200);g.stroke();
0

慕森卡

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576<!DOCTYPE&nbsp;html><html><head>&nbsp;&nbsp;&nbsp;&nbsp;<title>Cos演示</title>&nbsp;&nbsp;&nbsp;&nbsp;<meta&nbsp;charset='utf-8'></head><body&nbsp;style='text-align:center'><canvas&nbsp;width='800'&nbsp;height='600'&nbsp;id='canvas'&nbsp;style='border:1px&nbsp;solid'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</canvas><script>&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;canvas=document.getElementById('canvas');&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;ctx=canvas.getContext('2d');&nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;drawAxis(){&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctx.translate(400,300);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//x&nbsp;轴&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctx.beginPath();&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctx.moveTo(-380,0);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctx.lineTo(380,0);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctx.lineTo(372,3);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctx.lineTo(372,-3);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctx.lineTo(380,0);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctx.stroke();&nbsp;&nbsp;&nbsp;//描边&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//y&nbsp;轴&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctx.moveTo(0,200);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctx.lineTo(0,-200);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctx.lineTo(3,-192);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctx.lineTo(-3,-192);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctx.lineTo(0,-200);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctx.stroke();&nbsp;&nbsp;&nbsp;//描边&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//画坐标&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctx.save();&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctx.strokeStyle='rgba(100,100,255,0.5)';&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctx.moveTo(-Math.PI*100,100);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctx.lineTo(-Math.PI*100,-100);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctx.lineTo(Math.PI*100,-100);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctx.lineTo(Math.PI*100,100);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctx.lineTo(-Math.PI*100,100);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctx.stroke();&nbsp;&nbsp;&nbsp;//描边&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctx.fillStyle='rgba(0,0,0,1)';&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctx.fillText("-π",-Math.PI*100,10);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctx.fillText("π",Math.PI*100,10);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctx.fillText("-1",5,100);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctx.fillText("1",5,-100);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctx.restore();&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;drawCos(){&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;x&nbsp;=&nbsp;-Math.PI*100;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctx.beginPath();&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctx.moveTo(x,100);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for(x&nbsp;=&nbsp;-Math.PI*100;x<Math.PI*100;x++){&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;cx&nbsp;=&nbsp;x/100;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;cy&nbsp;=&nbsp;Math.cos(cx);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;y&nbsp;=&nbsp;-cy*100;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctx.lineTo(x,y);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctx.stroke();&nbsp;&nbsp;&nbsp;//描边&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;draw(){&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctx.clearRect(0,0,canvas.width,canvas.height);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctx.save();&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctx.shadowColor='rgba(0,0,0,0.8)';&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctx.shadowOffsetX=12;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctx.shadowOffsetY=12;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctx.shadowBlur=15;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;drawAxis();&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;drawCos();&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctx.restore();&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;ctx.fillStyle='rgba(100,140,230,0.5)';&nbsp;&nbsp;&nbsp;&nbsp;ctx.strokeStyle='rgba(33,33,33,1)';&nbsp;&nbsp;&nbsp;&nbsp;draw();</script></body></html>&nbsp;
0
打开App，查看更多内容
随时随地看视频慕课网APP

相关分类

Html5