很多站长朋友们都不太清楚怎么用html来做曲线图，今天小编就来给大家整理怎么用html来做曲线图，希望对各位有所帮助，具体内容如下：
本文目录一览： 1、 html里，用什么绘制曲线图 2、 html里怎么做动态的曲线图呢？如截图 3、 如何使用html5的canvas 做一个曲线图 请附小例子 4、 HTML5中如何绘制图表？ html里，用什么绘制曲线图选数据区域——菜单栏——插入——图表——自定义类型：两轴线-柱图——下一步——下一步： 标题：输入相应标题；网络线：数值(Y)轴：主要网络线；图例：显示图例（取消勾选，你的抓图没有）；数据标志：值；数据表：显示数据表——完成。
html里怎么做动态的曲线图呢？如截图H5里面做动态曲线的话一般是用SVG图形+动画来做，但是如果你是用工具的话可以直接把在设计软件中做好的SVG图形，代码复制到H5工具，然后加SVG动画就可以了。
如何使用html5的canvas 做一个曲线图 请附小例子在右边在绘制一条直线角度和右边的棱大约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>
HTML5中如何绘制图表？图表的背景一般是精心设计的它有一定的梯度、网格线、号码标签和月份名称等等，如果直接通过JavaScript进行绘制可能需数十行或上百行的代码。但是如果我们直接通过Canvas直接创建一个背景图。我们只需要在其他的软件如PS上绘制好一个背景图，然后加载到Canvas上就可以了。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>绘制图表</title>
</head>
<body>
<div id="result-stub" class="well hidden">
<canvas id="canvas" width="345" height="345">
<p>你的浏览器不支持canvas元素</p>
</canvas>
</div>
<script>
// 1、要绘制图表首先我们要获取到canvas对象以及具有图表背景的图片对象。
var
canvas = document.getElementById('canvas'),
context = null;
context = canvas.getContext('2d');
var img = new Image();
img.src ='chart-background.png';//这里是一张具有图表背景的图片
// 2、绘制一个具有图表背景的图片后再根据要绘制的曲线图各个点在canvas是中的坐标绘制直线。
img.onload = function() {
//绘制图片
context.drawImage(img, 0, 0);
//绘制直线
context.beginPath();
context.moveTo(70, 105);
context.lineTo(105, 132);
context.lineTo(142, 250);
context.lineTo(176, 175);
context.lineTo(212, 145);
context.lineTo(245, 197);
context.lineTo(280, 90);
context.stroke();
}
</script>
<script src="jquery.js"></script>
</body>
</html>
3、本示例的最终绘制效果如下：这样一个曲线图表就绘制出来的，其他的图表也可以用类似的方法进行绘制。
这些都是有关于HTML5新特性的一些应用。给你推荐一个教程网站秒秒学，该网站上有关于HTML5新特性的讲解。
关于怎么用html来做曲线图的介绍到此就结束了，不知道本篇文章是否对您有帮助呢？如果你还想了解更多此类信息，记得收藏关注本站，我们会不定期更新哦。
查看更多关于怎么用html来做曲线图 如何创建曲线图的详细内容...