JS前端使用canvas动态绘制函数曲线示例详解

目录
  • 前言
  • 第一步：绘制坐标系
    • 1、如何确定 x 轴和 y 轴的边界值
    • 2、不是传入多少网格数就是多少网格
    • 3、如何让坐标原点位于画布中心
    • 4、刻度总是会有浮点数
  • 第二步：画函数曲线
  • 第三步：绘制辅助线和交点坐标
  • 第四步：平移
  • 第五步：缩放
  • 第六步：动态绘制曲线
  • 第七步：模糊到高清

前言

不说废话，我们直入主题。先来看看读了这篇文章你将得到什么，就是下面这个东西啦（是不是很清晰很顺滑）：

那具体要做什么呢，我们来简单拆解一下步骤：

  • 绘制坐标系
  • 绘制多条函数曲线
  • 绘制辅助线和坐标点
  • 支持平移、缩放
  • 支持动态绘制曲线
  • 使之高清 下面就来一一攻克它们，如果你在电脑前可以顺便瞅瞅示例代码（传送门），不依赖任何库哦。

第一步：绘制坐标系

既然我们要画函数，那肯定要先搞一个坐标系啦，也就是网格。大家可能都知道怎么画网格，就是横的画几条、竖的画几条。思路是没错，但是具体画起来要考虑的问题还是有很多的。画一个不动的、没有要求的网格很简单，但加了刻度后就不那么容易了。这里我就直接说下会遇到的一些问题吧！

1、如何确定 x 轴和 y 轴的边界值

这个东西很重要，是接下来所有一切操作的开端，因为我们画的是函数，一定要有个 x 轴的边界（当做参数传进来），那 y 轴呢，一般我们的网格都是正方形，所以这里让 y 轴的取值范围跟 x 轴一致即可。如果你不传 x 轴的两个边界值（lefxX、rightX），那我们会给个默认值[-canvas宽度的一半/100, canvas宽度的一半/100]，因为一般画布的宽高都是几百，所以这里就简单的除以 100，你要除以 10 也是 ok 的。再次强调一下边界值这个东西很重要，因为接下来的操作都是基于边界值来绘制的。不信你可以尝试一下没有边界值的情况，那可能会无从下手。

2、不是传入多少网格数就是多少网格

因为网格刻度是需要骚微取整的，比如 10、5、1、0.5、0.2、0.1 这样。什么意思呢，举个具体的例子，比如 x 轴的取值范围是 (-5,5)，网格的数量是10，那刚好就可以有 10 个网格，这样刻度就会挺整的（-5,-4,-3这样）；如果网格数是9，那么我们也会有10个网格，刻度也是（-5,-4,-3这样），而不是（-5,-3.9,-2.8），不知道大家 get 到木有。所以网格大小是要稍微计算一下的，算是个小小的算法，下面是其中的一种解法

赞 (0)

相关推荐

  • JavaScript canvas绘制动态圆环进度条

    JavaScript canvas绘制动态圆环进度条

    本文实例为大家分享了JavaScript canvas绘制动态圆环进度条的具体代码,供大家参考,具体内容如下 由于使用的是vue开发,所以就展示一下绘制函数好了,上图是效果图 drawMain(drawing_elem, percent, forecolor, bgcolor) {             /*                 @drawing_elem: 绘制对象                 @percent:绘制圆环百分比, 范围[0, 100]            

  • JS+Canvas实现动态时钟效果

    JS+Canvas实现动态时钟效果

    基于Canvas制作的动态时钟demo,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>动态时钟</title> <script type="text/javascript" src="js/lattice.js"></script> <script

  • JS使用canvas绘制旋转风车动画

    JS使用canvas绘制旋转风车动画

    使用canvas绘制动画-旋转风车加速减速启动停止. 结果截图详见如下: 源码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <

  • 详解JavaScript+Canvas绘制环形进度条

    详解JavaScript+Canvas绘制环形进度条

    目录 效果图 思考 实现思路 具体代码实现 效果图 思考 移动端的场景里经常会出现环形进度条的功能,在实现这个功能前,我预想的解决方案大致有: echarts.antv.canvas.svg 前面两种第三方提供的解决方案当然是简单,拿到案例修整一下即可,但是需要下载依赖,而且代码量不小.有没有不需要依赖第三方包,采用原生的写法,独立封装成一个组件,降低耦合,而且性能优越? 当然,那就主要介绍canvas的使用 实现思路 可以展示整个圆.半圆以及任意角度弧形(左右对称)的进度条.整体思路如下: 1

  • JavaScript canvas绘制圆形加载进度条

    JavaScript canvas绘制圆形加载进度条

    本文实例为大家分享了JavaScript canvas绘制圆形加载进度条的具体代码,供大家参考,具体内容如下 1.需求:通过canvas绘制一个圆形的进度条 2.实现思路: 2.1 绘制灰色底框 2.2 创建变量保存结束角度值和加载进度值 2.3 创建定时绘制进度条 2.3.1 修改结束角度2.3.2 开始新路径绘制2.3.3 绘制加载圆环 3.实现过程如下: css样式设置 body {             text-align: center;         }         can

  • JS前端使用canvas动态绘制函数曲线示例详解

    JS前端使用canvas动态绘制函数曲线示例详解

    目录 前言 第一步:绘制坐标系 1.如何确定 x 轴和 y 轴的边界值 2.不是传入多少网格数就是多少网格 3.如何让坐标原点位于画布中心 4.刻度总是会有浮点数 第二步:画函数曲线 第三步:绘制辅助线和交点坐标 第四步:平移 第五步:缩放 第六步:动态绘制曲线 第七步:模糊到高清 前言 不说废话,我们直入主题.先来看看读了这篇文章你将得到什么,就是下面这个东西啦(是不是很清晰很顺滑): 那具体要做什么呢,我们来简单拆解一下步骤: 绘制坐标系 绘制多条函数曲线 绘制辅助线和坐标点 支持平移.缩放

  • JS前端中的设计模式和使用场景示例详解

    目录 引言 策略模式 1.绩效考核 2.表单验证 策略模式的优缺点: 代理模式 1.图片懒加载: 2.缓存代理 总结 引言 相信大家在日常学习和工作中都多多少少听说/了解/使用过 设计模式,我们都知道,使用恰当的设计模式可以优化我们的代码,那你是否知道对于前端开发哪些 设计模式 是日常工作经常用到或者必须掌握的呢?本文我将带大家一起学习下前端常见的设计模式以及它们的 使用场景!!! 本文主讲: 策略模式 代理模式 适合人群: 前端人员 设计模式小白/想知道如何在项目中使用设计模式 策略模式 策略

  • JS前端二维数组生成树形结构示例详解

    目录 问题描述 实现步骤 完整代码 问题描述 前端在构建国家的省市区结构时,接口返回的不是树形结构,这个时候就需要我们进行转化.以下数据为例 [ [ { "districtId": 1586533852834, "parentCode": "000", "nodeCode": "000001", "name": "浙江省", "districtType&qu

  • Canvas中绘制Geojson数据示例详解

    目录 需求分析 数据处理 将经度和纬度单独拆分出来 计算缩放比例 计算偏移度 将 Coordinates 进行缩放 使用 Canvas 进行绘制 需求分析 在做地图开发的时候遇到一个需求,是在 canvas 中绘制 Geojson 数据 数据格式为 EPSG:4326 的 Polygon: 三维数组 每一项都是由经纬度组成的 第一个点和最后一个点相同,表示 Polygon 是闭合的 [ [ [109.54420471485196, 35.76192112844663], [109.5442361

  • JS前端画布与组件元信息数据流示例详解

    目录 正文 拓展应用状态与静态方法 总结 正文 接下来需要解决两个问题: 可视化搭建的其他业务元素如何与画布交互.比如拓展属性配置面板.图层列表.拖拽添加组件.定位锚点.主题等等. runtimeProps 如何访问到当前组件实例的 props. 这两个问题非常重要,而恰好又可以通过良好的数据流设计一次性解决,接下来让我们分别分析讨论一下. 问题一:可视化搭建的其他业务元素如何与画布交互.比如拓展属性配置面板.图层列表.拖拽添加组件.定位锚点.主题等等 需要设计一个 Hooks API,可以访问

  • vue+three.js实现炫酷的3D登陆页面示例详解

    vue+three.js实现炫酷的3D登陆页面示例详解

    目录 前言: Three.js的基础知识 关于场景 关于光源 关于相机(重要) 关于渲染器 完善效果 创建一个左上角的地球 使地球自转 创建星星 使星星运动 创建云以及运动轨迹 使云运动 完成three.js有关效果 结语 前言: 大家好,我是xx传媒严导(xx这两个字请自行脑补) . 该篇文章用到的主要技术:vue3.three.js 我们先看看成品效果: 高清大图预览(会有些慢): 座机小图预览: 废话不多说,直接进入正题 Three.js的基础知识 想象一下,在一个虚拟的3D世界中都需要什

  • Flutter 绘制风车实现示例详解

    Flutter 绘制风车实现示例详解

    目录 前言展示 1. 风车 1 的绘制 2. 风车 2 的绘制 3. 旋转动画的处理 4. 旋转动画的圈数 前言展示 最近源码看得比较多,本文来画点东西调节下心情,本绘制已收录于 FlutterUnit 的绘制集录,本文源码可参见[windmill.dart] .绘制内容非常简单,如下所示,两个样式的小风车:通过这两个小例子,可以学到: 路径的使用 画板的旋转变换 动画曲线与 Tween 的使用 风车1 风车2 1. 风车 1 的绘制 第一个风车非常简单,由四个 半圆 组成,每个部分直接的关系是

  • Python-Flask:动态创建表的示例详解

    今天小编从项目的实际出发,由于项目某一个表的数据达到好几十万条,此时数据的增删查改会很慢:为了增加提高访问的速度,我们引入动态创建表. 代码如下: from app_factory import app from sqlalchemy import Column, String, Integer class ProjectModel(app.db.model, app.db.Mixin): tablename = 'Project_' ID = Column(String(50), name='

  • javascrip高级前端开发常用的几个API示例详解

    目录 MutationObserver API 特点 IntersectionObserver API 举个例子 图片懒加载 无限滚动 getComputedStyle() API 与style的异同 getBoundingClientRect API 应用场景 1.获取 dom 元素相对于网页左上角定位的距离 2.判断元素是否在可视区域内 MutationObserver MutationObserver 是一个可以监听 DOM 结构变化的接口. 当 DOM 对象树发生任何变动时,Mutati

  • Python+Seaborn绘制分布图的示例详解

    Python+Seaborn绘制分布图的示例详解

    目录 前言 示例 1 示例 2 示例 3 示例 4 示例 5 例子 6 例子 7 示例 8 示例 9 示例10 前言 在本文中,我们将介绍10个示例,以掌握如何使用用于Python的Seaborn库创建图表. 任何数据产品的第一步都应该是理解原始数据.对于成功和高效的产品,这一步骤占据了整个工作流程的很大一部分. 有几种方法用于理解和探索数据.其中之一是创建数据可视化.它们帮助我们探索和解释数据. 通过创建适当和设计良好的可视化,我们可以发现数据中的底层结构和关系. 分布区在数据分析中起着至关重

随机推荐