• canvas实现刮图效果


     <canvas id="myCanvas" width=300 height=300></canvas>

    JavaScript代码:

      var canvas = document.getElementById('myCanvas'),
          ctx = canvas.getContext('2d'),
          w = canvas.width,
          h = canvas.height,
          area = w * h,
          flag=false,
          l = canvas.offsetLeft;
          t = canvas.offsetTop,
          ctx.fillStyle = "#ccc";
          //覆盖第一层(添加灰色涂层)
           ctx.fillRect(0, 0, w, h);
    //添加背景 即为要刮开的图像 canvas.style.backgroundImage = 'url(banner.jpg)';
    //必须添加设置 ctx.globalCompositeOperation
    = 'destination-out'; //destination-in:新加内容保留 其他变透明;destination-out:新加内容透明,其他保留; bindEvent(); var bindEvent = function () {
    //移动端 // canvas.addEventListener(
    'touchmove', moveFunc, false); // canvas.addEventListener('touchend', endFunc, false); //pc端 canvas.onmousedown = function (e) { flag = true; lastX = e.clientX - canvas.getBoundingClientRect().left; //canvas里面的坐标 lastY = e.clientY - canvas.getBoundingClientRect().top; //获取坐标 ctx.beginPath(); ctx.arc(lastX, lastY, 15, 0, Math.PI * 2, 0); ctx.fill(); } canvas.onmouseup = function (e) { flag = false; } canvas.onmousemove = function (e) { var x = e.clientX - canvas.getBoundingClientRect().left, //当前移动后的convas内部坐标 y = e.clientY - canvas.getBoundingClientRect().top; if (flag) { ctx.arc(x, y, 15, 0, Math.PI * 2, 0); ctx.fill(); } } };

    效果图:

  • 相关阅读:
    动态库 DLL 封装二:dll封装方法
    动态库 DLL 封装一:dll分类
    C++读取配置文件ini
    WCHAR 字符串拼接
    关于web桌面应用的集成解决方案
    CSS Grid网格布局(转)
    使用 antd 的 form 组件来自定义提交的数据格式
    syslogd日志的一些作用
    我的三年感悟——避免无尽的自我内耗
    《被讨厌的勇气》读后感
  • 原文地址:https://www.cnblogs.com/x0216u/p/7459358.html
Copyright © 2020-2023  润新知