Canvas制作喷泉效果示例

ゝ一纸荒年。 2024-02-20 12:37 81阅读 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 条评论，81人围观）

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

相关阅读

相关 Canvas制作下雨雨滴效果

canvas绘制下雨雨滴打在地面动画特效。雨滴的方向是依据鼠标的位置而来的，落到地面时候，产生了飞溅的小点点，很形象。效果图 ![在这里插入图片描述][8e5c3f9

r囧r小猫/ 2024年02月20日 12:38/ 0 赞/ 77 阅读

相关 Canvas制作喷泉效果示例

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

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

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

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

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

相关 OpenGL 喷泉效果部分解释

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

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

相关 h5 Canvas时钟制作

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

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

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

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

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

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

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

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

相关 canvas制作简易画板

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

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

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

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

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

相关 canvas 粒子效果

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

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