Grafica.js 使用教程

最新推荐文章于 2024-09-01 09:14:43 发布

裴才隽Tanya

最新推荐文章于 2024-09-01 09:14:43 发布

阅读量562

点赞数 24

本文链接：https://blog.csdn.net/gitblog_01029/article/details/141772180

版权

Grafica.js 使用教程

grafica.jsA simple and configurable plotting library for p5.js项目地址:https://gitcode.com/gh_mirrors/gr/grafica.js

项目介绍

Grafica.js 是一个简单且可配置的绘图库，专为 p5.js 设计。它是 Processing 库 grafica 的 JavaScript 版本。使用 Grafica.js，您可以轻松创建 2D 图表，并充分利用 Processing 在网页上的交互功能。

项目快速启动

安装

下载最新版本的压缩库：

git clone https://github.com/jagracar/grafica.js.git

在您的 HTML 文件中引入 Grafica.js：

<script src="path/to/grafica.js"></script>

示例代码

以下是一个简单的示例，展示如何使用 Grafica.js 绘制一个散点图：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Grafica.js 示例</title>
    <script src="path/to/p5.js"></script>
    <script src="path/to/grafica.js"></script>
</head>
<body>
    <script>
        function setup() {
            createCanvas(400, 400);
            let plot = new GPlot(this);
            plot.setPos(0, 0);
            plot.setOuterDim(width, height);

            let points = [];
            for (let i = 0; i < 10; i++) {
                points.push(new GPoint(random(width), random(height)));
            }

            plot.setPoints(points);
            plot.setPointColor(color(255, 0, 0));
            plot.setLineColor(color(0, 0, 255));
            plot.defaultDraw();
        }

        function draw() {
            background(255);
            plot.defaultDraw();
        }
    </script>
</body>
</html>