绘制曲线

于 2019-10-06 11:12:04 发布
阅读量200 收藏
点赞数
分类专栏： 前端 文章标签： html js
原文链接：https://www.mk2048.com/blog/blog.php?id=haccai0bhkab&title=%E7%BB%98%E5%88%B6%E6%9B%B2%E7%BA%BF
版权

<!doctype html>

<html>

 

<head>

    <meta charset="utf-8">

    <title>绘制曲线-jq22.com</title>

    <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>

    <style>

        body {

 

  margin:0;

  min-height:100vh;

  overflow:hidden;

  font-family:Helvetica,Sans-serif;

  font-size:85%;

}

 

 

form {

  position:absolute;

  top:0;

  left:0;

  z-index:100;

 

  padding:8px;

  font-size:80%;

}

 

form input[type=text] {

  width:30px;

  border:1px solid #000;

  text-align:center;

}

form button {

  margin:4px auto;

  border:1px solid #000;

  display:block;

}</style>

</head>

 

<body>

    <form id="settings" οnsubmit="return false">

        Balls<br />

        <input type="range" id="inNum" value="20" min="4" max="300" /><br />

        Size<br />

        <input type="range" id="inSize" value="20" min="2" max="100" /><br />

        Speed<br />

        <input type="range" id="inSpeed" value="5" min="1" max="20" /><br />

        Delay<br />

        <input type="range" id="inDelay" value="8" min="1" max="50" /><br />

        <button id="btnSet">Go!</button><br />

        Presets:

        <button id="preset1">Atomic</button>

        <button id="preset2">Flower</button>

        <button id="preset3">Spiro</button>

        <button id="preset4">YinYang</button>

        <button id="preset0">Default</button>

    </form>

    <script type="text/javascript">

    // Create Canvas.

    var canvas = document.createElement('canvas');

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

    // Store all particles.

    var particles = [];

    // The default colorset.

    // Configure settings options

    var config = {};

    var settings = document.getElementById('settings');

    initSettings();

    // Init.

    resize();

    // Fire the Go! button.

    settings.btnSet.onclick();

    // Attach canvas.

    document.body.appendChild(canvas);

    // Begin drawing.

    window.requestAnimationFrame(draw);

    // Sync canvas to window.

    window.onresize = resize;

 

    function createBall(angle) {

        var n = 1;

        var origin = [

            canvas.width / 2,

            canvas.height / 2

        ]

        for (var i = 0; i < n; i ) {

            particles.push(new particle({

                angle: angle,

                pos: [origin[0], origin[1]],

                size: config.size,

                speed: config.speed,

                index: i

            }));

        }

    }

 

    function start(delay) {

        clear();

        config.toCreate = config.num;

    }

    // Drawing.

    var tick = 0;

 

    function draw() {

        for (var i = 0; i < particles.length; i ) {

            var p = particles[i];

            p.move();

            p.draw(ctx);

        }

        fade();

        window.requestAnimationFrame(draw);

        if (config.toCreate) {

            if (!(tick % (config.delay))) {

                createBall((180 / config.num) * config.toCreate);

                config.toCreate--;

            }

        }

        tick ;

    }

 

    function particle(options) {

        this.angle = 0;

        this.curve = 0;

        this.pos = [0, 0];

        this.size = 100;

        this.speed = 1;

        this.tick = 0;

        this.color = 'rgba(255,64,64,.95)';

        this.hue = 0;

        this.waveX = false;

        this.waveY = false;

        this.index = 0;

        // Override defaults.

        for (var i in options) {

            this[i] = options[i];

        }

        this.move = function() {

            this.angle = this.curve;

            var radians = this.angle * Math.PI / 180;

            this.pos[0] = Math.cos(radians) * this.speed * Math.cos(this.tick / 50),

                this.pos[1] = Math.sin(radians) * this.speed * Math.cos(this.tick / 50);

            this.hue

            this.color = 'hsl(' this.hue ', 80%, 65%)';

            this.tick ;

        }

        this.draw = function(ctx) {

            ctx.strokeStyle = this.color;

            ctx.beginPath();

            ctx.arc(this.pos[0], this.pos[1], this.size, 0, 2 * Math.PI);

            ctx.stroke();

        }

    }

 

    function preset(options) {

        for (var i in options) {

            if (settings[i].type == 'checkbox') {

                settings[i].checked = options[i];

                continue;

            }

            settings[i].value = options[i];

        }

        clear();

        settings.btnSet.onclick();

    }

 

    function fade() {

        ctx.beginPath();

        ctx.fillStyle = 'rgba(0, 0, 0, .03)';

        ctx.fillRect(0, 0, canvas.width, canvas.height);

        ctx.fill();

    }

 

    function clear() {

        ctx.beginPath();

        ctx.fillStyle = 'rgba(0, 0, 0, 1)';

        ctx.fillRect(0, 0, canvas.width, canvas.height);

        ctx.fill();

        particles.length = 0;

    }

 

    function resize() {

        canvas.width = window.innerWidth;

        canvas.height = window.innerHeight;

    }

    /* Common functions */

    function rand(min, max) {

        return Math.random() * (max - min) min;

    }

 

    function randColor(min, max) {

        var r = Math.floor(rand(min, max)),

            g = Math.floor(rand(min, max)),

            b = Math.floor(rand(min, max));

        return 'rgba(' r ',' g ',' b ',1)';

    }

    // Settings

    function preset(options) {

        for (var i in options) {

            settings[i].value = options[i];

        }

        settings.btnSet.onclick();

    }

 

    function initSettings() {

     

 


更多专业前端知识，请上 【猿2048】www.mk2048.com
qq_45670012
关注
专栏目录
使用JavaScript绘制曲线
PixelEnigma的博客
09-24 236
在JavaScript中，我们可以使用各种库和技术来绘制曲线。其中一个常用的库是Canvas API，它提供了一组用于绘制图形的方法和属性。你可以根据自己的需求和创意进一步探索和使用Canvas API或其他绘图库来创建更复杂和美观的曲线图形。除了Canvas API，还有其他的JavaScript库可以用于绘制曲线，例如D3.js和Chart.js。除了二次贝塞尔曲线，Canvas API还提供了绘制其他类型曲线的方法，如三次贝塞尔曲线和多边形曲线。你可以根据你的需求选择适合的方法进行绘制。
曲线绘制一般方法
goog
08-20 2552
曲线绘制一般方法 1.多个图像绘制 1.1指定图形窗口 figure(n); % 产生新图形窗口 1.2 同一个窗口多个子窗 subplot(m,n,k); % 使m*n幅子图的第k幅成为当前图 x = 0:0.1:2*pi; subplot(2,2,1); plot(x,sin(x)); subplot(2,2,2); plot(x,c...
曲线拟合与绘制
know yourself
10-25 3109
2017-07-27   在学习图形学课程中，一个很重要的部分就是绘制曲线、曲面。其实，这部分需要的基础课程有“最优化”、“数值分析”，其实，想要完全弄清楚，还是有一定难度的。但是，曲线、曲面的绘制是分为两部分的，一部分是数学，一部分是绘制。 一，拟合     简单来讲，问题的定义是：我们通常会获取到一些离散的点，二维的、三维的， 比如在CAD软件开发需求中，我们经常获取到的数据可能
excanvas.js jQuery 曲线绘制（图表）插件
10-07
excanvas.js jQuery 曲线绘制（图表）插件.excanvas 使得 IE 能通过 VML 支持 Canvas 标签
GDI+绘制曲线图_gentle7gp_gdi曲线_GDI+绘制动态曲线图_
09-30
标题中的"GDI+绘制曲线图_gentle7gp_gdi曲线_GDI+绘制动态曲线图_"揭示了主题的核心：通过GDI+技术来绘制动态变化的曲线图表。"gentle7gp"可能是开发者的用户名或者项目名，而"动态曲线图"则强调了我们要展示的是...
使用 GUI 绘制曲线：该程序在 gui 中绘制曲线。-matlab开发
06-01
本程序聚焦于使用GUI来绘制曲线，这在数据分析、科学计算以及工程应用中非常常见。下面将详细阐述如何在MATLAB中创建一个GUI来绘制曲线，并涉及相关的MATLAB函数和技术。 首先，MATLAB中的GUIDE（GUI Development ...
VB 实现绘制曲线图控件
04-18
在VB6.0环境下，开发人员常常需要处理数据可视化的问题，而绘制曲线图是一种常见的数据展示方式。本主题将深入探讨如何使用Visual Basic 6.0（VB6.0）来实现这一功能，特别是通过创建自定义控件来绘制曲线图。我们将...
STM32 LCD绘制曲线图图
06-11
在STM32上实现LCD绘制曲线图的过程涉及以下几个关键知识点： 1. **LCD驱动**：首先，你需要了解所使用的LCD模块的硬件特性，包括分辨率、接口类型（如SPI、I2C或并行）、控制信号等。STM32通过特定的GPIO引脚与LCD...
已知X、Y用MATLAB绘制曲线.pdf
10-29
在MATLAB中绘制曲线是一项基本任务，尤其对于科学研究和数据分析来说。本文主要讲解了如何使用MATLAB绘制由已知X和Y坐标值构成的曲线。首先，我们需要了解基本的绘图函数`plot`。 `plot(x,y)`是MATLAB中绘制一维...
jQuery 曲线绘制（图表）插件
05-01
内容索引:脚本资源,jQuery,Js图表,曲线绘制,jQuery插件　　jQuery 曲线绘制的插件，用它可以轻松生成图表，各样各样的曲线图，这在统计程序中应用很广泛。本套插件中自带了近10种曲线绘制方法和样式，包括目前流行的点状图、柱状图、交叉曲线图、流量曲线图等的绘制。
chart曲线绘制，实现动态画曲线
08-25
chart的应用，可以实现动态画出曲线，以及静态曲线两种功能，数据从串口采集得到以及从配置文件中获得静态数据，运用定时器实现动态。
jquery曲线图制作
12-16
在制作图表展示的插件太多，不大好掌握，而jquery图表制作小巧，功能强大
js画曲线功能
06-05
纯js画曲线功能，当有数据时，替换数据即可
利用jquery使对象在页面做曲线运动
fengfancky的博客
08-19 4212
利用jquery使对象在页面做曲线运动 知识要点：1.animate()方法；            $(selector).animate({params},speed,callback);           2.利用数学的曲线方程求出x,y的变化规律。 一、轨迹为二次曲线的曲线运动 我们都知道二次曲线方程为：      y = a(x-h)^2+k  根据使对象运动的位置，得方
jquery生成曲线
..7a.
09-22 4435
用的jquery报表。有些属性要设置。 看效果 主要设置 1.数据来源数组 2.2个纵坐标。并且起始为0，行数设置。 3.横坐标日期显示。斜着显示。日期斜着显示找了半天。意外的好用了 4.鼠标移动时的效果。 需要的引用的js下载地址 http
JS绘制曲线图
weixin_30808693的博客
09-20 915
一哥们问我如何用JS绘制曲线图,被我嗤之以鼻, 随后搜索了一下, 竟然发现JS居然真的可以弄,虽然效果想对简单,但是这可是实打实的JS only啊…由此可见, 学习一途,任重道远… 文章来自:http://bbs.blueidea.com/thread-2894005-1-1.html 这是代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1...
MFC 中绘制曲线的实现方法
MFC 中绘制曲线 MFC 中绘制曲线是指在 Microsoft Foundation Classes（MFC）框架中绘制曲线的技术。MFC 提供了一些基本的绘制函数，可以用来绘制曲线，但需要开发者自己编写代码来实现曲线绘制。 在 MFC 中， CDC:...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值