画布做加载动画!

最新推荐文章于 2024-05-13 10:13:24 发布
最新推荐文章于 2024-05-13 10:13:24 发布
阅读量380 收藏
点赞数
分类专栏： js canvas html5 文章标签： 动画 canvas 进度条 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiyan_yuan/article/details/77777534
版权
js 同时被 3 个专栏收录
17 篇文章 0 订阅
订阅专栏
html5
2 篇文章 0 订阅
订阅专栏
canvas
1 篇文章 0 订阅
订阅专栏

html

<html>
    <head>
    <meta charset='UTF-8'>
    <script src="http://www.oxcoder.com/sys/js/libs/jquery-1.11.0.min.js"></script>
    </head>
    <body>
        <canvas id='canvas'></canvas>
    </body>
</html>

js

<script>
    (function(){
    var canvas=$('canvas');//获取画布标签
    var cav=canvas.getContext('2d');//设置画布2维场景
    var num=0;//声明角度控制器变量
    //现在我们用定时器来启动咱们的程序，查看效果
    setInterval(function(){
        num++;
        //因为我把圆 360度分成了 100份，也是方便计算，所以只需要判断它是否大于 100
        if(num>100){
            num=0;
        }
        jindutiao(canvas,cav,100,100,50,50,40,num);
    },100)
})()
/*参数，
canvas 表示html 的画布对象，
cav  表示画布场景对象，
width  表示你要设置的画布的宽度，
height  表示你要设置的画布高度，
x  表示你要绘制的圆心在画布的横向坐标值，
y  表示你要绘制的圆心在画布的纵向坐标值，
r  表示你要绘制的圆的半径,
move_r  加载进度的角度*/
function  jindutiao(canvas,cav,width,height,x,y,r,move_r){
canvas.setAttribute('width',width);//设置画布宽度
canvas.setAttribute('height',height);//设置画布高度
cav.clearRect(0,0,canvas.Width,canvas.Height);//清楚画布，从新绘制
//绘制动画路径
cav.beginPath();
cav.lineWidth=10;//设置当前路径的宽度（粗细）
cav.strokeStyle='#cccccc';//设置笔触颜色
//arc()方法创建弧/曲线(用于创建圆或部分圆)，参数分别是（圆心X坐标，圆心Y坐标，半径，圆的开始角度，圆的结束角度）
cav.arc(x,y,r,0,2*Math.PI);
cav.stroke();//绘制
//绘制加载进度
cav.beginPath();
cav.lineWidth=10;
cav.strokeStyle='red';
cav.arc(x,y,r,-90*Math.PI/180,(move_r*3.6-90)*Math.PI/180);
cav.stroke();
//绘制进度提示文字
cav.font='20px Arial';
cav.fillStyle='#747474';
cav.textBaseline='middle';
cav.textAlign='center';
cav.fillText(move_r+'%',x,y);
}

</script>

这里写图片描述

xiyan_yuan
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
canvas画布
m0_62073591的博客
07-15 2201
在canvas中绘制圆形,我们将使用以下方法arc(x,y,r,start,stop,[counterclockwise])参数的意思(圆心x，圆心y,半径r，起始角，结束角,[弧沿着圆周的逆时针(True)或者顺时针(False)遍历])绘制一个圆。参数的意思(椭圆圆心x，椭圆圆心y,半径x,半径y,旋转的角度，起始角，结束角，顺时针还是逆时针）知识点5清空给定矩形内的指定像素context.clearRect(x,y,width,height);定义和用法方法绘制矩形(无填充)。...
使用Canvas自定义图形 之 自定义加载动画效果
syfxx的博客
09-15 328
使用Canvas自定义图形 之 自定义加载动画效果
最全22个Python绘图包，极简总结，2024年最新阿里巴巴面试 在线编程
最新发布
m0_60635245的博客
05-13 750
这是我花了几天的时间去把Python所有方向的技术点做的整理，形成各个领域的知识点汇总，它的用处就在于，你可以按照上面的知识点去找对应的学习资源，保证自己学得较为全面。灵感来自Three.js。基本上主流的和经典的都有，这里我就不放图了，版权问题，个人看看是没有问题的。
html5使用canvas画布制作圆形加载动画
现在学习也不晚
07-27 4599
之前我写过使用css3制作圆形加载的动画，但是很麻烦。这几天我突然发现使用canvas还更加的简单，为什么我不用canvas做呢？ 所以，趁着今天有时间，赶紧的整理一下思路，书写了一个简单的案例。 这个相对于css3的好处就是，没有那个bug，css3的上下会有一点淡淡的颜色边，而canvas绘制出来的没有bug还很简单。所以，我就写了一个简单的案例。 兼容性方面，canvas兼容到
js前端画布实现动画小球自由落体
05-05
实现了小球自由落体 简单的js代码，动画是在画布上面实现的，配合html和css
对画布绘制实现动画 --Canvas的基本操作
chenzhao635的专栏
02-02 659
由于是用脚本操控canvas对象的，这样要实现一些交互动画也是相 当容易的。只不过，canvas 从来都不是专门为动画而设计的（不像 Flash），这样难免会有些限制。可能最大的限制就是图像一旦绘制出 来，它就是一直保持那样了。如果需要移动它，我们不得不对所有东西 （包括之前的）进行重绘了。 对画布绘制实现动画的步骤如下： （1）预先编写好用来绘图的函数，在该函数中先用clearRect方法将 画...
HTML5画布上加载动画效果
04-03
本教程将深入讲解如何在HTML5画布上创建加载动画效果，适合那些想要提升用户体验、增加网站互动性的开发者。 首先，我们需要在HTML文档中创建一个`<canvas>`元素，这是画布的基础。例如： ```html <!DOCTYPE html>...
HTML5 Canvas加载动画特效
06-24
为了实现加载动画，我们需要不断地更新圆弧的结束角度，从0到2π（代表完整的圆周），并根据加载进度逐渐增加。 加载动画的实现通常包括以下步骤： 1. 创建Canvas元素：在HTML中添加一个canvas标签，并设置其id...
形状加载动画Canvas特效
06-24
在网页设计中，用户体验是至关重要的，而加载动画则是提升用户体验的一个重要环节。"形状加载动画Canvas特效"正是一款利用HTML5的Canvas元素来创建的动态加载效果，它旨在为用户展示一个美观且吸引人的页面加载过程...
HTML5 Canvas 3D跳动Loading加载动画-可调节参数
11-09
"跳动Loading加载动画"通常指的是在页面加载过程中显示的动态效果，以告知用户内容正在加载。这种动画设计能够减少用户的等待感知，提高用户体验。3D跳动效果可能涉及到立方体旋转、球体缩放或其他3D变换，同时结合...
Canvas边框粒子加载动画特效
06-24
"Canvas边框粒子加载动画特效"是利用Canvas技术来创建的一种动态加载效果，这种效果通常用于网页加载时显示进度，给用户带来视觉上的反馈，增加交互体验。 首先，我们要理解Canvas的基本用法。Canvas是一个二维绘图...
Canvas 绘制图表，滑动加载数据和显示（一）
ajiyi的博客
10-31 1359
Canvas 绘制图表（折线图） HTML 5 Canvas 参考手册 : https://www.w3school.com.cn/tags/html_ref_canvas.asp HTML 事件属性: https://www.w3school.com.cn/tags/html_ref_eventattributes.asp 使用Canvas 绘制图像，通常是用脚本（JS）实现的。 对于每一次...
Canvas画布实现动画效果
笺赕
01-25 1559
1、圆球跳动的动画 &lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;圆球跳动的动画&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;canvas id="canvas
canvas绘制加载特效
dede3535的专栏
09-12 82
css样式： body{ text-align: center; } canvas{ background: #ddd; } canvas标签： <canvas id="canvas" width="500" height="400"></canvas&gt...
canvas作图系列——折（曲）线图
Lucky_Q的博客
10-31 703
折（曲）线图 折线图和曲线图最主要的地方就是获取到当前点以及下一个点的坐标值，只要有了这两个值，其他的都不是问题。canvas绘制曲线主要用的的是二次贝塞尔曲线和三次贝塞尔曲线 二次贝塞尔曲线 ctx.moveTo(20,20) //开始点坐标 ctx.quadraticCurveTo(20,100,200,20); //控制点坐标的xy和结束点坐标的xy 三次贝塞尔曲线 ctx.moveTo(...
canvas绘制动态加载圆形百分比
sweetllh的博客
07-29 2009
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div> <canvas width="152" height="152" id="process"></canvas>
HTML5 cavas画布加载图片
热门推荐
大道相通
03-06 1万+
HTML5 cavas画布加载图片 Your browser does not support the canvas element. var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); var img=new Image() img.src="/img/flower.p
用画布创作动画效果--示例
Janner668的博客
02-17 251
动画 动点圆–立体感 需要5步： 创建画布 在画布内创建2D对象 创建一个圆的类–包含绘制圆的方法和移动方法 初始化–调用初始化函数得到圆 动画->连接小球的线段 调用初始化和动画函数 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
js实现随机移动的萤火虫
vcxiaohan的博客
07-25 4645
知识点：3次贝塞尔曲线 force * { margin: 0; padding: 0; } body, html { width: 100%; height: 100%;
给我做个粒子动画的源码
06-01
以下是一个简单的粒子动画的 HTML、CSS、JavaScript 源码示例： ```html <!DOCTYPE html> <html> <head> <title>粒子动画</title> <style> body { margin: 0; padding: 0; background-color: #111; } #canvas { display: block; position: absolute; top: 0; left: 0; z-index: -1; } </style> </head> <body> <canvas id="canvas"></canvas> <script> // 创建粒子对象 function Particle(x, y, radius) { this.x = x; this.y = y; this.radius = radius; this.color = 'white'; this.speed = { x: -1 + Math.random() * 2, y: -1 + Math.random() * 2 }; this.gravity = 0.01; this.friction = 0.99; } // 更新粒子的位置和速度 Particle.prototype.update = function() { this.speed.x *= this.friction; this.speed.y *= this.friction; this.speed.y += this.gravity; this.x += this.speed.x; this.y += this.speed.y; }; // 绘制粒子 Particle.prototype.draw = function(ctx) { ctx.beginPath(); ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2); ctx.fillStyle = this.color; ctx.fill(); }; // 创建画布和粒子 function createCanvas() { var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var particles = []; var width = window.innerWidth; var height = window.innerHeight; var particleNum = 100; canvas.width = width; canvas.height = height; // 初始化粒子 for (var i = 0; i < particleNum; i++) { particles.push(new Particle(width / 2, height / 2, Math.random() * 2)); } // 绘制和更新粒子 function draw() { ctx.clearRect(0, 0, width, height); for (var i = 0; i < particles.length; i++) { var particle = particles[i]; particle.update(); particle.draw(ctx); } requestAnimationFrame(draw); } draw(); } // 页面加载完成后创建画布和粒子 window.onload = function() { createCanvas(); }; </script> </body> </html> ``` 以上代码中，通过 HTML 中的 `canvas` 元素来创建画布，并通过 JavaScript 中的 `Particle` 对象来创建粒子。在 `Particle` 对象中，通过 `update` 函数来更新粒子的位置和速度，通过 `draw` 函数来绘制粒子。在 `createCanvas` 函数中，初始化粒子并绘制和更新粒子。此外，通过 `window.onload` 来监听页面加载完成事件，当页面加载完成后创建画布和粒子。你可以根据需要修改代码中的粒子数量、颜色、速度等参数来实现不同的效果。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值