HTML5之canvas绘图

news2025/10/31 21:49:33

介绍

<canvas> 是 HTML5 引入的一个强大元素，允许直接在网页上进行矢量图形和位图图像的绘制，为网页提供了一个动态图形渲染的平台。这一特性极大丰富了网页的表现力，特别是在数据可视化、游戏开发、交互式图表和动画制作等领域发挥着关键作用。

查看浏览器支持率

在这里插入图片描述

应用场景（实现业务上）

动画
游戏
视频（因为生产环境还不成熟，略）
截图
合成图
分享网页截图
滤镜
抠图
旋转、缩放、位移、形变
粒子
将canvas转换为图片 – toDataURL方法

基本使用

画直线

<!-- 默认 300*150， 类似ps中的一个透明的图层 -->
<canvas id="myCanvas" width="200" height="100"></canvas>

var myCanvas=document.getElementById("myCanvas");
var ctx=myCanvas.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);

//对路径进行描边。
ctx.stroke();

效果：

在这里插入图片描述

一个画布在网页中是一个矩形框，默认绘制出来的画布大小为300×150像素的HTML元素。

注意: 默认情况下 (canvas) 元素没有边框和内容。

画圆形

var myCanvas=document.getElementById("myCanvas");
var ctx=myCanvas.getContext("2d");
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();

效果：
在这里插入图片描述

画三角形

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext('2d');
// 开始一个新的路径
ctx.beginPath();
ctx.moveTo(20, 30);
ctx.lineTo(180, 80);
ctx.lineTo(100, 120);

// 线宽度，默认1px
ctx.lineWidth = 8
// 闭合路径
ctx.closePath();
// 描边（相当于边框）
ctx.stroke();

效果：

在这里插入图片描述

刮刮卡效果

代码如下：

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  .box {
    width: 200px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    margin: 50px auto;
    position: relative;
  }

  .box .text {
    font-size: 50px;
    color: red;
  }

  #canvas {
    position: absolute;
    top: 0;
    left: 0;
    cursor: pointer;
  }
</style>

</head>

<body>
  <div class="box">
    <span class="text"></span>
    <canvas id="canvas"></canvas>
  </div>
</body>
<script>
  let arr = ['200元', '300元', '400元', '500元', '600元', '谢谢', '谢谢', '谢谢', '谢谢', '谢谢', '谢谢', '谢谢', '谢谢', '谢谢', '谢谢', '谢谢'];
  let canvas;
  // 定义自执行函数
  (function init() {
    // 获取 canvas 元素
    canvas = document.getElementById('canvas');
    // 设置 canvas 的宽度和高度
    canvas.width = 200;
    canvas.height = 100;
    // 获取 canvas 的 2D 渲染上下文
    let ctx = canvas.getContext("2d")
    // 设置随机值
    setResult();
    // 设置canvas遮盖
    drawMask(ctx)
    // 移动划开遮盖
    drawStroke(ctx);
  })();

  // 设置随机的奖品内容
  function setResult() {
    let max = arr.length - 1;
    // 生成一个随机索引
    let randomInx = randomNum(0, max);

    // 获取文本元素
    let text = document.getElementsByClassName('text')[0];
    // 设置文本元素的内容
    text.innerText = arr[randomInx];
  }

  // 生成随机数的函数
  function randomNum(min, max) {
    return parseInt(Math.random() * (max - min + 1) + min);
  }

  // 绘制遮盖层
  function drawMask(ctx) {
    // 设置幕布颜色
    ctx.fillStyle = "rgb(166,166,166)";
    // 绘制矩形遮盖层
    ctx.fillRect(0, 0, 200, 100);
  }

  // 绘制划开遮盖的线条
  function drawStroke(ctx) {
    // 当鼠标按下时触发
    canvas.onmousedown = function (e) {
      // 获取鼠标按下的位置
      let downX = e.offsetX;
      let downY = e.offsetY;

      // 开始新的路径
      ctx.beginPath();
      // 设置合成模式为 'destination-out'，用于擦除效果
      ctx.globalCompositeOperation = 'destination-out';
      // 设置线条宽度
      ctx.lineWidth = 8;

      // 移动到初始位置
      ctx.moveTo(downX, downY);

      // 当鼠标移动时触发
      canvas.onmousemove = function (e) {
        // 绘制线条到当前位置
        ctx.lineTo(e.offsetX, e.offsetY);

        // 绘制线条
        ctx.stroke();
      }

      // 当鼠标抬起时触发
      canvas.onmouseup = function () {
        // 移除鼠标移动事件监听器
        canvas.onmousemove = null;
      }
    }
  }
</script>

</html>