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

 我来答

1个回答

#热议# 为什么说不要把裤子提到肚脐眼？

地瓜说机
2017-09-08 · TA获得超过2.9万个赞

知道大有可为答主

回答量：2.3万

采纳率：91%

帮助的人：1.2亿

我也去答题访问个人页

关注

展开全部

在右边在绘制一条直线角度和右边的棱大约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>

本回答由提问者推荐