canvas实现的loading效果

最新推荐文章于 2024-05-09 08:19:04 发布
最新推荐文章于 2024-05-09 08:19:04 发布
阅读量881 收藏 2
点赞数
分类专栏： canvas 文章标签： canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44369568/article/details/105417257
版权 
<!DOCTYPE html>
<html lang="en"> 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head> 
<body>
    <canvas id="myCanvas" width="600" height="600" style="border:1px solid red"></canvas>
    <script>
        var ctx = myCanvas.getContext('2d');
        var deg = Math.PI / 180;
        var index = 0; 
        fram() 
        function fram() {
            index++;
            if (index <= 360) {
                requestAnimationFrame(fram)
            }
            var txt = Math.round(index / 360 * 100);
            ctx.beginPath();
            ctx.clearRect(0, 0, 600, 600);
            ctx.arc(300, 300, 200, 0, index * deg);
            ctx.strokeStyle = "pink";
            ctx.lineWidth = 10;
            ctx.stroke();
            ctx.beginPath();
            ctx.lineWidth = 1;
            ctx.strokeText(txt + "%", 300, 300);
            ctx.font = '30px normal';
            ctx.textAlign = "center";
            ctx.textBaseline = "middle";
            ctx.closePath();
        }
    </script>
</body>

</html>
若～～～
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML5 Canvas 3D跳动Loading加载动画-可调节参数
11-09
这是一款纯CSS3漩涡样式的Loading加载动画和CSS3发光线条旋转Loading加载动画，支持动态调节动画参数。
HTML5 Canvas 液体流动样式Loading加载动画
08-23
之前我们分享过很多基于jQuery和HTML5的Loading加载动画，比如这款HTML5 Canvas发光Loading动画就是基于Canvas的。今天我们要分享另外一款基于HTML5 Canvas的液体流动样式Loading加载动画，这款Loading动画在加载时会呈现液体流动的动画效果，并且由于和背景颜色的对比，也略微呈现发光的动画效果。
canvas做loading动画
weixin_30518397的博客
01-10 390
由于公司最近项目不是很忙，所以，自己利用闲暇的时间来研究了一阵子的htm5和css3，正巧，公司最近要对以前的项目进行一次统一的升级，而我被告知时，主要是在以前的版本中加入一些页面动画。有4人参与了动画特效的编写，我很幸运自己也被选中。 第一次做动效还是用css3,心里好激动。虽然自己对css3不是很了解，但是，我还是有信心自己能够胜任这次的任务。接下来近2个月的时间里，我都在做css3动效，由...
HTML5 Canvas发光Loading动画特效源码
CSDN专家-微编程的博客
05-09 252
之前我们分享过很多基于CSS3的Loading动画效果，相信大家都很喜欢。今天我们要来分享一款基于HTML5 Canvas的发光Loading加载动画特效。Loading旋转图标是在canvas画布上绘制的，整个loading动画是发光3D的视觉效果，HTML5非常强大。
Canvas制作圆形进度条Loading效果
TeachYouToBe的博客
05-25 1571
简单粗暴，直接给代码 Canvas制作圆形进度条Loading效果 | jQuery特效|手机微信网站特效| 网页特效库 /*框架预览 CSS*/ * { margin: 0; padding: 0; } body{text-align: center; background:#0cc;} /*End*/ window.onload = function
canvas实现loading的效果
AMAZING
08-11 966
canvas实现loading的效果
html5 canvas loading(这可怕的编辑器，自动把我的canvas转义了)---以前收藏的整理了一下...
weixin_34112208的博客
04-25 101
/* super inefficient right now, could be improved */ var c = document.getElementById('canvasload'), ctx = c.getContext('2d'), cw = c.width = 400, ch = c.height = 300, rand =...
10分钟，利用canvas画一个小的loading界面
tyygming的专栏
07-17 157
首先利用定义下canvas得样式 &lt;canvaswidth="1024"height="720"id="canvas"style="border: 1px solid #808080;display: block;margin: 100px auto;&gt;你的游览器不支持canvas&lt;/canvas&gt;  这里主要要说的就是宽高，不要在style里面...
HTML5基于Canvas实现超酷Loading动画特效源码
09-02
这款Loading动画加载效果主要是利用几何的特性来模拟的，可实现伸缩旋转的视觉效果。建议使用支持HTML5较好的火狐或谷歌等浏览器预览。
Canvas圆形进度条Loading代码
04-02
本话题主要围绕"Canvas圆形进度条Loading代码"这一主题展开，我们将深入探讨如何利用Canvas来实现一个美观且实用的圆形进度加载动画。 首先，我们要了解Canvas的基本结构。Canvas是一个矩形区域，在这个区域内，...
HTML5 Canvas实现超酷Loading动画
08-23
这次我们来看一款非常酷的Loading动画加载效果，和纯CSS3实现齿轮Loading加载动画类似，也是利用几何的特性来模拟的，它是一些类似旋转的动画效果。另外，关于Loading动画，我们也可以看看html5tricks上的Loading...
纯H5小树长大
07-20
试用手机版，纯h5开发，应用thinkphp3，小树成长能获取参加活动客户信息
带loading指示器的js提交按钮动画特效
01-17
Ladda是一款内置Loading指示器和进度条的提交js按钮特效插件。该js按钮特效用于制作提交按钮，在点击按钮后，按钮上会出现无限循环的Loading指示器和加载进度条效果。这种设计大大增强了用户的体验性。
Canvas圆形进度条Loading特效代码
03-20
Canvas圆形进度条Loading代码是一款简洁好看的圆形进度加载动画素材。
Canvas 发光loading动画
05-04
发光效果通常通过叠加多个半透明颜色层实现。我们可以用`beginPath()`开始路径，`arc()`绘制圆形，然后使用`fillStyle`设置填充颜色和`fill()`填充路径。为了产生发光效果，我们可以多次绘制同一形状，每次稍微改变...
Canvas实现超酷Loading动画源码.zip
最新发布
06-17
总的来说，"Canvas实现超酷Loading动画源码"是一个展示Canvas API强大功能的实例，通过它，我们可以学习到如何利用JavaScript和Canvas进行动态图形编程，创造出吸引眼球的动画效果。如果你对Web开发有兴趣，尤其是...
HTML5 Canvas 实现的Loading效果
daimeisi123的专栏
04-12 511
源地址：http://www.yyyweb.com/3352.html          Sonic.js 是一个很小的 JavaScript 类，用于创建基于 HTML5 画布的加载图像。更强大的是 Sonic.js 还提供了基于现成的例子的创建工具，可以帮助你实现更多自定义的（Loading）加载动画效果。 在线演示      源码下载
canvas 实现水流效果
06-02
实现水流效果主要需要以下步骤： 1. 绘制水流路径 使用 Canvas 绘制一条水流路径，可以通过 bezierCurveTo() 方法绘制贝塞尔曲线来实现。 2. 绘制水流 使用 Canvas 绘制水流，可以通过绘制多个圆形来实现，圆形的位置和大小可以根据时间和水流路径计算得到。 3. 实现动画效果 在每一帧中，重新计算水流位置和大小，然后清空 Canvas 并重新绘制水流。 以下是一个简单的 Canvas 水流效果实现示例代码： ```javascript var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var waterPath = []; // 水流路径 var waterDrops = []; // 水滴 var waterSpeed = 0.01; // 水速 var waterRadius = 10; // 水滴半径 var waterColor = '#00A0E9'; // 水颜色 var lastTime = 0; // 上一帧时间戳 // 添加水流路径点 function addWaterPath(x, y) { waterPath.push({x: x, y: y}); } // 绘制水流路径 function drawWaterPath() { ctx.beginPath(); ctx.moveTo(waterPath[0].x, waterPath[0].y); for (var i = 1; i < waterPath.length - 2; i++) { var c = (waterPath[i].x + waterPath[i + 1].x) / 2; var d = (waterPath[i].y + waterPath[i + 1].y) / 2; ctx.quadraticCurveTo(waterPath[i].x, waterPath[i].y, c, d); } ctx.quadraticCurveTo(waterPath[i].x, waterPath[i].y, waterPath[i + 1].x, waterPath[i + 1].y); ctx.strokeStyle = waterColor; ctx.lineWidth = 2; ctx.stroke(); } // 添加水滴 function addWaterDrop() { var t = Date.now(); var deltaTime = t - lastTime; lastTime = t; var speed = waterSpeed * deltaTime; for (var i = 0; i < waterPath.length - 1; i++) { var distance = Math.sqrt(Math.pow(waterPath[i + 1].x - waterPath[i].x, 2) + Math.pow(waterPath[i + 1].y - waterPath[i].y, 2)); // 水流路径长度 var count = Math.floor(distance / speed); // 水滴数量 var x = waterPath[i].x, y = waterPath[i].y; for (var j = 0; j < count; j++) { x += (waterPath[i + 1].x - waterPath[i].x) / count; y += (waterPath[i + 1].y - waterPath[i].y) / count; var r = waterRadius * (1 - j / count); waterDrops.push({x: x, y: y, r: r}); } } } // 绘制水滴 function drawWaterDrops() { for (var i = 0; i < waterDrops.length; i++) { ctx.beginPath(); ctx.arc(waterDrops[i].x, waterDrops[i].y, waterDrops[i].r, 0, 2 * Math.PI); ctx.fillStyle = waterColor; ctx.fill(); } } // 实现动画效果 function animate() { requestAnimationFrame(animate); ctx.clearRect(0, 0, canvas.width, canvas.height); addWaterDrop(); drawWaterDrops(); drawWaterPath(); } // 初始化水流路径 addWaterPath(100, 300); addWaterPath(200, 200); addWaterPath(300, 400); addWaterPath(400, 200); addWaterPath(500, 300); // 开始动画 animate(); ``` 需要注意的是，这个示例代码中使用了 requestAnimationFrame() 方法来实现动画效果，这是一种更加高效和流畅的动画实现方式。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值