canvs 实现进度条效果（烟火效果）

最新推荐文章于 2021-05-18 03:15:44 发布
最新推荐文章于 2021-05-18 03:15:44 发布
阅读量662 收藏 1
点赞数
分类专栏： canvas 文章标签： canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wjy397/article/details/43409423
版权

新手试一下canvas：先贴出效果（自己运行试一下）


贴出源码：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        body{padding:0px;margin:0px;overflow: hidden;}
        #cas{display: block;border:1px solid;margin:auto;}
    </style>
    <title>progressBar</title>
</head>
<body>
<div class="game">
    <canvas id='cas' width="700" height="750" >您的浏览器不支持canvas，请更新浏览器</canvas>
</div>
<script>
    var canvas = document.getElementById("cas");
    var ctx = canvas.getContext("2d");
    var progress = 0;
    var flag = true;
    var booms = [];


    Array.prototype.foreach = function(callback){
        for(var i=0;i<this.length;i++){
            if(this[i]!==null) callback.apply(this[i] , [i])
        }
    }


    window.RAF = (function(){
        return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) {window.setTimeout(callback, 1000 / 60); };
    })();


    function getRandom(a , b){
        return Math.random()*(b-a)+a;
    }


    var Frag = function(centerX , centerY , radius , color ,tx , ty){   //烟火碎屑对象
        this.tx = tx;
        this.ty = ty;
        this.x = centerX;
        this.y = centerY;
        this.dead = false;
        this.centerX = centerX;
        this.centerY = centerY;
        this.radius = radius;
        this.color = color;
    }


    Frag.prototype = {
        paint:function(){
            ctx.save();
            ctx.beginPath();
            ctx.arc(this.x , this.y , this.radius , 0 , 2*Math.PI);
            ctx.fillStyle = "rgba("+this.color.a+","+this.color.b+","+this.color.c+",1)";
            ctx.fill()
            ctx.restore();
        },
        moveTo:function(index){
            this.ty = this.ty+30;
            var dx = this.tx - this.x , dy = this.ty - this.y;
            this.x = Math.abs(dx)<0.1 ? this.tx : (this.x+dx*0.1);
            this.y = Math.abs(dy)<0.1 ? this.ty : (this.y+dy*0.1);
            if(dx===0 && Math.abs(dy)<=80){
                this.dead = true;
            }
            this.paint();
        }
    }


    var stage = {


        update:function(){


                if(progress<=600){
                    ctx.save();
                    ctx.fillStyle = "rgba(0,5,24,0.1)";
                    ctx.fillRect(0,0,canvas.width,canvas.height);//实现烟火尾巴效果
                    ctx.restore();
                    ctx.save();
                    ctx.fillStyle="blue";
                    ctx.fillRect(50,300,600,50);
                    ctx.restore();


                    ctx.save();
                    var gradient=ctx.createLinearGradient(50,300,600,50);
                    gradient.addColorStop("0","grey");
                    gradient.addColorStop("0.5","black");
                    gradient.addColorStop("1.0","red");//进度条渐变
                    ctx.fillStyle=gradient;
                    ctx.fillRect(50,300,progress,50);
                    progress += 2;
                    var  percentage= parseInt(progress/600*100)+"%";
                    ctx.font="30px Verdana";
                    ctx.fillText(percentage,200,200);
                    ctx.restore();


                    booms = [];
                    for(var i = 0;i<5;i++){
                        var  color = {
                            a:parseInt(getRandom(128,255)),
                            b:parseInt(getRandom(128,255)),
                            c:parseInt(getRandom(128,255))
                                        }    //end color
                        var fanwei = parseInt(getRandom(300, 400));
                        var a = getRandom(-Math.PI, -Math.PI*3/4);
                        var x = getRandom(0, fanwei) * Math.cos(a) + progress+50;
                        var y = getRandom(0, fanwei) * Math.sin(a) + 300;


                        var frag = new Frag( progress+50 , 300 , 2 , color , x , y );
                       booms.push(frag);
                    }//end for


                    booms.foreach(function(){
                        this.moveTo();
                    })
                }else{
                    flag =false;
                }


        },


        loop:function(){
            var _this = this;
            if(flag){
            this.update();
            }
            RAF(function(){
                _this.loop();
            });
        },


        start:function(){
            this.loop();
        }
    }
    stage.start();
</script>
</body>
</html>

手艺人123
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
canvs基础用法
qq_43981145的博客
11-14 204
canvs基础用法 HTML5 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成. 标签只是图形容器，您必须使用脚本来绘制图形。 你可以通过多种方法使用 canvas 绘制路径,盒、圆、字符以及添加图像。 创建一个画布 一个画布在网页中是一个矩形框，通过 元素来绘制. 注意: 默
C语言实现模拟烟花绽放的小程序源码
10-12
利用Visual Studio 2019开发工具，结合easyX插件，C语言实现模拟烟花绽放的小程序
c语言实现非常漂亮祝福烟花效果.zip
05-13
c语言实现非常漂亮祝福烟花效果.zip
用javascript在canvs上绘制…
ZHANGHUI3239619的专栏
12-07 1000
你好，我看了你写的这个是基于html5做的，我想问一下有没有基于纯javascript写的算法。原文地址：用javascript在canvs上绘制圆角矩形作者：蓝月转自：http://jo2.org/html5-canvas-round-rect/ 源码：     //圆角矩形     CanvasRenderingContext2D.prototype.roundRect = functio
HTML5&&canvs时钟
蜗牛的博客
01-16 395
canvas时钟 div{ text-align:center; } #clock{ border:1px solid #ccc; } var dom=document.getElementById('clock');//调取ID var ctx=dom.getContext('2d');//获取canvas上下文 var
canvas实现环形进度条效果
08-31
Canvas 实现环形进度条效果 本文主要介绍了使用 Canvas 实现环形进度条效果的实例，具有很好的参考价值。下面，我们来详细介绍这个实例。 知识点 1：Canvas 基础 Canvas 是 HTML5 中的一个重要元素，用于创建图形...
最新canvas实现曲线进度条效果
11-06
在现代Web开发中，Canvas是...总之，Canvas提供了强大的图形绘制能力，通过灵活运用其API，我们可以实现各种创新的视觉效果，包括曲线进度条。通过不断学习和实践，你将能够创造出更加复杂和引人入胜的交互式Web应用。
canvas实现弧形可拖动进度条效果
08-30
Canvas实现弧形可拖动进度条效果 本篇文章主要介绍了Canvas实现弧形可拖动进度条的实例方法，具有很好的参考价值。下面跟着小编一起来看下吧。 知识点1： Canvas基本概念 Canvas是HTML5新增的一个元素，用于在...
canvas入门
王道长的技术博客
09-18 4445
一、canvas 简介 1.1 什么是 canvas？（了解） 是 HTML5 提供的一种新标签 <canvas></canvas> 英 ['kænvəs] 美 ['kænvəs] 帆布 画布 Canvas 是一个矩形区域的画布，可以用 JavaScript 在上面绘画。控制其每一个像素。 canvas 标签使用 JavaScript 在网页上绘制图像，本身不具备绘图功能。 canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 HTML5 之前的 web 页面
canvas
望天一方小叶子的博客
09-20 4447
canvas 只能在标签中用width。heigth修改大小 基本方法： 先得到canvas： let canvas = document.querySelector('#canvas') // 得到canvas let gd = canvas.getContext('2d')//得到canvas上下文环境 gd.moveTo(a,b): 从一个点开始绘图 gd.lineTo(c,d):绘图终...
c语言实现非常漂亮祝福烟花效果.rar
12-31
c语言实现非常漂亮祝福烟花效果.rar
VS2015制作MFC设计带文本显示的进度条
02-01
声明： 这是我下载其他高手的代码，感谢！ 使用方法： 1：添加文件：TextProgressCtrl.h和TextProgressCtrl.cpp至你的工程目录下。 2：在工程中引用头文件：TextProgressCtrl.h 3：替换CProgressCtrl m_prog;为CTextProgressCtrl m_prog; 即用现在进度条的扩展类来替换原来的类 4：其他使用一样。 希望对各位有所帮助，谢谢！
C语言实现模拟烟花绽放的小程序,C语言课程设计报告烟花绽放.doc
weixin_39774682的博客
05-17 572
PAGEPAGE 15课程设计报告书设计题目 烟花绽放系 别 计算机工程系专 业 计算机科学与技术班 级姓 名指导教师设计任务下达日期2011年 12 月 24 日设计时间2011年12月26日 至 2010年12月30日课程设计任务书一、目的和意义本课程设计是《C语言程序设计》课程的后继教学环节, 通过研究C语言中图形...
祝福烟花程序设计c语言,非常漂亮的新年祝福!C语言实现漂亮的烟花效果
weixin_39791349的博客
05-18 3291
本文实例为大家分享了C语言实现漂亮的烟花效果展示的具体代码，供大家参考，具体内容如下程序名称：祝福烟花，祝福朋友编译环境：VC++6.0 && easyx(立冬版)#include #include #include #include #include #include #include // 使用该计时器必须包含的文件#pragma comment ( lib, "Winmm....
完美渐变进度条ProgressBar 顶部显示文字进度
baidu_34139251的博客
11-27 4053
感谢 https://github.com/lygttpod/AndroidCustomView/blob/master/progress.md 的文章经过修改后得到我想要的效果，如下图： 下面附源码 import android.animation.ValueAnimator; import android.content.Context; import android.graphi...
Kotlin的自定义View，实现带弧形的进度条
郭霖
10-25 387
/ 今日科技快讯 /昨日，特斯拉公布了第三季度的财报。本来外界普遍分析特斯拉会在第三季度持续亏损，但是最终公布的财报却意外地实现了1.5亿美元的净利润。另外特斯拉...
Canvs循环滚动图像
Comvir的专栏
07-09 631
本文将介绍使用canvas绘图API进行循环滚动图像。
Android ProgressBar 反向进度条/进度条从右到左走
weixin_34050005的博客
03-04 298
近期的项目，有个需求须要使用条状图显示比例，而且右对齐，见下图： 我想到了使用进度条，这样不就不须要在代码动态绘制条状了，省了非常多活。 那么进度条如何从右向左显示呢？ 方案一： 将ProgressBar的前背景反着用，将前景色设置为和整个大背景同一色，将背景设置为你要的条状图颜色，这样就看不出实际的进度，看到的是进度背景，在视觉上看上去就是右对齐了。实际上还是原来那个进度...
利用canvas制作进度条实践
lakenQi
10-23 1437
开门见字 之前写过一篇H5新标签progress进度条的使用文章，当时觉得研究的还行，但是发现，这个标签在不同浏览器中样式表现是不一致的，如下： chrome中：，一抹蓝色划过天际； 火狐中：，一片绿色大森林； IE中：，一群小点排排坐。 够了，完全不着边际的不一致，就这三大家都各有各的想法，不敢想象其他人了，且本人不才，没有研究出CSS修改progress的方法。当然如果不在乎这些差别...
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、付费专栏及课程。

余额充值