HTML5 Canvas 制作一个“在线画板”

2018-07-20 来源：open-open

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="Jquery1.7.js"></script>
    <style type="text/css">
      #php100{ border:1px solid #ccc;}
    </style>
    <script type="text/javascript">
        var canvas = document.getElementById('php100');
        var p100=canvas.getContext("2d");
        p100.lineWidth=10
        p100.strokeStyle="red";
        var pp=false;


        $(function () {
            $("#php100").mousedown(function (e) {
                var mouseX = e.pageX - this.offsetLeft;
                var mouseY = e.pageY - this.offsetTop;
                pp = true;
                p100.moveTo(mouseX, mouseY); //起始位置


            })
            //当鼠标抬起时
            $("#php100").mouseup(function(e){
                pp=false;
            });
 
            //当鼠标移动时
            $("#php100").mousemove(function(e){
  
                var mouseX = e.pageX - this.offsetLeft;
                var mouseY = e.pageY - this.offsetTop;
                if(pp){
                    p100.lineTo(mouseX,mouseY); //终止位置
                    p100.stroke(); //结束图形
                }
            })
        })


    </script>


</head>
<body>
    <canvas id="php100" width="500" height="400"></canvas>


</body>
</html>

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点！
本站所提供的图片等素材，版权归原作者所有，如需使用，请与原作者联系。

上一篇:各种语言对图片的处理算法实现图片模糊实现代码

下一篇:公历农历互相转换的Java日历工具类

最新资讯

热门推荐