canvas连线

来源：互联网发布：翼年代记。淘宝编辑：程序博客网时间：2024/04/27 15:29

</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>

0 0