html5之canvas使用

HTML canvas 标签用于通过脚本（通常是 JavaScript）动态绘制图形

<canvas id="example" width="600" height="500" style="border: solid 1px #ccc"></canvas>
<canvas id="example1" width="600" height="500" style="border: solid 1px #ccc"></canvas>
<script>
    function draw(id) {
      const canvas = document.getElementById(id);
      if (canvas == null) return false;

      //设置画布的宽高，也可以在标签上直接设置
      canvas.width = 600;
      canvas.height = 500;
      //获取canvas的绘图对象/方法
      const context = canvas.getContext("2d");

      //设置图形边框的宽度
      context.lineWidth = 1;
      //定义绘画开始的位置
      context.moveTo(0, 0);
      //画一条直线
      context.lineTo(100, 0);
      context.lineTo(100, 100);
      context.lineTo(0, 100);
      context.lineTo(0, 0);
      //描边
      context.stroke();

      //填充矩形 context.fillRect(x,y,width,height)，默认fillStyle=black
      context.fillRect(0, 120, 100, 100);
      //描边矩形 strokeRect(x,y,width,height)，默认strokeStyle=black
      context.strokeRect(120, 120, 100, 100);

      //设置纯色
      context.fillStyle = "red";
      context.strokeStyle = "blue";
      context.fillRect(0, 240, 100, 100);
      context.strokeRect(120, 240, 100, 100);

      //设置透明度
      context.fillStyle = "rgba(255,0,0,0.2)";
      context.strokeStyle = "rgba(255,0,0,0.2)";
      context.fillRect(0, 360, 100, 100);
      context.strokeRect(120, 360, 100, 100);

      //清除矩形 context.clearRect(x,y,width,height)
      context.clearRect(60, 180, 120, 120);

      //开始新的路径绘制
      context.beginPath();
      //圆弧 context.arc(x, y, radius, starAngle,endAngle, anticlockwise)
      context.arc(180, 50, 50, 0, Math.PI * 2, true);
      //不关闭路径路径会一直保留下去，当然也可以利用这个特点做出意想不到的效果
      context.closePath();
      context.fill();

      //线性渐变颜色样式 context.createLinearGradient(xStart,yStart,xEnd,yEnd)
      let lg = context.createLinearGradient(0, 0, 0, 100);
      //线性渐变颜色 lg.addColorStop(offset,color)
      lg.addColorStop(0, "rgb(255,0,0)"); //红
      lg.addColorStop(0.5, "rgb(0,255,0)"); //绿
      lg.addColorStop(1, "rgb(0,0,255)"); //蓝
      context.fillStyle = lg;
      context.fillRect(240, 0, 100, 100);

      //径向渐变颜色样式 context.createRadialGradient(xStart,yStart,radiusStart,xEnd,yEnd,radiusEnd)
      lg = context.createRadialGradient(410, 50, 5, 430, 70, 50);
      //径向渐变颜色 lg.addColorStop(offset,color)
      lg.addColorStop(0, "rgb(255,0,0)"); //红
      lg.addColorStop(0.5, "rgb(0,255,0)"); //绿
      lg.addColorStop(1, "rgb(0,0,255)"); //蓝
      context.fillStyle = lg;
      context.fillRect(360, 0, 100, 100);

      //保存当前context的状态
      context.save();
      context.fillStyle = "rgba(0,255,0,0.8)";
      //设置图形叠加样式
      context.globalCompositeOperation = "lighter";

      //平移
      context.translate(480, 0);
      //旋转
      context.rotate(Math.PI / 4);
      //缩放
      context.scale(0.5, 0.5);
      context.fillRect(0, 0, 100, 100);
      //恢复到刚刚保存的状态
      context.restore();

      //选取图像的一部分矩形区域进行绘制drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh)
      const image = new Image();
      image.src = "images/1.jpg";
      image.onload = function () {
        //设置图形阴影的横向位移量
        context.shadowOffsetX = 10;
        //设置图形阴影的纵向位移量
        context.shadowOffsetY = 10;
        //设置图形阴影的颜色
        context.shadowColor = "rgba(100,100,100,0.5)";
        //设置图形阴影的模糊范围（值越大越模糊）
        context.shadowBlur = 1.5;
        //剪切图像，并在画布上定位被剪切的部分 context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
        context.drawImage(image, 100, 100, 100, 100, 240, 120, 100, 100);

        //图像裁剪：context.clip()
        context.beginPath();
        context.arc(290, 290, 50, 0, Math.PI * 2, true);
        context.closePath();
        context.clip();
        //在画布上定位图像 context.drawImage(img,x,y);
        context.drawImage(image, 0, 0);
      };
      //图像平铺 context.createPattern(image,type)
      const image1 = new Image();
      image1.src = "images/square.jpg";
      image1.onload = function () {
        const pattern = context.createPattern(image1, "repeat");
        context.fillStyle = pattern;
        context.fillRect(360, 120, 100, 100);
      };

      //设置字体样式
      context.font = "italic 30px sans-serif";
      //设置字体水平对齐方式
      context.textAlign = "center";
      //设置字体垂直对齐方式
      context.textBaseline = "top";
      //计算字体长度(px)
      console.log(context.measureText("Hello"));
      console.log(context.measureText("你好"));
      //填充文字：context.fillText(text,x,y)
      context.fillText("Hello", 400, 240);
      //绘制文字轮廓 context.strokeText(text,x,y)
      context.strokeText("你好", 400, 280);

      //保存文件 canvas.toDataURL(mime);
      var image_f = canvas.toDataURL("image/png");
    }

    function handlePx(id) {
      const canvas = document.getElementById(id);
      if (!canvas) return false;

      const context = canvas.getContext("2d");
      const w = canvas.width / 4;
      const h = canvas.height / 4;

      const image = new Image();
      image.src = "images/1.jpg";
      image.onload = function () {
        //在画布上定位图像，并规定图像的宽度和高度：context.drawImage(img,x,y,width,height)
        context.drawImage(image, 0, 0, w, h);
        //获取像素颜色数组： context.getImageData(sx,sy,sw,sh)
        const imageData = context.getImageData(0, 0, w, h);
        const imageData_length = imageData.data.length / 4;

        //图片反色的原理 d=255-s
        for (let i = 0; i < imageData_length; i++) {
          imageData.data[i * 4] = 255 - imageData.data[i * 4];
          imageData.data[i * 4 + 1] = 255 - imageData.data[i * 4 + 1];
          imageData.data[i * 4 + 2] = 255 - imageData.data[i * 4 + 2];
        }
        context.putImageData(imageData, w + 10, 0);

        //黑白照片 原理是采用人眼对RGB不同颜色的敏感程度不同，然后通过得出的加权平均数来运算出最后的结果 
　　　　　//Gray = (Red * 0.3 + Green * 0.59 + Blue * 0.11)
        for (let i = 0; i < imageData_length; i++) {
          const gray_val = imageData.data[i * 4] * 0.3 + imageData.data[i * 4 + 1] * 0.59 + imageData.data[i * 4 + 2] * 0.11;
          imageData.data[i * 4] = gray_val;
          imageData.data[i * 4 + 1] = gray_val;
          imageData.data[i * 4 + 2] = gray_val;
        }
        context.putImageData(imageData, 2 * w + 20, 0);
      };
    }
    document.addEventListener("DOMContentLoaded", () => {
      draw("example");
      handlePx("example1");
    });
</script>