webgl多彩画布

田园金水

已于 2023-01-07 11:24:40 修改

阅读量93

点赞数

文章标签： canvas html js

于 2021-04-21 11:23:27 首次发布

本文链接：https://blog.csdn.net/weixin_42364061/article/details/115941108

版权

<!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>
    body {
      margin:0;
      overflow: hidden;
    }
    #canvas {
      background-color: pink;
    }
  </style>
</head>
<body >
  <!-- 建立canvas画布 css的颜色不能和图形交互-->
  <canvas id="canvas"></canvas>
  <script type='module'>
    import { Color } from 'https://unpkg.com/three/build/three.module.js'
    // 获取canvas画布
    const canvas = document.getElementById('canvas')
    // 设置尺寸
    canvas.width = window.innerWidth
    canvas.height = window.innerHeight
    // 使用canvas获取webgl绘图上下文
    /** 2维画笔
    * const gl = canvas.getContext('2d')
    **/
    // 3维画笔
    const gl = canvas.getContext('webgl')
    // 指定将要用来清空绘图区颜色(声明颜色 rgba) 颜色对应 0-1[0,1] 1相当于css[0,255]  255
    gl.clearColor(0, 0, 0, 1)
    // 刷底色 颜色缓冲区
    gl.clear(gl.COLOR_BUFFER_BIT)

    // 实例化Color对象
    const color = new Color('rgba(255,0,0,1)')
    // 解构r g b
    const {r,g,b} = color
    // 声明颜色 rgb
    gl.clearColor(r,g,b, 1)
    // 刷底色 颜色缓冲区
    gl.clear(gl.COLOR_BUFFER_BIT)

    !(function animation() {
      // HSL色相 饱和度 亮度 颜色偏移
      color.offsetHSL(0.005, 0, 0)
      const {r,g,b} = color
      gl.clearColor(r,g,b, 1)
      // 刷底色 颜色缓冲区
      gl.clear(gl.COLOR_BUFFER_BIT)
      requestAnimationFrame(animation)
    })()
  </script>

</body>
</html>

田园金水

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webgl多彩画布

<!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>多彩画布</ti
复制链接

扫一扫