倒计时圆环小程序的canvas实现

最新推荐文章于 2024-03-14 11:03:36 发布
最新推荐文章于 2024-03-14 11:03:36 发布
阅读量567 收藏 2
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45048106/article/details/94739623
版权
本文介绍了在小程序中使用canvas实现倒计时圆环的效果，重点提到了canvas-id的唯一性，以及在实现过程中遇到的命名错误和样式设置问题。通过代码示例展示了如何解决这些问题，并探讨了用view的border替代canvas背景的可能性。
摘要由CSDN通过智能技术生成

效果图如下

在这里插入图片描述在这里插入图片描述

小程序官方文档一些 tips

tip：同一页面中的 canvas-id 不可重复，如果使用一个已经出现过的 canvas-id，该 canvas 标签对应的画布将被隐藏并不再正常工作。
canvas-id 是canvas 组件的唯一标识符，（若指定了 type 则无需再指定该属性）。

我遇到的几个小问题

我跟着别人的代码写的，写完不显示，后来发现canvas-id我写做了canvas_id，导致了JS找不到canvas元素。后来我又用canvas-id的值作为ID值赋CSS样式也没有成功，又加了class。canvas_id和id不是一回事。在小程序以外的页面canvas是用id做标识符来确定绘制上下文的区域的。

代码如下

 <view class="progress_box">
        <canvas  canvas-id="progress_bg" class="progress_bg"></canvas>
        <canvas  canvas-id="progress_canvas"></canvas>
        <view c
最低0.47元/天 解锁文章
weixin_45048106
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信小程序 使用canvas画圆形倒计时动画
xiaxia_Lin的博客
07-17 1340
参考文档：https://www.cnblogs.com/quietxin/p/9418813.html 效果： wxml页面 <view class="container"> <view class='progress_box'> <canvas class="progress_bg" canvas-id="canvasProgres...
canvas环形倒计时组件的示例代码
12-30
本文介绍了canvas环形倒计时组件的示例代码，分享给大家，具体如下： 效果如下图一： Canvas环形倒计时组件 Canvas环形倒计时是基于Canvas实现的倒计时，建议于移动端使用 Canvas环形倒计时 下载地址 一、如何使用 1. html代码 ID属性可随意取名 <canvas id=canvas></canvas> 2. 引入process.js文件 页面引用 [removed][removed] 3. 初始化参数 实例化即可 [removed] [removed] = function () { l
Canvas基础
Y9232的博客
06-01 285
Canvas的使用场景，掌握Canvas的使用。
小程序的填坑小技巧之Canvas
GUK
06-29 3060
首先在我们的wxml写下如下代码 &lt;canvas class="canvas" canvas-id="canvas"&gt;&lt;/canvas&gt; 设置 Canvas 大小，可以直接在 wxml 里的 canvas 标签上设置，也可以用 wcss 。个人比较喜欢用wcss 。 重点来了 canvas-id 是小程序里特有的，是canvas 组件的唯一标识符，之后的很多地方都...
canvas画布标签详解
m0_55557411的博客
12-12 1245
canvas画布标签详解
HTML5 canvas(画布)用法笔记
胖嘟嘟62的博客
06-20 330
本文为HTML5 canvas基本用法笔记。 canvas，画布，可通过JavaScript绘制图形及图形动画。
微信小程序canvas实现文字缩放
01-12
这篇内容将深入讲解如何在微信小程序的canvas环境中实现文字的缩放功能。 首先，我们要理解微信小程序中的canvas API。在小程序中，我们可以使用`wx.createCanvasContext`方法来获取canvas的绘图上下文对象，这个...
微信小程序canvas实现文字自由移动
01-12
在微信小程序中，Canvas是一个非常重要的组件，它允许开发者在界面上绘制图形、文字等元素，从而实现丰富的交互效果。本项目着重讲解如何利用Canvas在微信小程序中实现文字的自由移动。 首先，Canvas是一个HTML5的...
微信小程序canvas实现直线自由移动
01-12
本文将详细讲解如何利用Canvas API在微信小程序中实现直线的自由移动。 首先，我们要理解Canvas的基本概念。Canvas是一个HTML5元素，通过JavaScript来绘制2D图形。在微信小程序中，我们可以使用`<canvas>`标签来...
微信小程序canvas实现刮刮乐效果
08-27
微信小程序canvas实现刮刮乐效果 本文主要介绍了微信小程序canvas实现刮刮乐效果的技术要点，涵盖了canvas设置背景图、绘制刮的灰色涂层、清除对应区域的涂层、判断涂层清除区域是否超过设置的可见百分比等技术细节...
微信小程序canvas实现矩形缩放
01-09
微信小程序canvas实现矩形缩放
微信小程序实现倒计时功能
飞影铠甲的博客
09-14 974
本文实现在微信小程序中倒计时的功能，计时完毕后自动跳转页面，有完整源码。
【期末复习】微信小程序复习大纲
热门推荐
weixin_65186652的博客
12-25 2万+
微信小程序习题期末复习一到五章
小程序canvas重复调用，二次渲染失败问题
qq_58101212的博客
06-30 1220
原因：canvas二次调用后canvas-id重复了，重复的id对应的画布就不正常工作了。问题：第一次点击canvas正常显示，后续再点击就不显示了，渲染失败。解决方法：给重复调用的canvas-id不同的值进行调用。
Uni-app开发Canvas当子组件示例，点点绘制图形
H_jrqn的博客
03-14 1159
Uni-app开发Canvas当子组件示例，点点绘制图形
微信小程序——第九章章节自测
qq_50582468的博客
12-15 3096
1【单选题】 canvas组件是小程序中的画布组件，在同一个页面中它的哪一个属性是唯一的？ A、 canvas-id B、 id C、 class D、 distable-scroll 答案：A 2【单选题】 对于canvas组件的上下文对象ctx，下面它哪一个方法可以绘制圆形。 A、 moveTo() B、 arc() C、 lineTo() D、 translate() 答案：B 3【单选题】 下面哪一个animation对象的方法可以实现动画队列的导出？
canvas入门——简单易懂
qq_38557634的博客
05-06 198
canvas 学习 canvas大小的设定 ` <canvas id="canvas" width="需要的宽" height="需要的高"></canvas>或者 <script> var canvas = document.querySelector('canvas') ctx = canvas.getContext('2d') canvas.widt...
DBO-CNN-BiLSTM-Attention蜣螂算法优化多变量时间序列预测，含优化前后对比（Matlab完整源码和数据）
最新发布
08-17
1.Matlab实现DBO蜣螂算法优化CNN-BiLSTM-Attention多变量时间序列预测，含优化前后对比（Matlab完整源码和数据）优化学习率，神经元个数，注意力机制的键值, 正则化参数。 2.输出MAE 、 MAPE、MSE、RMSE、R2多指标评价，运行环境Matlab2023及以上。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：机器学习之心，博客专家认证，机器学习领域创作者，2023博客之星TOP50，主做机器学习和深度学习时序、回归、分类、聚类和降维等程序设计和案例分析，文章底部有博主联系方式。从事Matlab、Python算法仿真工作8年，更多仿真源码、数据集定制私信.
微信小程序CanvasContext怎么实现倒计时
05-30
可以使用CanvasContext中的`arc()`和`fillText()`方法来实现倒计时的效果。具体实现步骤如下： 1. 首先获取到CanvasContext的实例： ```javascript const ctx = wx.createCanvasContext('myCanvas'); ``` 2. 然后通过`arc()`方法画出一个圆形的进度条： ```javascript ctx.beginPath(); ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise); ctx.stroke(); ``` 其中，`x`和`y`是圆心的坐标，`radius`是圆的半径，`startAngle`和`endAngle`是圆弧的起始角度和结束角度，`anticlockwise`表示是否按逆时针方向绘制。 3. 接着，使用`fillText()`方法在圆形中心位置显示倒计时的数字： ```javascript ctx.font = 'bold 24px Arial'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText(time, x, y); ``` 其中，`font`设置字体样式，`textAlign`设置文字水平居中，`textBaseline`设置文字垂直居中，`fillText()`方法的第一个参数是要显示的文本，第二个参数是文本的x轴坐标，第三个参数是文本的y轴坐标。 4. 最后，通过定时器来更新倒计时的时间和进度条的显示，实现倒计时效果。 ```javascript setInterval(() => { //更新倒计时时间 time--; //重新绘制圆形进度条和倒计时数字 drawProgress(time); }, 1000); ``` 完整的实现代码示例： ```javascript const ctx = wx.createCanvasContext('myCanvas'); const x = 50; //圆心x轴坐标 const y = 50; //圆心y轴坐标 const radius = 40; //圆的半径 let time = 60; //倒计时时间 function drawProgress(time) { //清空画布 ctx.clearRect(0, 0, 100, 100); //绘制底部圆形 ctx.beginPath(); ctx.arc(x, y, radius, 0, 2 * Math.PI); ctx.strokeStyle = '#ddd'; ctx.stroke(); //绘制进度条 const endAngle = (2 * Math.PI) * (60 - time) / 60 - 0.5 * Math.PI; ctx.beginPath(); ctx.arc(x, y, radius, -0.5 * Math.PI, endAngle); ctx.strokeStyle = '#f00'; ctx.stroke(); //绘制倒计时数字 ctx.font = 'bold 24px Arial'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText(time, x, y); } setInterval(() => { time--; drawProgress(time); }, 1000); ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值