<a href="" download="dmy" id="aaa"><canvas id="myCanvas" id="canvas"><img src="" alt="" id="img"></canvas></a><script>//獲取屏幕的寬度，使畫布的寬度和屏幕寬度一致var width = document.getElementById("myCanvas").width = screen.availWidth;console.log(screen.availHeight)//獲取屏幕高度，使畫布高度和屏幕寬度一致var height = document.getElementById("myCanvas").height = screen.availHeight;// 畫筆var ctx = document.getElementById("myCanvas").getContext("2d");// 定義一個數組，往里面填充（畫布寬度/10）個零var arr = Array(Math.ceil(width / 10)).fill(0);// 還可以用這種方法寫// var arr = [];// for (var i = 0; i < Math.ceil(width / 10); i++) {// ? ? arr.push(0);// }// console.log(arr)//字符串用split分割成數組var str = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789".split("");// console.log(str)//自定義一個函數function rain() {// 0.5的透明度，為了制造多層雨滴的時候更有科技感//這個時候畫布是透明的，每一層畫布透明度百分之五十，每重新畫一次//畫布就會覆蓋下面一層畫布，形成雨滴逐漸消失的感覺ctx.fillStyle = "rgba(0,0,0,0.05)";// 把整個畫布填充滿ctx.fillRect(0, 0, width, height);// 字體顏色ctx.fillStyle = "#0f0";//遍歷數組arr.forEach(function(value, index) {//遍歷數組 ?value是值，index是下標，下標對應的值// 第一個值是隨機取到的字符// 第二個值是下標，也就是列數，乘以10，是因為每一個//第三個值是下標對應的值// 下標乘以10是控制每一列的距離 這是針對x軸的ctx.fillText(str[Math.floor(Math.random() * str.length)], index * 10, value + 10);// 每次水平方向畫width/10個，每隔一次，在原本的位置往下面第十個像素，開始畫// 判斷其中一類的值是否大于屏幕的高度，如果大于那么，讓他從零開始重新畫；// 如果不大于屏幕的高度，那么就隨機一列滿足條件的話從頭開始畫arr[index] = value >= height || value > height *10 *Math.random() ? 0 : value + 10;// 其實還可以這么寫// if (value >= height) {// ? ? arr[index] = 0;// } else if (Math.random() < 0.05) {// ? ? arr[index] = 0;// } else {// ? ? arr[index] = value + 10;// }});}// 計時器setInterval(rain, 30);//這是canvas發布的一個新的使用方式，便于我們把畫布轉換成圖片格式var canvas = document.getElementById("myCanvas")canvas.onclick = function() {// 先拿到a標簽var svaeHref = document.getElementById("aaa");/** 傳入對應想要保存的圖片格式的mime類型* 常見：image/png，image/gif,image/jpg,image/jpeg*/// 然后拿到a標簽中的img標簽var img = document.getElementById("img");// 然后把圖片用png形式輸出，保存到一個變量里面var tempSrc = canvas.toDataURL('image/png');//我們使a標簽的href=這個變量svaeHref.href = tempSrc;//然后把img的src=這個變量img.src = tempSrc}

總結

以上是生活随笔為你收集整理的实现一下黑客帝国代码雨的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。