canvas实现点在曲线上运动并显示坐标

最新推荐文章于 2022-04-02 17:30:29 发布
最新推荐文章于 2022-04-02 17:30:29 发布
阅读量2.5k 收藏 4
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41671425/article/details/82382919
版权 
<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        #theCanvas {
            position: absolute;
            top: 0px;
            left: 0px;
            background-color: #f3f3f3;
        }

        #theCanvas2 {
            position: absolute;
            top: 0px;
            left: 0px;
        }
    </style>

</head>
<body>
<canvas id="theCanvas" width="400" height="400"></canvas>
<canvas id="theCanvas2" width="400" height="400"></canvas>
<script type="text/javascript">
    var i = 0;
    var x = 0;
    var y = 200;

    function moveSin() {
        let oCanvas = document.getElementById("theCanvas");
        let content = oCanvas.getContext("2d");
        content.beginPath();
        content.moveTo(x, y);
        i += 0.1;
        x = i * 20;
        y = Math.sin(i) * 50 + 200;

        content.lineTo(x, y);
        content.stroke();
        content.closePath();
    }


    var i2 = 0;
    var x2 = 1;
    var y2 = 200;

    function moveSin2() {
        if (x2 > 400) {
            i2 = 0;
            x2 = 1;
            y2 = 200;
        }
        let oCanvas = document.getElementById("theCanvas2");
        let content = oCanvas.getContext("2d");
        content.clearRect(0, 0, 400, 400);
        content.beginPath();

        i2 += 0.1;
        x2 = i2 * 20;
        y2 = Math.sin(i2) * 50 + 200;
        content.moveTo(x2, y2);
        content.arc(x2, y2, 5, 0, 2 * Math.PI, false);
        content.fillStyle = "black";
        content.fill();

        content.font = 'bold 12px Arial';
        content.textAlign = 'left';
        content.textBaseline = 'bottom';
        content.fillStyle = '#333';
        content.fillText("x:"+parseInt(x2), x2, y2-24);
        content.fillText("y:"+parseInt(y2), x2, y2-12);
        content.closePath();

    }

    setInterval(moveSin, 10);

    function pointInterval() {
        setInterval(moveSin2, 60)
    }

    setTimeout("pointInterval()", 1000);

</script>
</body>
</html>
小小心LOVE
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
canvas封装方法增加点击移动效果配置颜色线条粗细功能
08-10
canvas 封装方法，增加点击，移动效果，配置颜色线条粗细功能
Paint&Canvas实现一个点（图片）在圆形（轨迹）上运动
Sizon的专栏
03-23 7360
转载请注明出处，谢谢~ 这个效果其实还算简单，只是需要一些计算和猜想。首先，上个图。 首先，这个效果的实现需要考虑以下几点： 1.圆怎么实现？ 2.点（图片）怎么实现？ 3.运动怎么实现？ 这是最主要的三点。然后我们一一考虑。 先看圆怎么实现，这种类似运动轨迹的问题，不建议用图片实现，所以这里的圆我们用Canvas和Paint画出来： Paint paint = new P
通过JavaScript记录鼠标运动轨迹并利用canvas进行轨迹重现
CSU_Zipple的博客
07-23 3300
一周前所长找到我，问我有没有办法记录鼠标轨迹~~ 详细的问过他的具体需求之后，发现是要做成这样的，以下为效果图： 思考 如何记录鼠标轨迹 记录鼠标轨迹的方法很简单，记录鼠标每次move事件的前后两个点坐标即可。 如何重绘 我们通过记录鼠标在canvas中的点的相对坐标可以得到一个对象数组，通过requestAnimationFrame递归对数组进行循环操作，相关代码如下： redr...
数据可视化实操2-4
翊小宸的博客
07-17 243
圆弧和楔形的绘制方法 圆弧的实现方法是借助类Arc实现的 楔形是通过类Wedge进行绘制
Android入门——利用Canvas完成绘制点、圆、直线、路径、椭圆、多边形等2D图形
热门推荐
最美不过，心中有梦，身旁有你！
10-07 1万+
引言一个成功的APP离不开优秀的UI，像墨迹天气等其他APP的一些精彩特效，仅仅依靠系统自带的UI组件是绝不可能实现。所以Android提供了另一种构造UI组件的方式——通过画布Canvas自己绘画，不夸张地说“只有想不到，没有做不到”配以各种动画效果就能实现。
微信小程序 获取GPS经纬度坐标以及Canvas绘图
深南大道
11-01 6390
Page({ /** * 页面的初始数据 */ data: { storageData: [] }, /** * 生命周期函数--监听页面加载 */ onLoad: function(options) { }, // 测试 testBtnClick: function() { // 绘图 const ctx =...
使用canvas画一个亮点跟随线移动的动画功能
weixin_34126215的博客
08-15 2110
2019独角兽企业重金招聘Python工程师标准>>> ...
vue 中canvas 根据点画出圆滑的曲线
Mr_wuying的博客
03-11 1921
文件BezierMaker.js var BezierMaker = function(canvas, bezierCtrlNodesArr, color) { // this.canvas = canvas this.ctx = canvas this.bezierCtrlNodesArr = bezierCtrlNodesArr ? bezierCtrlNodesArr : [] this.color = color ? color: '#ffffff' thi
canvas实现贝塞尔曲线运动
小沅白的工作笔记
09-04 1660
正题前的逼逼赖赖： 上一篇实现了绘制出理想的贝塞尔曲线获取三次贝塞尔曲线的点坐标（canvas），然后就要实现曲线运动了。 效果图 注意点 找到贝塞尔曲线上的点的坐标，用到了计算公式 B(t) = (1-t) [(1-t)2P0+ 2 (1-t) tP1 + t2P2] + t [(1-t)2P1+ 2 (1-t) tP2 + t2P3]，0 <= t <= 1 其中可以控制t的值来实现一个运动的效果，关于这个计算有很多大佬的博客有些。找找就有了 要绘制的如果是规则的形状就就不提了，如果绘制
Matplotlib制作动画
Kwoky的博客
06-01 3950
Matplotlib制作动画 基本原理 Matplotlib中动画是帧动画，就是让多幅图连续播放，每一幅图叫做一帧(frame)。只要不断修改图中的曲线，让其连续变化，那么就得到动画效果。 Matplotlib动画 用Matplotlib制作动画，关键要用到animation这个包中的FuncAnimation。 导入方法：from matplotlib import animation FuncAnimation函数 FuncAnimation(fig,func,frames,init_fu
基于js Canvas实现二次贝塞尔曲线
12-10
本文实例为大家分享了js Canvas实现二次贝塞尔曲线的具体代码，供大家参考，具体内容如下 先上效果图： 实现代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>二...
html5 canvas 实现光线沿不规则路径运动
11-21
查阅svg文档后发现，svg动画运动有两种实现方式，且都非常简单，但对于100%实现设计师给出的效果有很大的距离 使用offset-path偏移路径和offset-roate偏移角度让元素沿着不规则路径走 <!DOCTYPE html> <...
ec-canvas 实现echart图表显示
05-19
ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-...
1_运用canvas把图像显示在固定位置_
09-30
运用canvas把图像显示在固定位置的.c文件 好用
自定义View——canvas画曲线图表
小天花藏
11-12 1623
最近产品说要在项目中加个图表，虽然Android已经有很多成熟的关于图表的框架，但为了这个项目中一两个图表而多引入一个框架觉得有点浪费，所以就想自己动手写一个。先上图： 好在这个图并没有那么复杂，先对这个进行步骤拆分： 0.准备工作 1.确定动态数据 2.确定原点 3.绘制X轴 4.绘制Y轴 5.绘制曲线0. 准备工作定义一个类，让它继承自View…，这部分就不啰嗦了。1. 确定动态数据
Python数据可视化（坐标轴的定制与3D绘图）
yiyuyunyan的博客
04-02 4972
1　隐藏轴脊 import numpy as np import matplotlib.pyplot as plt import matplotlib.patches as mpathes polygon = mpathes.RegularPolygon((0.5, 0.5), 6, 0.2, color=‘g’) ax = plt.axes((0.3, 0.3, 0.5, 0.5)) ax.add_patch(polygon) #隐藏全部轴脊 ax.axis(‘off’) plt.show() 2　隐藏
Canvas实现曲线运动
weixin_34247155的博客
03-26 953
前言 Html5添加的最受欢迎的功能就是<canvas>元素，它负责在页面中设定一个区域，然后在里面可以通过javascript动态地在其内绘制图形。 主流浏览器，IE9+，手机端都是支持它的。 创建Canvas 要使用Canvas元素就必须先设置其width和height，指定绘图区域的大小 类似：<ca...
matlab根据数据生成实时动画,Matlab 坐标图动画，动态显示数据
weixin_39839162的博客
03-19 932
数据采集或者数据回放时，用matlab的plot画图的话一般都是静态的，一下画完了就不动了。但是有些时候，比如实时的数据采集然后通过串口或pci在matlab中画出数据的变化图并同步动态显示，以及在一些想用matlab绘图回放大块的数据模拟随时间变化的情景。这时候就需要用到坐标图的动画显示了。这个功能实现起来有多种方法，只介绍一种最简单也是matlab中推荐使用的。此功能的实现依赖animated...
基于canvas实现小圆点在线条上滚动
最新发布
06-01
基于canvas实现小圆点在线条上滚动的步骤如下： 1. 创建一个canvas元素和相应的上下文对象。 2. 使用canvas绘制一条水平或垂直的线条，可以使用`context.moveTo()`和`context.lineTo()`方法来绘制。 3. 创建一个...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值