使用Canvas绘制图表

使用Canvas绘制图表

Canvas是HTML5新增的一个元素，它可以通过JavaScript来绘制图形。在本文中，我们将学习如何使用Canvas绘制各种图表。

绘制折线图

要绘制折线图，首先需要创建一个canvas元素，并指定其宽度和高度：

<canvas id="lineChart" width="400" height="300"></canvas>

然后，我们可以使用getContext方法获取绘图上下文：

var canvas = document.getElementById('lineChart');
var ctx = canvas.getContext('2d');

接下来，我们可以使用ctx的方法来绘制折线图的各个点和连线：

ctx.beginPath();
ctx.moveTo(50, 250);
ctx.lineTo(100, 200);
ctx.lineTo(150, 150);
ctx.lineTo(200, 100);
ctx.stroke();

通过以上代码，我们可以绘制一个简单的折线图。

绘制柱状图

要绘制柱状图，首先需要创建一个canvas元素，并指定其宽度和高度：

<canvas id="barChart" width="400" height="300"></canvas>

然后，我们可以使用getContext方法获取绘图上下文：

var canvas = document.getElementById('barChart');
var ctx = canvas.getContext('2d');

接下来，我们可以使用ctx的方法来绘制柱状图的各个柱子：

ctx.fillStyle = 'blue';
ctx.fillRect(50, 200, 50, 100);
ctx.fillStyle = 'red';
ctx.fillRect(150, 150, 50, 150);
ctx.fillStyle = 'green';
ctx.fillRect(250, 100, 50, 200);

通过以上代码，我们可以绘制一个简单的柱状图。

以上是使用Canvas绘制折线图和柱状图的简单示例，希望可以帮助你入门Canvas绘图。如果还有其他问题，请随时向我提问。

本文为翻滚的胖子原创文章,转载无需和我联系,但请注明来自猿教程iskeys.com

• 上一篇： 使用Canvas绘制折线图
• 下一篇： 使用Canvas绘制二次贝塞尔曲线