JS实现canvas简单小画板功能

JS实现canvas简单小画板功能_第1张图片
Html部分:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./index.css">
    <title>Documenttitle>
head>
<body>
    <div class="container">
        <canvas id="cavs" width="700" height="330">canvas>
        <ul>
            <li> <input type="color" id="color"> li>
            <li> <input type="button" id="cleanBoard" value="清屏">li>
            <li> <input type="button" id="eraser" value="橡皮">li>
            <li> <input type="button" id="rescind" value=撤销>li>
            <li> <input type="button" id="save" value=保存>li>
            <li><input type="range" id="lineRuler" min="1" max="20"> li>
        ul>
    div>
    <script src="./index.js">script>
body>
html>

CSS部分:

*{
     
    margin: 0;
    padding: 0;
    list-style: none;
}
.container{
     
    margin: 30px;
}
#cavs{
     
    border: 1px solid red;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
    border-radius: 10px;
}
.container ul{
     
    margin-top: 20px;
    width: 700px;
    text-align: center;
}
.container ul li{
     
    display: inline-block;
    margin-left: 35px;
}
.container ul li input{
     
    padding: 6px 15px;
    border-radius: 10px;
    border: none;
    outline: none;
    cursor: pointer;
    transition: box-shadow 0.3s cubic-bezier(0.6, -0.28, 0.735, 0.045);
}
.container ul li input:hover{
     
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

JS部分:

var drawingBoard = {
     
    cavs: document.getElementById('cavs'),
    ctx: document.getElementById('cavs').getContext('2d'),
    ul_node: document.getElementsByTagName('ul')[0],
    colorBoard: document.getElementById('color'),
    lineRuler: document.getElementById('lineRuler'),
    imgArr: [],//存放图片
    init: function () {
     
        this.ctx.lineCap = 'round';
        this.ctx.lineJoin = 'round';
        this.drawing();//开始画画
        this.btnsFnAll();
    },
    drawing: function () {
     
        var self = this;
        var left = this.cavs.offsetLeft;
        this.cavs.onmousedown = function (e) {
     
            var e_x = e.pageX;//鼠标在画布上的x点
            var e_y = e.pageY;
            self.ctx.beginPath();//开始绘制
            self.ctx.moveTo(e_x - left, e_y - left);//落笔点,开始点
            var imgData = self.ctx.getImageData(0, 0, self.cavs.offsetWidth, self.cavs.offsetHeight);
            self.imgArr.push(imgData)
            document.onmousemove = function (e) {
     
                self.ctx.lineTo(e.pageX - left, e.pageY - left);//落笔点,开始点
                self.ctx.stroke();
            }
            document.onmouseup = function () {
     
                document.onmousemove = null;
                self.ctx.closePath();//闭合当前的路径 结束绘制
            }
            this.onpointerleave = function () {
     
                document.onmousemove = null;
            }
        }
    },
    btnsFnAll: function () {
     
        var self = this;
        this.ul_node.addEventListener('click', function (e) {
     
            console.log(e.target.id);
            switch (e.target.id) {
     
                case 'cleanBoard'://清屏
                    self.ctx.clearRect(0, 0, self.cavs.offsetWidth, self.cavs.offsetHeight)
                    break;
                case 'eraser'://橡皮
                    self.ctx.strokeStyle = "#ffffff";
                    break;
                case 'save'://保存
                    let url = self.cavs.toDataURL('image/jpg');
                    let a = document.createElement('a');
                    document.body.appendChild(a);
                    a.href = url;
                    a.download = '草稿纸';
                    a.target = '_blank';
                    a.click()
                    break;
                case 'rescind'://撤销
                    console.log(self.imgArr)
                    if (self.imgArr.length > 0) {
     
                        self.ctx.putImageData(self.imgArr.pop(), 0, 0)
                    }
                    break;
            }
        });
        this.colorBoard.onchange = function () {
     
            self.ctx.strokeStyle = this.value;
        };
        this.lineRuler.onchange = function () {
     
            self.ctx.lineWidth = this.value
        }
    }
}
drawingBoard.init();

你可能感兴趣的:(html,js)