zoukankan      html  css  js  c++  java
  • HTML5制作简单画板

    <!DOCTYPE HTML>
    <html lang="en-US">
    <head>
        <title></title>
        <meta charset="UTF-8">
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    </head>
    <style>
    canvas{ border:2px solid #000;}
    </style>
    <body>
        <canvas id="draw" width="500" height="500"></canvas>
        <script type="text/javascript">
        $(document).ready(function(){
        var canvas=document.getElementById("draw");
        var draw=canvas.getContext("2d");
        draw.lineWidth=5;        //线条粗细
        draw.strokeStyle="red";    //颜色
        var godraw=false;        
        
            //按下鼠标
        $("#draw").mousedown(function(e){
            //准确坐标
        var mouseX=e.pageX-this.offsetLeft;
        var mouseY=e.pageY-this.offsetTop;
        draw.moveTo(mouseX,mouseY);
        godraw=true;
    
        })
            //放开鼠标
            $("#draw").mouseup(function(e){
        godraw=false;
        })
            //移动鼠标
            $("#draw").mousemove(function(e){
            if(godraw){
        var mouseX=e.pageX-this.offsetLeft;
        var mouseY=e.pageY-this.offsetTop;
        draw.lineTo(mouseX+4,mouseY+4);
        draw.stroke();
            }
    
        })
        
        })
        </script>
    </body>
    </html>

    PHP100的笔记

    效果:

     相关:

    HTML画线

  • 相关阅读:
    Path Sum
    Binary Tree Level Order Traversal II
    Jump Game
    leedcode 刷题-V2
    (2016 年) githup 博客地址 : https://github.com/JMWY/MyBlog
    算法分类总结
    剑指 Offer 题目汇总索引
    LeedCde 题解目录
    趣味算法总目录
    常用
  • 原文地址:https://www.cnblogs.com/tinyphp/p/3246150.html
Copyright © 2011-2022 走看看