canvas简单画图板

最新推荐文章于 2023-04-04 18:35:31 发布

原谅8943

最新推荐文章于 2023-04-04 18:35:31 发布

阅读量456

点赞数 3

分类专栏： css 文章标签： canvas 画图板代码

本文链接：https://blog.csdn.net/HY200043/article/details/88783917

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

canvas简单画图板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas{
            border: 1px solid #000;
        }
    </style>
</head>
<body>
<script src="jQuery-HY-1.0.1.js"></script>
<input id="inp1" type="color">
<input id="inp2" type="range" value="1" min="1" max="40">
<button>橡皮</button>
<canvas width="400" height="400"></canvas>
<script>
    var inp1=document.getElementById("inp1");
    var inp2=document.getElementById("inp2");
    var can=document.getElementsByTagName("canvas")[0];
    var btn=document.getElementsByTagName("button")[0];
    var ctx=can.getContext("2d");
    inp1.onchange=function(){
        ctx.strokeStyle=this.value;
    }
    inp2.onchange=function(){
        ctx.lineWidth=this.value;
    }
    btn.onclick=function(){
        ctx.clearRect(0,0,1000,400);
    }
    can.onmousedown=function(event){
        event=event||window.event;
        var movex=getPageXY(event).x-can.offsetLeft;
        var movey=getPageXY(event).y-can.offsetTop;
        ctx.lineCap="round";
        ctx.beginPath();
        ctx.moveTo(movex,movey);
        document.onmousemove=function(event){
            event=event||window.event;
            var endx=getPageXY(event).x-can.offsetLeft;
            var endy=getPageXY(event).y-can.offsetTop;
            ctx.lineTo(endx,endy);
            ctx.stroke();
        }
    }
    document.onmouseup=function(){
        document.onmousemove=null;
    }
</script>
</body>
</html>