手把手教你變 大神 . 😄
<!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>