网页刮刮卡效果

最新推荐文章于 2024-10-16 11:23:07 发布

雪天前端

最新推荐文章于 2024-10-16 11:23:07 发布

阅读量287

点赞数 1

分类专栏：实用工具文章标签：前端 javascript

本文链接：https://blog.csdn.net/qq_43422957/article/details/140229796

版权

实用工具专栏收录该内容

7 篇文章 0 订阅

订阅专栏

【HTML+Javascript源码-cv即可】

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>刮刮卡效果</title>
  </head>
  <style>
    body {
      margin: 0;
    }

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

  <body>
    <img src="img/01.png" />
    <canvas id="canvas" width="700" height="300"> </canvas>
  </body>

</html>

<script>
  function draw() {
    var canvas = document.getElementById('canvas');
    if (!canvas.getContext) return;
    var ctx = canvas.getContext('2d');
    //设置一个颜色 覆盖在这个图片上
    ctx.beginPath();
    ctx.fillStyle = "gray";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    //属性方法
    ctx.globalCompositeOperation = 'destination-out';
    //设置画笔为圆形
    ctx.lineCap = 'round';
    //设置画笔宽度
    ctx.lineWidth = 40;
    //当鼠标按下的时候
    canvas.onmousedown = function(e) {
      console.log("按下");
      //获取鼠标位置
      var x = e.clientX;
      var y = e.clientY;
      //设置鼠标位置为起始点
      ctx.moveTo(x, y);
      moves();
    }

    //当鼠标移动时候
    function moves() {
      canvas.onmousemove = function(e) {
        console.log("移动");
        var x = e.clientX;
        var y = e.clientY;
        //开始画
        ctx.lineTo(x, y);
        //描绘出路径
        ctx.stroke();
      }
    }

    //当鼠标抬起时 去除移动事件
    canvas.onmouseup = function(e) {
      console.log("抬起");
      canvas.onmousemove = "";
    }
  }
  draw();
</script>

所用图片

Canvas是HTML5中的一个元素，通过在网页上创建一个画布，开发者可以使用JavaScript在其中绘制各种图形、文本和图像。Canvas提供了丰富的API，使开发者可以实现各种复杂的视觉效果和交互功能。相比于传统的基于图片的网页设计，Canvas可以实现更加动态和个性化的内容展示，为用户带来更加丰富的浏览体验。开发者可以利用Canvas创建交互式的游戏、动画、数据可视化和图表等内容，从而吸引用户的注意力并提升用户体验。Canvas的绘制是基于像素级别的操作，因此在处理大量细粒度图形元素时表现更为出色。另外，Canvas的性能也相对较高，适合需要频繁更新和绘制的应用场景。总的来说，Canvas为开发者提供了一个强大而灵活的工具，帮助他们创造出各种引人入胜的视觉效果和互动体验，丰富了网页内容的表现形式，使网页更具吸引力和趣味性。