canvas连线

最新推荐文章于 2024-11-19 14:36:46 发布

原创最新推荐文章于 2024-11-19 14:36:46 发布 · 1.3k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#canvas #点连线游戏

javascript 专栏收录该内容

14 篇文章

订阅专栏

这篇博客展示了如何利用HTML5的canvas元素和JavaScript实现一个触屏点击连线的游戏或应用。通过监听touchstart事件，获取触碰起点，并绘制圆点，实现了在触屏设备上点击屏幕时从上一个点到新点击点的连线效果。

</style>

<div class="bj">

       <canvas id="myCanvas" width="200" height="200" >

       </canvas>
   </div>

    <script type="text/javascript">
        var canvas = document.getElementById("myCanvas");
        //var zhezhao = document.getElementById("zhezhao");

        var pmk = $(document).width();
        var pmg = $(document).height();
        $('#myCanvas').attr("width",pmk);
        $('#myCanvas').attr("height",pmg);



            var cxt = canvas.getContext("2d");

            cxt.fillStyle = "#000";
            cxt.fillRect(0,0,pmk,pmg);
            cxt.strokeStyle = "ff0000";
            //cxt.strokeStyle = "rgba(255,0,0,0.5)";//线的颜色
            cxt.lineWidth = 20;//线的宽度
            cxt.lineCap = "round";//线的两头样式为圆
            cxt.lineJoin = "round";//线的拐角样式为圆

//             cxt.beginPath();

//             cxt.moveTo(100,100);
//             cxt.lineTo(200,200);
//             cxt.lineTo(100,200);

//             cxt.stroke();

            cxt.save();


        var startX,startY;

        function touchStart(event){
            event.preventDefault();
            if(!event.touches.length) return;
            var touch = event.touches[0];
            startX = touch.pageX;
            startY = touch.pageY;

            cxt.arc(startX,startY,10,0,Math.PI*2,true);
            cxt.stroke();


            //cxt.moveTo(100,100);
            //alert(startX);



//             cxt.beginPath();
//             cxt.clearRect(startX,startY,50,50);
//             cxt.closePath();
//             cxt.fill();
//             cxt.restore();
        }



        //add touch start listener
       canvas.addEventListener("touchstart",touchStart,false);

    </script>