欢迎访问 如意编程网！
TAG聚合

如意编程网

当前位置： 首页 > 前端技术 > HTML >内容正文

HTML

HTML5制作简单画板

发布时间：2022/11/16 HTML 9 老码农
如意编程网 收集整理的这篇文章主要介绍了 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的笔记

效果：

HTML5制作简单画板

 相关：

HTML画线

总结

以上是如意编程网为你收集整理的HTML5制作简单画板的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得如意编程网网站内容还不错，欢迎将如意编程网推荐给好友。