JavaScript canvas仿代码流瀑布

本文实例为大家分享了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 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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • js实现的美女瀑布流效果代码

    js实现的美女瀑布流效果代码

    瀑布流以及回顶部的效果 *{ margin:0; padding:0; } h1{ text-align:center; height:100px; } body{ background-color:RGB(232,231,226); } .all{ margin:0 auto; width:1000px; } .number{ float:left; width:225px; } .content { margin:5px; background-color:white; } img{ mar

  • JavaScript瀑布流布局实现代码

    JavaScript瀑布流布局实现代码

    先说一下什么是瀑布流布局. 就是一堆等宽不等高的数据块组成的页面,如图: 现在好多网站都采用这种瀑布流布局,如蘑菇街.美丽说等等. 首先要实现它就要明白它是怎样排列的. 每一行的列数都是根据图片的宽度和页面的宽度算比例算下来的.. 第一行就是按顺序排列,其他的数据块都是在每一列中挑选出最低的那一列依次排进去的. 首先实现框架. <div id = "main"> <div class = "box"> <div class = &quo

  • JavaScript canvas仿代码流瀑布

    JavaScript canvas仿代码流瀑布

    本文实例为大家分享了canvas仿代码流瀑布的具体代码,供大家参考,具体内容如下 在js部分写canvas代码,有详细注释 html部分: 一个canvas元素: <canvas id="canvas" ></canvas> css部分: <style> *{ padding: 0; margin: 0; } canvas{ background-color: #111; } body{ overflow: hidden; } </style&

  • JavaScript canvas实现代码雨效果

    JavaScript canvas实现代码雨效果

    本文实例为大家分享了canvas实现代码雨效果的具体代码,供大家参考,具体内容如下 先看效果图 这个效果图是不是像极了以前电影里面的黑客技术,看起来蛮难的,其实操作起来还是挺简单的. canvas其实就是画布的意思 首先我们得有一个画布 <body> <canvas id="canvas"></canvas> </body> 再设这样一个背景 HTML部分 <body> <canvas id="canvas&q

  • javascript高仿热血传奇游戏实现代码

    前言 游戏的第一个版本开发于14年,浏览器端使用html+css+js,服务端使用asp+php,通讯采用ajax,数据存储使用access+mySql.不过由于一些问题(当时还不会用node,用asp写复杂的逻辑真的会写吐:当时对canvas写的也少,dom渲染很容易达到性能瓶颈),已经废弃.后来用canvas重制了一版.本文写于18年. 1.开发前的准备 为什么要用Javascript来实现一款比较复杂的PC端游戏 1.js实现PC端网游是可行的.随着PC.手机硬件配置的升级和浏览器的更新换

  • JavaScript canvas 实现用代码画画

    目录 引言 第一部分:图形绘制 画画第一步:准备好画布和画笔 画画第二步:给画笔调个粗细 画画第三步:给画笔沾点颜料 画画第四步:描点画图 (1)画一个三角形 (2)画一个矩形 (3)画一个圆 (4)进阶:画一个笑脸 画画第五步:署名 第二部分:图片绘制 引言 canvas是HTML的一个绘图标签,与SVG用标签绘图不同,canvas是通过Js代码进行图形绘制,多用于移动端分享海报绘制以及照片裁剪等场景.本文将结合部分canvas API介绍在Vue项目中如何使用canvas进行简单的图形绘制和

  • JavaScript canvas实现字符雨效果

    JavaScript canvas实现字符雨效果

    本文实例为大家分享了JavaScript canvas实现字符雨效果的具体代码,供大家参考,具体内容如下 字符雨效果 分析如何实现 字符雨从上往下逐渐消失: 这是canvas每次画字符的时候就画一遍黑色背景,但是这个背景是有透明度的,并且这个黑色背景的透明度还比较小,只有零点零八(经过测试,0.08比较合适,也可以更改查看效果):字符是从上往下落,上面的字符先出现,下面的字符后出现,程序重复地画黑色背景,就算有透明度,叠加起来,上面的字符就会先被覆盖,下面的后出现的字符还是还比较明显,就形成了逐

  • JS实现canvas仿ps橡皮擦刮卡效果详解

    JS实现canvas仿ps橡皮擦刮卡效果详解

    目录 效果演示: 主要JS代码实现 <div class="box" id="bb"> <canvas id="cas" width="1366" height="651"></canvas> </div> <script type="text/javascript" charset="utf-8"> var

  • JavaScript实现仿新浪微博大厅和腾讯微博首页滚动特效源码

    JavaScript实现仿新浪微博大厅和腾讯微博首页滚动特效源码

    JavaScript实现仿新浪微博大厅和未登录腾讯微博首页滚动效果,貌似这些天有不少朋友需要这功能,前几天已经发了几个了,不过那一个效果是用jquery实现的<jQuery向上循环滚动(仿新浪微博未登录首页滚动微博显示)>,今天发现这款是js制作的好,不敢独享,希望需要的朋友喜欢哦. 效果图展示如下: 查看演示         源码下载 html代码 <div class="wp"> <ul id="slider" class=&quo

  • 基于javascript实现仿百度输入框自动匹配功能

    本文实例讲解了基于javascript实现仿百度输入框自动匹配功能的详细代码,现在很多网站都有这种效果,在文本框输入一个字符,下边会出来相匹配的内容,这个代码就演示了这个功能是如何完成的,当然,这是个静态的,你可以将提示的内容从数据库读取出来,要用到AJAX那东东,分享给大家供大家参考,具体内容如下 <HTML> <HEAD> <title>带输入匹配的文本框</title> <style> body,div { font-family:verd

  • JavaScript Canvas编写炫彩的网页时钟

    JavaScript Canvas编写炫彩的网页时钟

    本文实例为大家分享了JavaScript Canvas编写炫彩网页时钟的具体代码,供大家参考,具体内容如下 只是利用了Canvas制作的. 示意图如下: <!DOCTYPE html> <html> <head> <meta http-equiv = "Content-Type" content = "text/html"; charsert = "utf-8" /> <title> 网

  • JavaScript+Canvas实现彩色图片转换成黑白图片的方法分析

    本文实例讲述了JavaScript+Canvas实现彩色图片转换成黑白图片的方法.分享给大家供大家参考,具体如下: 1.convertToGray() 在主体代码中使用 canvas 元素的id来获取画布,并设置画布的宽和高为图片的宽和高,再将上下文初始化为2d画布:彩色图片加载完成后,使用 drawImage() 将图片加载到上下文,调用用于完成剩余绘制工作的 getColorData()和 putColorData():最后为myImage指定彩色图片的路径. 2.getColorData(

随机推荐