酷站(www.ku0.com)-致力于为互联网从业者提供动力!

热门关键词:  企业  as  baidu  c4rp3nt3r  美女
酷站

【云小站】新老客都返现+现金红包+瓜分60万奖池
酷站

js

旗下栏目: php js asp Flex Ajax JSP jquery asp.net C语言 java 正则表达式 微信小程序 Android IOS

JavaScript canvas仿流瀑布效果

来源:互联网搜集 作者:秩名 人气: 发布时间:2020-02-10
本篇文章主要介绍了JavaScript canvas仿流瀑布效果,对大家的学习或者工作具有一定的参考学习价值,感兴趣的小伙伴们可以参考一下,也感谢大家对酷站(ku0.com)的支持。

效果图如下:



在js部分写canvas代码,有详细注释

html部分:

一个canvas元素:

 
<canvas id="canvas" ></canvas>

css部分:

<style>
  *{
   padding: 0;
   margin: 0;
  }
  canvas{
   background-color: #111;
  }
  body{
   overflow: hidden;
   
  }
</style>

<script>
  var canvas = document.getElementById('canvas');
  var context = canvas.getContext('2d');
  // 获取浏览器的宽度和高度
  var w = window.innerWidth;
  var h = window.innerHeight;
  // 设置canvas的宽高
  canvas.width = w;
  canvas.height = h;
  // 每个文字的大小
  var fontSize = 16;
  // 一共可以有多少列文字
  var col = Math.floor(w / fontSize);
  // 记录每列文字的y轴坐标
  var cpy = [];
  for(var i = 0;i< col; i++)
  {
   cpy[i] = 1;
  }
  //定义文字
  var str = "Javascriphafhsdhfsfsf{}";
  // 绘制
  draw();
  setInterval(draw,30);
  function draw(){
   context.beginPath();
   // 背景填充颜色
   context.fillStyle = "rgba(0,0,0,0.05)";
   context.fillRect(0,0,w,h);
   // 设置字体大小
   context.font = fontSize +"px bold 微软雅黑 ";
   // 设置字体颜色
   context.fillStyle = "#00cc33";
   for(var i = 0; i < col;i++)
   {
    var index = Math.floor(Math.random()*str.length);
    var x = i*fontSize;
    var y = cpy[i]*fontSize;
    context.fillText(str.charAt(index),x,y);
    if(y >= h && Math.random()> 0.99)// 出现时间延迟的效果
    {
     cpy[i]=0;// 只要Math.random> 0.99 时才纵坐标从0开始写字
    }
    cpy[i]++;// 数组值加一,以便下一次写的字在下面一行
   }
  }
</script>

版权声明:本文内容来源于互联网或用户自行发布贡献,该文观点仅代表原作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 959677720#qq.cn(#换@) 举报,一经查实,本站将立刻删除。
原文链接:https://blog.csdn.net/qq_41257129/article/details/89365148

相关文章

  • js表达式与运算符简单操作教程

    js表达式与运算符简单操作教程

    代码如下: /*** Created by Administrator on 2017/12/14.* 表达式与运算符*///1.基本表达式 加减乘除var a = 4;a = 7/6;var b = (a + 4)/2;console.log(a);console.log(b);console.log(==========);//end//2.比较运算符 == != = =conso......
    02-15
  • JS实现简易计算器代码

    JS实现简易计算器代码

    用JS实现简易计算器,供大家参考,具体内容如下: 首先创建结构和样式 !DOCTYPE htmlhtml lang=enhead meta charset=UTF-8 meta name=viewport content=width=device-width, initial-scale=1.0 titleDocument/title style body{ margin:0......
    02-14
  • JavaScript实现拖拽的代码

    JavaScript实现拖拽的代码

    盒子拖拽运用到的有onmousedown事件,onmousemove事件以及onmouseup事件 1、当鼠标点击下去的时候我们需要获取鼠标所在位置的横纵坐标,然后获取盒子的离页面的横纵方向的距离 2、计算出鼠标相对盒子的距离 3、当鼠标移动的时候,获取鼠......
    02-12
  • JavaScript canvas仿流瀑布效果

    JavaScript canvas仿流瀑布效果

    效果图如下: 在js部分写canvas代码,有详细注释 html部分: 一个canvas元素: canvas id=canvas /canvas css部分: style *{ padding: 0; margin: 0; } canvas{ background-color: #111; } body{ overflow: hidden; }/style script var ......
    02-10
  • JavaScript canvas动画实现时钟的代码

    JavaScript canvas动画实现时钟的代码

    效果图如下: 代码如下: !DOCTYPE htmlhtml lang=enhead 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时钟特效/title/headbody canva......
    02-10
  • 微信小程序canvas开发水果老虎机的思路

    微信小程序canvas开发水果老虎机的思路

    效果图: 使用结构还是canvas? 使用模板结构(view)生成水果盘的好处一是用户可自定义产出 n x n 的定制化老虎机,二是容易通过算法样式生成布局,三是通过 wx.selectQueryAll 的方法能够很方便的抓到定位数据。但,问题是动画性能过于孱......
    02-09
  • JavaScript canvas实现雪花随机动态飘落效果

    JavaScript canvas实现雪花随机动态飘落效果

    效果图如下: 代码如下: !DOCTYPE htmlhtml lang=enhead meta charset=UTF-8 meta name=viewport content=width=device-width, initial-scale=1.0 titleDocument/title/headstyle body{ margin: 0; padding: 0; } canvas{ background: #......
    02-08
  • js实现踩五彩块游戏代码

    js实现踩五彩块游戏代码

    代码如下: !DOCTYPE htmlhtml lang=enhead meta charset=UTF-8 meta name=viewport content=width=device-width, initial-scale=1.0 meta http-equiv=X-UA-Compatible content=ie=edge titleDocument/title link rel=stylesheet href=de......
    02-08
  • js实现聊天对话框的代码

    js实现聊天对话框的代码

    代码如下: !DOCTYPE htmlhtml head meta charset=utf-8 title/title style type=text/css .box{ width:300px; height:400px; border:1px solid blue; margin:0 auto; } .inTer{ width:280px; height:280px; border:1px solid deeppink; ......
    02-08
  • JavaScript this的使用方法介绍

    JavaScript this的使用方法介绍

    本文我们介绍下js中this的用法。 由上图可得,默认this指向window,而在node.js中this默认指向global。 由上图可得: 1.原型链为o-MyClass.prototype。 2.函数如果没有明确返回值默认返回this。 由上图可得:call和apply功能相同,不同之......
    02-04

最新更新