手把手教你变 大神 . 😄
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<!--
1 什么是canvas？
俗称：画布
是html5新增的一个H5的标签
2 canvas能用在哪些方面？
游戏 广告 图形 图表 特效和艺术设计
3 如何去写canvas代码？
canvas是一个标签 基于JS去实现的（依赖于js）
-->
<!-- <canvas width="100%" height="100%" id="canvas"></canvas>
<script type="text/javascript">
// 纸
var canvas = document.getElementById("canvas");
// 确定纸张的大小
canvas.width = 500;
canvas.height = 1000;
// 笔
var context = canvas.getContext('2d');
// 开始绘画
context.beginPath();
// 绘制过程
// 绘制矩形
// 确定画笔的颜色
context.fillStyle = 'cornflowerblue';
// fillRect方法有四个参数
// 矩形左上角x座标,矩形左上角y轴的座标,矩形宽度,矩形高度
context.fillRect(200,200,100,50);
// 绘制文字(颜色，字号，字体，字的内容)
context.fillStyle = 'green';
context.font = '30px 楷体';
// fillText方法
// 字体内容,字体的x轴座标,字体的y轴座标
context.fillText('一只鹅',200,200);
// 结束绘画
context.closePath();
</script>
<!--1、显示黑色背景、显示绿色文字
2、文字在一列中动起来
3、文字在多列中动起来
4、完成代码雨
-->
<canvas id="canvas"></canvas>
</body>
<script type="text/javascript">
//1.获取画布
var canvas = document.getElementById("canvas");
//2.确定我们画布的大小
var width = window.innerWidth; //获取页面文档显示区域的宽度
var height = window.innerHeight; //获取页面文档显示区域的高度
canvas.width = width;
canvas.height = height;
//3.获取画笔
var context = canvas.getContext("2d");
//4.开始画图
context.beginPath();
var y = 0;
var x = 0;
var fontsize = 16;
var row = width / fontsize;
var arr = [];//控制 y的值
var str = "我abcdefghijklmnopqrstuvwxyz爱1234567890你";
for(var i = 0;i <= row;i++){
arr.push(0)
}
var dorw = function() {
//第一步：绘制黑色背景和绿色文字
context.fillStyle = "rgba(0,0,0,0.05)";
context.fillRect(0, 0, width, height);
//第二步：绘制绿色的文字
for(var i = 0; i <= row; i++) {
x = i*fontsize;
y = arr[i]*fontsize;
//选取字符串中的某一个字符
var index =Math.floor(Math.random()*str.length);
context.fillStyle = "greenyellow";
context.font = "16px 楷体";
context.fillText(str[index], x, y);
if(y > height&&Math.random()>0.99) {
arr[i] = 0;
}
arr[i]++;
}
}
//第三步：文字开始移动
//自增量 定时器（循环的执行某一个方法）
//两个参数 第一个参数（存放要反复执行的函数名）
//第二个参数（每隔多长时间执行一次该函数）单位是毫秒
setInterval(dorw, 30);
//5.结束画图
context.closePath();
</script>
</html>