canvas ----4像素

像素的复制

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      body {
        background: #000000;
      }
      canvas {
        background: #ffffff;
        transition: translate 0.5s;
      }
    </style>
  </head>
  <body>
    <canvas  id="canvas" width="400" height="400"></canvas>
  </body>
  <script>
    var oC = document.getElementById("canvas")
    var oGC =oC.getContext("2d") 
      oGC.fillRect(0, 0, 100, 100);
       var data=oGC.getImageData(0,0,100,100)
        console.log(data.data)
        for(var i =0;i<data.width*data.height;i++){
         data.data[4*i] =255
         data.data[4*i+1]=0
         data.data[4*i+2]=0
         data.data[4*i+3]=100
        } 
      

     oGC.putImageData(data,200,200);
  </script>
</html>

创建像素

createImageData(w,h)

 var oC = document.getElementById("canvas")
    var oGC =oC.getContext("2d") 
    var oImag =oGC.createImageData(100,100)
    for(var i =0;i<oImag.width*oImag.height;i++){
        oImag.data[4*i] = 255;
        oImag.data[4*i+1]=0
        oImag.data[4*i+2] =0
        oImag.data[4*i+3] =100
    }
    oGC.putImageData(oImag,100,100)

像素显字

-----隐形文字重点在数组

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      body {
        background: #000000;
        color: #ffffff;
      }
      canvas {
        background: #ffffff;
        transition: translate 0.5s;
      }
    </style>
  </head>
  <body>
    

    <div style="float:left">
      <p>秒</p>
      <p>味</p>
      <p>课</p>
      <p>汤</p>
    </div>
    <canvas id="canvas" width="400" height="400"></canvas>
  </body>
  <script>
    var oc = document.getElementById("canvas");
    var cvsCtx = oc.getContext("2d");
    var aLi = document.getElementsByTagName("p");
    for (var i = 0; i < aLi.length; i++) {
      aLi[i].onclick = function() {
        cvsCtx.clearRect(0, 0, oc.width, oc.height);
        var str = this.innerText;
        var h = 180;
        cvsCtx.font = h + "px impact";
        cvsCtx.fillStyle = "red";
        var w = cvsCtx.measureText(str).width;
        cvsCtx.textBaseline="top"
        console.log((oc.height))
        cvsCtx.fillText(str, (oc.width - w) / 2, (oc.height-h)  / 2);
        var oImg = cvsCtx.getImageData(
            (oc.width - w) / 2,
            (oc.height-h)  / 2,
          w,
          h
        );
        cvsCtx.clearRect(0, 0, oc.width, oc.height);
        var arr = randomArr(w * h, (w * h) / 10);

        var newImage = cvsCtx.createImageData(w, h);
        for (var i = 0; i < arr.length; i++) {
          newImage.data[4 * arr[i]] = oImg.data[4 * arr[i]];
          newImage.data[4 * arr[i] + 1] = oImg.data[4 * arr[i] + 1];
          newImage.data[4 * arr[i] + 2] = oImg.data[4 * arr[i] + 2];
          newImage.data[4 * arr[i] + 3] = oImg.data[4 * arr[i] + 3];
        }
        console.log(newImage.data);
        cvsCtx.putImageData(newImage, (oc.width - w) / 2, (oc.height - h) / 2);
      };
    }
    function randomArr(iAll, iNow) {
      var arr = [];
      var newArr = [];
      for (var i = 0; i < iAll; i++) {
        arr.push(i);
      }
      for (var i = 0; i < iNow; i++) {
        let spliceData = arr.splice(
          Math.floor(Math.random() * arr.length),
          1
        );
        newArr.push(spliceData);
      }
      return newArr;
    }
  </script>
</html>

给像素加上定时器

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      body {
        background: #000000;
        color: #ffffff;
      }
      canvas {
        background: #ffffff;
        transition: translate 0.5s;
      }
    </style>
  </head>
  <body>
    <div style="float:left">
      <p>秒</p>
      <p>味</p>
      <p>课</p>
      <p>汤</p>
    </div>
    <canvas id="canvas" width="400" height="400"></canvas>
  </body>
  <script>
    var oc = document.getElementById("canvas");
    var cvsCtx = oc.getContext("2d");
    var aLi = document.getElementsByTagName("p");
    for (let i = 0; i < aLi.length; i++) {
      aLi[i].onclick = function() {
        cvsCtx.clearRect(0, 0, oc.width, oc.height);
        var str = this.innerText;
        var h = 180;
        cvsCtx.font = h + "px impact";
        cvsCtx.fillStyle = "red";
        var w = cvsCtx.measureText(str).width;
        cvsCtx.textBaseline = "top";
        cvsCtx.fillText(str, (oc.width - w) / 2, (oc.height - h) / 2);
        var oImg = cvsCtx.getImageData(
          (oc.width - w) / 2,
          (oc.height - h) / 2,
          w,
          h
        );
        cvsCtx.clearRect(0, 0, oc.width, oc.height);
        var newImage = cvsCtx.createImageData(w, h);
        var num = 0;
       let timerId = setInterval(() => {
          cvsCtx.clearRect(0, 0, oc.width, oc.height);
          if (num == 10) {
            newImage.data=oImg.data
            clearInterval(timerId)
             timerId=null
          } else {

            num++;
            var arr = randomArr(w * h, ((w * h) / 10) * num);
            for (var i = 0; i < arr.length; i++) {
              newImage.data[4 * arr[i]] = oImg.data[4 * arr[i]];
              newImage.data[4 * arr[i] + 1] = oImg.data[4 * arr[i] + 1];
              newImage.data[4 * arr[i] + 2] = oImg.data[4 * arr[i] + 2];
              newImage.data[4 * arr[i] + 3] = oImg.data[4 * arr[i] + 3];
            }
          }
          cvsCtx.putImageData(newImage, (oc.width - w) / 2, (oc.height - h) / 2);
        }, 50);

       
      };
    }
    function randomArr(iAll, iNow) {
      var arr = [];
      var newArr = [];
      for (var i = 0; i < iAll; i++) {
        arr.push(i);
      }
      for (var i = 0; i < iNow; i++) {
        let spliceData = arr.splice(Math.floor(Math.random() * arr.length), 1);
        newArr.push(spliceData);
      }
      return newArr;
    }
  </script>
</html>

定时器显示

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      body {
        background: #000000;
        color: #ffffff;
      }
      canvas {
        background: #ffffff;
        transition: translate 0.5s;
      }
    </style>
  </head>
  <body>
    <div style="float:left">
      <p>秒</p>
      <p>味</p>
      <p>课</p>
      <p>汤</p>
    </div>
    <canvas id="canvas" width="400" height="400"></canvas>
  </body>
  <script>
    var oc = document.getElementById("canvas");
    var cvsCtx = oc.getContext("2d");
    var aLi = document.getElementsByTagName("p");
    for (var i = 0; i < aLi.length; i++) {
      aLi[i].onclick = function() {
        cvsCtx.clearRect(0, 0, oc.width, oc.height);
        var str = this.innerText;
        var h = 180;
        var timer = null;
        var iNow = 0;
        clearInterval(timer);
        cvsCtx.font = h + "px impact";
        cvsCtx.fillStyle = "red";
        var w = cvsCtx.measureText(str).width;
        cvsCtx.textBaseline = "top";
        cvsCtx.fillText(str, (oc.width - w) / 2, (oc.height - h) / 2);
        var oImg = cvsCtx.getImageData(
          (oc.width - w) / 2,
          (oc.height - h) / 2,
          w,
          h
        );
        cvsCtx.clearRect(0, 0, oc.width, oc.height);

        var arr = randomArr(w * h, (w * h) / 10);

        var newImage = cvsCtx.createImageData(w, h);
        timer = setInterval(() => {
            cvsCtx.clearRect(0, 0, oc.width, oc.height);
          for (var i = 0; i < arr[iNow].length; i++) {
            newImage.data[4 * arr[iNow][i]] = oImg.data[4 * arr[iNow][i]];
            newImage.data[4 * arr[iNow][i] + 1] = oImg.data[4 * arr[iNow][i] + 1];
            newImage.data[4 * arr[iNow][i] + 2] = oImg.data[4 * arr[iNow][i] + 2];
            newImage.data[4 * arr[iNow][i] + 3] = oImg.data[4 * arr[iNow][i] + 3];
          }
          cvsCtx.putImageData(
            newImage,
            (oc.width - w) / 2,
            (oc.height - h) / 2
          );
          if(iNow==9){
              clearInterval(timer)
          }else{
              iNow++
          }
        }, 100);
      };
    }
    function randomArr(iAll, iNow) {
      var arr = [];
      var allArr = [];
      for (var i = 0; i < iAll; i++) {
        arr.push(i);
      }
      for (var j = 0; j < iAll / iNow; j++) {
        var newArr = [];
        for (var i = 0; i < iNow; i++) {
          let spliceData = arr.splice(
            Math.floor(Math.random() * arr.length),
            1
          );
          newArr.push(spliceData);
        }
        allArr.push(newArr);
      }

      return allArr;
    }
  </script>
</html>

猜你喜欢