zoukankan      html  css  js  c++  java
  • 刮刮乐

    <meta name="viewport" content="width=device-width">
    <style>
    *{
    padding: 0;
    margin:0;
    }
    #box{
    100%;
    height:200px;
    }


    #price{
    100%;
    height:200px;
    background: orange;


    }


    #c1{
    position: absolute;
    top:0;
    left:0;
    }
    </style>

    <div id="box">

    <div id="price"></div>
    <canvas id="c1">此浏览器不支持canvas</canvas>
    </div>
    <script type="text/javascript">
    var c1=document.getElementById("c1");
    var ctx=c1.getContext("2d");
    //返回窗口的文档显示区的宽度。
    var w=window.innerWidth;
    // console.log(w);
    c1.width=w;
    c1.height=200;
    //遮罩层
    ctx.fillStyle="#ccc";
    ctx.fillRect(0,0,w,200);


    //touchstart事件:当手指触摸屏幕时触发,即使已经有一个手指放在屏幕上也会触发
    //touchmove事件:当手指在屏幕上滑动的时候连续的触发


    c1.addEventListener("touchstart",sfn);
    c1.addEventListener("touchmove",mfn);


    function sfn(e){//事件对象 
    // console.log(e.touches);
    var startX=e.touches[0].clientX;//获取到触点到坐标
    var startY=e.touches[0].clientY;


    ctx.beginPath();
    ctx.lineWidth=25;
    ctx.lineCap="round";//设置线段顶点到样式
    ctx.lineJoin="round";//线段交接的位置的样式
    ctx.globalCompositeOperation="destination-out";
    ctx.moveTo(startX,startY);
    }


    function mfn(e){//事件对象
    var moveX=e.touches[0].clientX;
    var moveY=e.touches[0].clientY;
    ctx.lineTo(moveX,moveY);
    ctx.stroke();
    }


    </script>
    ---------------------
    作者:qq93210
    来源:CSDN
    原文:https://blog.csdn.net/qq93210/article/details/78055559
    版权声明:本文为博主原创文章,转载请附上博文链接!

  • 相关阅读:
    爬虫(五):生产者消费者方法
    三. Anagram detection problem for string(字符串中回文词汇检测问题)
    二. Object-Oriented Programming in Python: Defining Classes
    一.Introduction
    爬虫(四):正则表达式(提取str中网址)
    centos7源代码编译安装heartbeat
    linux yum配置
    java常见证书类型和密钥库类型
    常用的加密算法
    iptables学习理解
  • 原文地址:https://www.cnblogs.com/xm16/p/10132793.html
Copyright © 2011-2022 走看看