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

最新推荐文章于 2024-04-22 18:24:27 发布
置顶 最新推荐文章于 2024-04-22 18:24:27 发布
阅读量2.1k 收藏 1
点赞数 1
分类专栏： 学习笔记 文章标签： canvas 前端 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34451048/article/details/106625119
版权

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

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

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

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

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

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

qq_34451048
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
<canvas>学习笔记——实时绘制线条摆动
jiulan1996的博客
05-04 2086
可以利用二次贝塞尔曲线定义线条呈现的形状，再更改参数使线条变换形状，使之连续起来就形成了线条摆动的动画 二次贝塞尔曲线介绍： 我们将线条的绘制点分为三个——起始点，控制点，结束点 其中起始点和控制点是保持不动的，而结束点的位置我们让他按照正弦函数曲线进行变换 正弦函数图像： 首先定义一个类： var aneObj=function() {     this.ro
小程序开发：canvas在画布上滑动，页面跟着滑动问题
dengwei4048的博客
04-28 1987
微信小程序官方文档有说明，disable-scroll="true" 可以阻止页面下拉和滚动。这里有个坑，disable-scroll在真机上如果要生效，那么要给canvas绑定一个触摸事件才能生效。 必须绑定三个事件真机才能捕获到 <canvas disable-scroll="true" bindtouchstart="touchStart" bindtouchmove="...
微信小程序 canvas随页面滑动
qq_35056468的博客
09-08 3348
最近使用uniapp做小程序遇到一个问题，需要开发 图表功能，我选用了秋云 ucharts echarts 高性能跨全端图表组件。很快实现了功能。但是在真机测试的时候发现一个问题。 当页面的高度超过手机的高度的时候，滑动页面时canvans 图表也随着滚动，然后发现布局错乱了， 借鉴他人的的方法，给canvas 增加disable-scroll=“true” 并给canvas绑定一个触摸事件促使disable-scroll生效。真机运行的时候发现 是不会错位影响布局。但是当你点击区域处于canvans 区域
利用canvas实现微信小程序可转动指南针（解决图片闪烁、抖动问题）
最新发布
qq_33343872的博客
04-22 359
使用canvas制作流畅的指南针小程序
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
微信小程序拉扯抖动问题
Heartnottowake的博客
10-19 1397
页面首次加载图片没有高度，mode="widthFix"直接会显示全部高度，然后再加载样式高度，所以会有拉扯感，写死后，默认直接加载样式，就不需要后面自动匹配高度了。（2）mode属性的宽设置了百分比，写死了高度，也会出现抖动，这时直接删除mode属性。（1）页面的盒子样式有冲突，比如浮动。1，如果是页面加载图片拉扯感很强，
为何使用 Canvas 内元素动画总是在颤抖？
weixin_34092455的博客
04-24 593
背景 过年的项目中遇到一个问题让我百思不得其解，明明我的帧率保持在60帧，为何我的动画却一直抖动？ 我的场景是一个匀速直线运动的物体。 先上一个 Demo 在这个 Demo 中，小姐姐是按照 x 轴 10px/s，y 轴 30 px/s 进行移动的，不过她的移动是明显伴随着抖动的。 这到底是怎么了呢？ 解决 如果小姐姐的y轴速度是10px/s，我们的帧率...
android 滑动开关
01-21
2. **绘制开关**：重写`onDraw()`方法，使用`Canvas`对象进行绘制。你可以使用`Paint`对象来设置颜色、线条宽度、文字样式等，然后根据开关的状态（开或关）画出相应的图形。滑块通常是通过矩形或椭圆表示，而背景...
Android进阶篇-自定义图片伸缩控件具体实例
09-04
在onDraw()方法中，会先将mMatrix应用到mDisplayMatrix上，然后使用canvas.drawBitmap()方法，将mBitmap绘制到视图上。在绘制过程中，mDisplayMatrix会根据用户的缩放和平移动作改变图像的位置和大小。 最后，我们...
对上下位图操作
04-17
在Android开发中，"对上下位图操作"通常是指在一个View上叠加两张图片，通过交互改变上层图片的可见性，以实现某些特殊效果，比如游戏中的“脱衣”效果。这种技术涉及到多个关键概念和技术，包括ImageView、Canvas、...
HTML图片抖动效果
12-15
HTML页面效果 鼠标移入，图片抖动效果。
这是一款使用HTML5Canvas制作的黑板特效
08-12
当用户在屏幕上滑动时，程序会记录下轨迹并用Canvas API绘制出来。在移动端，这通常涉及到监听`touchstart`、`touchmove`和`touchend`事件。为了使效果更逼真，开发者可能还添加了动态效果，如轻微的抖动或者粉笔划...
飞行滑动的listView
01-06
这个特殊的ListView设计使得每个列表项在滑动时能够像柔软的布料一样抖动，增加了视觉上的吸引力，从而提高用户的参与度和满意度。 Flabby ListView的核心在于模拟物体受力后的动态效果，这种效果通常通过自定义的...
小程序canvas踩坑
cow66的博客
08-29 902
canvas 画布。该组件是原生组件，使用时请注意相关限制。 的确很多限制！！！ canvas 中很多 API 都是异步执行，这导致很多问题！比如 图片怎么没画上去等等~~~ 其中，我踩到的坑： canvasContext.drawImage 不能直接用网络图片（也不能用Base64），需要下用 wx.downloadFile(OBJECT) 下载成功后以 tempFilePat...
实现小程序canvas拖拽功能
weixin_33671935的博客
09-03 1109
组件地址 github.com/jasondu/wx-… 实现效果 如何实现 使用canvas 使用movable-view标签 由于movable-view无法实现旋转，所以选择使用canvas 需要解决的问题 如何将多个元素渲染到canvas上 如何知道手指在元素上、如果多个元素重叠如何知道哪个元素在最上层 如何实现拖拽元素 如何缩放、旋转、删除元素 看起来挺简单的嘛，就把上面这几个...
android canvas 绘图 一闪一闪_小程序canvas动画解决方案，绘制一个塔罗牌动画
weixin_39754142的博客
12-29 581
目前还有个问题：android上面无卡顿，但是ios直接把微信卡掉！wxml<canvas style='width:{{windowWidth}}px;height:{{height}}px; position: fixed;' canvas-id="secondCanvas0"> </canvas> <canvas style='width:{{windowWi...
canvas做静态图片波动
晚星的博客
08-04 333
使用前端技术实现静态图片局部流动效果
Canvas拖拽-微信原生（是画布整体拖拽-wx）
ICUiseeyou的博客
11-04 454
canvas移动 拖拽整个画布
小程序canvas 绘制重叠的图片海报时，如何给这些图片绘制圆角
07-13
在小程序的 canvas 绘制中，可以通过使用 `ctx.arc()` 方法来绘制圆角。下面是一个示例代码，展示了如何给重叠的图片绘制圆角： ```javascript // 创建 canvas 上下文 const ctx = wx.createCanvasContext('myCanvas') // 绘制第一张图片 ctx.save() ctx.beginPath() ctx.arc(50, 50, 50, 0, 2 * Math.PI) // 绘制圆角 ctx.closePath() ctx.clip() // 裁剪区域为圆角 ctx.drawImage('image1.jpg', 0, 0, 100, 100) // 绘制图片 ctx.restore() // 绘制第二张图片 ctx.save() ctx.beginPath() ctx.arc(100, 100, 50, 0, 2 * Math.PI) // 绘制圆角 ctx.closePath() ctx.clip() // 裁剪区域为圆角 ctx.drawImage('image2.jpg', 50, 50, 100, 100) // 绘制图片 ctx.restore() // 绘制完成后，调用 draw 方法进行渲染 ctx.draw() ``` 在上述代码中，我们通过 `ctx.arc()` 方法绘制了圆角，然后使用 `ctx.clip()` 方法将绘制区域限定为圆角的区域，接着使用 `ctx.drawImage()` 方法绘制图片。最后调用 `ctx.draw()` 方法将绘制结果渲染到 canvas 上。 你可以根据自己的需求，调整圆角的位置、大小以及图片的位置和大小。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值