HTML5 Canvas 制作一個“在線畫板”

碼頭工人 8年前發布 | 4K 次閱讀 JavaScript HTML5 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<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></pre>
 本文由用戶 admin 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！