html5教程制作简单画板代码分享_html5教程技巧_HTML/Xhtml_青云站长教程网
欢迎来到站长教程网!
  • 秒到短信接口 免费试用
  • 微信支付宝接口 秒结算
  • 中文网站排名|申请加入
  • 搜索引擎全站查询
  • 查询移动网站权重数据
  • 海外主机 台湾公司直销
  • HTML/Xhtml

    当前位置:主页 > 网页制作 > HTML/Xhtml >

    html5教程制作简单画板代码分享_html5教程技巧

    时间:2019-07-20|栏目:HTML/Xhtml|点击:
  • 点评:html5制作简单画板代码分享,大家参考使用吧

    HTML5制作简单画板


    复制代码代码如下:
    <!DOCTYPE HTML>
    <html lang="en-US">
    <head>
    <title></title>
    <meta charset="UTF-8">
    <script src="<a href="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script">http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script</a>>
    </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;</p><p> })
    //放开鼠标
    $("#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();
    }</p><p> })

    })
    </script>
    </body>
    </html>


    效果图

    html5教程制作简单画板代码分享_html5教程技巧


    上一篇:html5教程画矩形代码分享_html5教程技巧

    栏    目:HTML/Xhtml

    下一篇:html5 Web SQL Database 之事务处理函数transaction与executeSQL解析_html5

    本文标题:html5教程制作简单画板代码分享_html5教程技巧

    本文地址:http://www.jh-floor.com/wangyezhizuo/HTML_Xhtml/7516.html

    您可能感兴趣的文章

    广告投放 | 联系我们 | 版权申明

    重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

    如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

    联系QQ:888888 | 邮箱:888888#qq.com(#换成@)

    Copyright © 2002-2017 青云站长教程网 版权所有 琼ICP备xxxxxxxx号