小程序上下滑动页面时canvas绘制的图出现抖动的情况

最新推荐文章于 2024-06-20 09:54:58 发布
置顶 最新推荐文章于 2024-06-20 09:54:58 发布
阅读量2.4k 收藏 1
点赞数 1
CC 4.0 BY-SA版权
分类专栏： 学习笔记 文章标签： canvas 前端 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_34451048/article/details/106625119
本文介绍了一种在小程序中解决canvas元素在页面滑动时出现抖动现象的方法。通过将canvas绘制的内容转换为图片，既保持了页面的流畅滚动，又避免了canvas抖动的问题。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

刚做好了一个需求，但是做测试的时候发现，出现小程序上下滑动页面时canvas绘制的图出现抖动的情况

网上一大堆答案，基本都是解决点击canvas滑动时，不允许下面的页面一起跟着滑动，但是我要的效果是，我不管点击canvas也好，还是点击页面其他地方也好，是可以滑动的，并且canvas不出现抖动的情况

在这里插入图片描述
红色选中的部分，是canvas画的，在页面上下滑动的时候，会抖动的情况，各种网上找答案

最后取个巧，把绘制好的canvas重新生成图片，然后放在原来的位置上去，这样就不会出现抖动的情况了，而且也可以正常滑动

代码地址，贴了代码，可以直接copy使用的那种

每天踩一个坑，踩的坑多了，自然就不怂了~

小程序环形进度条爬坑
℡メ㏑╭ァ小凯
03-03 814
在做微信小程序的时候，发现用canvas做的环形进度条，在带滚动条的view里面显示有闪动、显示不全的问题，后面改成echart-weixin的pie图实现了，option配置如下。
Jetpack Compose中的Canvas
川峰的博客
01-13 2123
Jetpack Compose中直接提供了一个叫 Canvas 的 Composable 组件，可以在任何 Composable 组件中直接使用，在 Canvas 的DrawScope作用域中就可以使用其提供的各种绘制Api进行绘制了。这比传统View要方便的多，传统View中，你只能继承一个View控件，才有机会覆写其onDraw()方法。Canvas Api使用相比比传统View中的要简单一些，不需要画笔Paint和画布分开来，大多数直接就是一个函数搞定，当然也有一些限制。
CanvasDither:Canvas元素的黑白抖动算法
05-06
帆布抖动 画布元素的黑白抖动 用法 首先，使用npm安装软件包： npm install canvas-dither --save 然后，要求该软件包并按如下方式使用它： let Dither = require('canvas-dither'); // Assume we have an existing canvas element with a 2D context // Retrieve the image data of the canvas let image = context.getImageData(0, 0, canvas.width, canvas.height); // Dither the data using the Atkinson algoritm image = Dither.atkinson(image); // Place the image da
微信小程序 canvas随页面滑动
qq_35056468的博客
09-08 3815
最近使用uniapp做小程序遇到一个问题，需要开发 图表功能，我选用了秋云 ucharts echarts 高性能跨全端图表组件。很快实现了功能。但是在真机测试的时候发现一个问题。 当页面的高度超过手机的高度的时候，滑动页面时canvans 图表也随着滚动，然后发现布局错乱了， 借鉴他人的的方法，给canvas 增加disable-scroll=“true” 并给canvas绑定一个触摸事件促使disable-scroll生效。真机运行的时候发现 是不会错位影响布局。但是当你点击区域处于canvans 区域
为何使用 Canvas 内元素动画总是在颤抖？
weixin_34092455的博客
04-24 725
背景 过年的项目中遇到一个问题让我百思不得其解，明明我的帧率保持在60帧，为何我的动画却一直抖动？ 我的场景是一个匀速直线运动的物体。 先上一个 Demo 在这个 Demo 中，小姐姐是按照 x 轴 10px/s，y 轴 30 px/s 进行移动的，不过她的移动是明显伴随着抖动的。 这到底是怎么了呢？ 解决 如果小姐姐的y轴速度是10px/s，我们的帧率...
小程序开发：canvas在画布上滑动，页面跟着滑动问题
dengwei4048的博客
04-28 2121
微信小程序官方文档有说明，disable-scroll="true" 可以阻止页面下拉和滚动。这里有个坑，disable-scroll在真机上如果要生效，那么要给canvas绑定一个触摸事件才能生效。 必须绑定三个事件真机才能捕获到 <canvas disable-scroll="true" bindtouchstart="touchStart" bindtouchmove="...
微信小程序---小程序中引入的echarts在滑动屏幕时抖动以及不跟随scroll滑动问题
m0_38109616的博客
09-24 1187
在ec-canvas中添加 force-use-old-canvas=“true”
微信小程序 ec-canvas 雷达图 滑动的时候会抖动
最新发布
04-11
好的，我现在需要帮助用户解决在微信小程序中使用ec-canvas绘制雷达图时出现的滑动抖动问题。首先，我要理解用户的问题场景。用户在使用ec-canvas组件展示雷达图时，当进行滑动操作时，图表出现抖动，这影响了用户...
用Android Canvas绘制报表的实用教程
文章提到的示例工程“Canvas01”可能是开发者用于演示如何用Canvas绘制报表的一个实例。在这个工程中，开发者可能会展示如何使用Canvas类的基本方法，如drawLine、drawRect、drawText等来构建报表的视觉元素。例如：...
微信小程序 + Antv F2
fanxinzhi_FXZ的博客
12-09 1913
微信小程序 + Antv F2一、项目搭建二、相关问题三、总结 一、项目搭建 1、 创建微信小程序项目（下载微信小程序IDE，详细创建微信小程序流程见： 小程序文档:） 2、在项目根目录下，初始化创建package.json文件，打开cdm 执行： npm init 3、安装npm install --production; 4、安装微信小程序 F2 图表组件: npm i ...
HTML图片抖动效果
12-15
HTML页面效果 鼠标移入，图片抖动效果。
DrawingCanvas工具，拖动图片，图片抖动问题
Hat_man_的博客
06-07 232
后台鼠标拖动图片移动代码如下。
微信小程序canvas2d频繁重绘时图片闪烁问题
JieZhongBa的博客
06-20 997
canvas2d重绘图片闪烁
<canvas>学习笔记——实时绘制线条摆动
jiulan1996的博客
05-04 2192
可以利用二次贝塞尔曲线定义线条呈现的形状，再更改参数使线条变换形状，使之连续起来就形成了线条摆动的动画 二次贝塞尔曲线介绍： 我们将线条的绘制点分为三个——起始点，控制点，结束点 其中起始点和控制点是保持不动的，而结束点的位置我们让他按照正弦函数曲线进行变换 正弦函数图像： 首先定义一个类： var aneObj=function() {     this.ro
canvas做静态图片波动
晚星的博客
08-04 447
使用前端技术实现静态图片局部流动效果
解决Unity UGUI 抗锯齿，解决Canvas Camera模式抖动问题
Hello,World!
01-24 5524
UGUI开启抗锯齿，解决Canvas Camera渲染模式下UI抖动问题 最近用unity搞一个小项目，用到了XCharts插件，这个插件除了一些小问题，总体还是不错的，最大的问题就是锯齿了。。官网文档里这么说的： 开启抗锯齿设置（在Unity里设置）。调整UI渲染模式为Camera模式，开启MSAA，设置4倍或更高抗锯齿。锯齿只能减少难以避免，像素越高锯齿越不明显。 其实不仅仅是XCharts组件，通过重载 void OnPopulateMesh(VertexHelper vh)函数，在UGUI上自绘
使用canvas实现微信小程序滑动解锁功能 ；解决canvas图层随背景能上下滑动导致页面错乱问题；
m0_47791238的博客
03-04 1533
使用canvas实现微信小程序滑动解锁功能 ；解决canvas图层随背景能上下滑动导致页面错乱问题；
HTML 中使用 Canvas 2d 让静态图片动起来
抱朴守拙
06-22 1306
html 中使用 canvas 2d 让静态图片动起来
微信小程序拉扯抖动问题
Heartnottowake的博客
10-19 1634
页面首次加载图片没有高度，mode="widthFix"直接会显示全部高度，然后再加载样式高度，所以会有拉扯感，写死后，默认直接加载样式，就不需要后面自动匹配高度了。（2）mode属性的宽设置了百分比，写死了高度，也会出现抖动，这时直接删除mode属性。（1）页面的盒子样式有冲突，比如浮动。1，如果是页面加载图片拉扯感很强，
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值