canvas 实现画图板2

最新推荐文章于 2021-03-31 18:40:02 发布

Mr.王征

最新推荐文章于 2021-03-31 18:40:02 发布

阅读量326

点赞数 4

分类专栏： HTML5 文章标签：画图板 canvas

本文链接：https://blog.csdn.net/wangzhneg123/article/details/88017628

版权

HTML5 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

效果展示：

源码展示：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>canvas 画板-jq22.com</title>
    <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
    <style>
        * {
            margin:0;
            padding:0;
        }
        div {
            width:400px;
            height:650px;
            border:1px solid black;
            box-shadow:4px 4px 4px grey;

        }
        canvas {
            border-bottom:2px solid red;
        }
        #btn {
            margin-left:30px;
        }
        span {
            margin-left:30px;
        }
    </style>
</head>
<body>
<div>
    <canvas id="cont" width="400" height="600"></canvas>
    <input type="button" name="" id="btn" value="清空画板">
    <span>线条宽度</span>
    <select id="sel">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="10">10</option>
    </select>
    <span>颜色</span>
    <input type="color" id="col">
</div>

<script>
    var myCanvas = document.getElementById("cont");
    var txt = myCanvas.getContext("2d");
    var btn = document.getElementById("btn");
    var sel = document.getElementById("sel");
    myCanvas.onmousedown = function(event) {
        var eve = window.event || event;
        x = eve.clientX;
        y = eve.clientY;
        txt.beginPath();
        txt.moveTo(x, y);
        txt.lineWidth = sel.value;

        myCanvas.onmousemove = function(event) {
            var eve = window.event || event;
            mx = eve.clientX;
            my = eve.clientY;
            txt.lineTo(mx, my);
            txt.strokeStyle = $(col).val();
            txt.stroke();
        }
    }
    myCanvas.onmouseup = function(event) {
        var eve = window.event || event;
        myCanvas.onmousemove = null;
    }
    btn.onclick = function() {
        txt.clearRect(0, 0, 400, 600);
    }
</script>

</body>
</html>