HTML5 Canvas 制作一个“在线画板”详解编程语言

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

原创文章,作者:Maggie-Hunter,如若转载,请注明出处:https://blog.ytso.com/tech/pnotes/8735.html

(0)
上一篇 2021年7月18日 22:19
下一篇 2021年7月18日 22:19

相关推荐

发表回复

登录后才能评论