HTML5 Canvas

海胆Sur

已于 2023-07-10 16:49:48 修改

阅读量110

点赞数

分类专栏： # HTML 文章标签： html5 javascript 前端

于 2021-06-06 13:53:06 首次发布

本文链接：https://blog.csdn.net/I_fole_you/article/details/117625568

版权

HTML 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

只是一个容器，有一个基于 JavaScript 的绘图 API

SVG 和 VML 使用一个 XML 文档来描述绘图。

API

通过 Canvas 对象的 getContext( "2d"/"webgl") 方法获得canvas的上下文用以调用各种api。
Canvas接口参考手册

MDN Canvas

ctx.globalCompositeOperation

代码雨案例

代码来源

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>代码雨</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      overflow: hidden;
    }
  </style>
</head>

<body>
  <canvas id="canvas"></canvas>
  <script>
    let canvas = document.querySelector('#canvas')
    let ctx = canvas.getContext('2d')
    canvas.height = screen.availHeight; //可视区域的高度
    canvas.width = screen.availWidth; //可视区域的宽度
    let str = 'Seaurchin486'.split('')
    let Arr = Array(Math.ceil(canvas.width / 10)).fill(0) //获取宽度例如1920 / 10 192

    const rain = () => {
      ctx.fillStyle = 'rgba(0,0,0,0.05)'//填充背景颜色
      ctx.fillRect(0, 0, canvas.width, canvas.height)//背景 覆盖图层内容
      ctx.fillStyle = "#0f0"; //文字颜色
      Arr.forEach((item, index) => {
        ctx.fillText(str[Math.floor(Math.random() * str.length)], index * 10, item + 10)
        Arr[index] = item >= canvas.height || item > 10000 * Math.random() ? 0 : item + 10; //添加随机数让字符随机出现不至于那么平整
      })
    }
    setInterval(rain, 40)
  </script>
</body>
</html>