手机网站建设 苏州,湖南做网站 多少钱磐石网络,如何创建网站名称,美容院网站建设方案书整体思路#xff1a;
确定好字符雨的具体字符是什么#xff0c;需要多少行多少列这里是写死的其实也可以用循环加随机的方式生成不一样的字符雨#xff0c;行列也可以读一下宽度然后做一下出发算一下也行首先得有一张画布搞起#xff0c;然后循环列数去绘画字符定时器循环…整体思路
确定好字符雨的具体字符是什么需要多少行多少列这里是写死的其实也可以用循环加随机的方式生成不一样的字符雨行列也可以读一下宽度然后做一下出发算一下也行首先得有一张画布搞起然后循环列数去绘画字符定时器循环调取回话方法
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title字符雨/title
/head
style*{margin:0;padding: 0;box-sizing: border-box;height: 100%;}#char-rain {display: flex;width: 100%;height: 100%;overflow: hidden;}
/stylebodycanvas idchar-rain/canvasscript// 获取canvas元素var canvas document.getElementById(char-rain);// 获取画布上下文var ctx canvas.getContext(2d);// 定义字符集var chars abcdefghijklmnopqrstuvwxyz1234567890;// 定义字符雨的列数和行数var columns 800;var rows 500;// 定义每个字符的宽度和高度var charWidth 5;var charHeight 5;// 定义字符雨的速度var speed 30;// 定义一个数组用于存储每一列的字符var drops [];// 初始化每一列的字符for (var i 0; i columns; i) {drops[i] Math.floor(Math.random() * rows);}// 绘制字符雨function draw() {// 设置画布背景色ctx.fillStyle rgba(0, 0, 0, 0.1);ctx.fillRect(0, 0, canvas.width, canvas.height);// 设置字体样式ctx.font charWidth px monospace;ctx.fillStyle #0f0;// 绘制每一列的字符for (var i 0; i columns; i) {// 随机选择一个字符var char chars[Math.floor(Math.random() * chars.length)];// 绘制字符ctx.fillText(char, i * charWidth, drops[i] * charHeight);// 如果字符已经到达底部则重新从顶部开始if (drops[i] * charHeight canvas.height Math.random() 0.975) {drops[i] 0;}// 增加字符的下落速度drops[i];}}// 每隔一段时间调用一次绘制函数实现动画效果setInterval(draw, speed);/script
/body
/html复习点
一、canvas
提供了一个通过JavaScript 和 HTML的canvas元素来绘制图形的方式。 它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。
HTML5 canvas 元素用于图形的绘制通过脚本 (通常是JavaScript)来完成. canvas 标签只是图形容器但是必须使用脚本来绘制图形。
使用 html部分
canvas idmyCanvas width200 height100 styleborder:1px solid #000000;/canvas本身具有宽高属性直接设置就好单位默认px也可以通过 id 或者 class类名 或者 内敛样式 直接去定义宽高都可以的不设置的话默认宽300px高150px通常用 id 在后续脚本编写时会经常用到
JavaScript部分 canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成
var cdocument.getElementById(myCanvas);
var ctxc.getContext(2d);
ctx.fillStyle#FF0000;
ctx.fillRect(0,0,150,75);通常先通过id获取到dom元素dom.getContext(2d)创建context上下文对象大部分脚本行为都是围绕这个context对象展开的
这个代码里面用到的
fillStyle属性填充绘画颜色、渐变或模式。这里拿它做背景用了fillRect方法绘制被填充的矩形。这里是用它确定好画布大小。 需要知道的是fillRect这个方法有四个参数xywidthheight分别是矩形开始的xy轴坐标以及矩形宽高 默认的填充颜色是黑色 font属性文本内容的字体属性。这个代码里面字符的字体属性fillText方法在画布上绘制被填充的文本。这里就是把字符写上去。 需要知道的是fillText这个方法有四个参数text,x,y,maxWidth分别是填充文本该文本相对于画布的xy轴坐标以及允许的最大文本宽度 最后一个参数maxWidth选填 关于 上下文对象的属性和方法 二、setInterval
我们通常称之为计时器同样被称之为计时器的还有setTimeout 他们的不同点在于调取次数setInterval循环无限次调用直到页面关闭或者clearInterval清除而setTimeout是只会调用一次。
1、定义
可按照指定的周期以毫秒计来调用函数或计算表达式。 setInterval() 方法会不停地调用函数直到 clearInterval() 被调用或窗口被关闭。 由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。 2、语法及参数
setInterval(code, milliseconds);
setInterval(function, milliseconds, param1, param2, ...)code/function 必需。要调用一个代码串也可以是一个函数。milliseconds 必须。周期性执行或调用code/function之间的时间间隔以毫秒计。param1, param2, ... 可选。 传给执行函数的其他参数IE9 及其更早版本不支持该参数。
3、返回值
返回一个 ID数字可以将这个ID传递给clearInterval()clearTimeout() 以取消执行。
参考 1、菜鸟关于canvas 2、canvas的MDN
