Canvas制作喷泉效果示例

ゝ一纸荒年。 2024-02-20 12:37 59阅读 0赞

Canvas能制作出很多动画效果，下面是一个制作喷泉效果的示例

### 效果图 ###

![在这里插入图片描述][2011ff4dfa2143488a343feef5815abd.gif_pic_center]

### 源代码 ###

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1 ,user-scalable=no">
    <title> Canvas制作喷泉</title>
    <style type="text/css" media="screen">
    
    </style>
    
     </head>
     <body>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js" type="text/javascript"></script> 
    <script>var ctx = document.body.appendChild(document.createElement("canvas")).getContext('2d');
    var i, j, k, a = [], w = ctx.canvas.width =$(window).width(), h = ctx.canvas.height = $(window).height(), r = Math.random, p = Math.PI;
    setInterval(function(){
        
        ctx.fillStyle = "rgba(0, 0, 0, .5)";
        ctx.fillRect(0, 0, w, h);
        i = 10;
        while(i--){
        a.push({
        x:w/2,y:h/6,r:r()*3,c:"#fff",t:0,vx:r()*10-5,vy:r()*-5})}
        for(i = a.length-1;i >= 0;i--){
        
            k = a[i];
            ctx.fillStyle=k.c;
            ctx.beginPath();
            ctx.arc(k.x, k.y, k.r, 0, p*2)
            ctx.fill();
            k.x+=k.vx;
            k.y+=k.vy;
            k.vy+=.2;
            k.r -= .01;
            if(k.y>h){
        k.y=h;k.vy*=-.5;k.r+=.005;}
            k.r < 0 && a.splice(i, 1);
        }
    }, 1000/60);</script>
    </body>
    </html>

[2011ff4dfa2143488a343feef5815abd.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/153c147a24c642e9a7a8256ee072fad4.png

发表评论取消回复

表情：

评论列表（有 0 条评论，59人围观）

还没有评论，来说两句吧...

相关阅读

相关 Canvas制作喷泉效果示例

Canvas能制作出很多动画效果，下面是一个制作喷泉效果的示例效果图 ![在这里插入图片描述][2011ff4dfa2143488a343feef5815abd.gi

ゝ一纸荒年。/ 2024年02月20日 12:37/ 0 赞/ 60 阅读

相关 Canvas模拟火焰燃烧效果示例

canvas能做好很多事情，能显示各种动画。这里是模拟火焰燃烧效果的示例。示例效果 ![在这里插入图片描述][34af978344d243d7b35930b467c0

川长思鸟来/ 2024年02月20日 12:30/ 0 赞/ 56 阅读

相关 OpenGL 喷泉效果部分解释

<span style="color:3333ff;">一、头文件：MyFountainView.h</span> if !defined(AFX_MYFOU

旧城等待，/ 2022年08月07日 06:37/ 0 赞/ 178 阅读

相关 canvas初级示例

<!DOCTYPE HTML> <html> <meta http-equiv="Content-Type" content="tex

系统管理员/ 2022年08月02日 06:11/ 0 赞/ 203 阅读

相关 h5 Canvas时钟制作

canvas可以说是html5中最强大的元素之一下面我们就使用canvas来进行绘制一个时钟在绘制之前,我们需要知道需要绘制的元素都有哪些,其中包括钟最外边的圆圈、钟表上

待我称王封你为后i/ 2022年03月17日 15:43/ 0 赞/ 418 阅读

相关 canvas实现涂鸦效果--基本涂鸦效果

用canvas实现涂鸦效果，包括更换笔触大小颜色、换背景图、橡皮檫、历史记录、清屏等功能，并能保存涂鸦图片到本地。由于篇幅问题，本文主要实现基本涂鸦效果。编写静态页面

分手后的思念是犯贱/ 2022年02月27日 01:17/ 0 赞/ 768 阅读

相关 canvas特效案例-----字母喷泉

今天介绍一下如何用canvas实现字母喷泉效果首先看一下效果图 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_a

悠悠/ 2022年01月23日 00:33/ 0 赞/ 272 阅读

相关 canvas制作简易画板

![70][] <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-

我不是女神ヾ/ 2021年09月16日 04:10/ 0 赞/ 369 阅读

相关 canvas系类-非零坏绕原则（二）制作剪纸效果

![20170227154030806][] 根据[canvas系类-非零坏绕原则（一）][canvas_-]，我们可以制作出剪纸的效果：分析此图：要得到内图形没有填充的

悠悠/ 2021年09月11日 08:10/ 0 赞/ 240 阅读

相关 canvas 粒子效果

用到了underscore.js框架鼠标移动事件通过类来生成和改变球的位置通过定时器来清屏后添加球 <html> <head> <

Bertha 。/ 2021年07月24日 15:29/ 0 赞/ 446 阅读