欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

canvas实现画板基础功能

程序员文章站 2024-03-19 22:44:28
...

固定样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/demo.css">
</head>
<body>
    <div class="wrapper">
        <canvas class="cavs" width="1000" height="500"></canvas>
        <ul class="btn-list">
            <li><input type="color" id="colorBoard" value="colorBoard"></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="range" id="linrRuler" value="线条" min="1" max="30"></li>
        </ul>
    </div>
    <script src="./js/jquery.js"></script>
    <script src="./js/demo.js"></script>
</body>
</html>

*{
    padding: 0;
    margin: 0;
    list-style: none;
}

body{
  background: url(../img/22.jpg);  
}

.wrapper{
    margin: 15px;
}
/* 画板样式 */
.wrapper canvas{
    border: 1px solid rosybrown;
    border-radius: 25px;
    box-shadow: 10px 10px 5px #888888;
    margin-bottom: 20px;
    background-color: #775444;
}
/* 选项开关样式 */
.wrapper .btn-list{
    width: 1000px;
    text-align: center;
}
.wrapper .btn-list li{
    display: inline-block;
    margin-left: 40px;
}
.wrapper .btn-list li input{
    display: block;
    background: yellow;
    color: #000;
    border: none;
    padding: 10px 20px;
    cursor: pointer;/*光标类型*/
    border-radius: 25px;
    font-size: 20px;
    transition-duration: 0.2s;
}
.wrapper .btn-list li input:hover{
    border: 1px solid rebeccapurple;
    box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.3);
}

js部分


var darwingLineObj = {
    //保存dom结构
    cavs: $('.cavs'),
    context: $('.cavs').get(0).getContext('2d'),
    colorBoard: $('#colorBoard'),
    cleanBoard: $('#cleanBoard'),
    eraser: $('#eraser'),
    rescind: $('#rescind'),
    linrRuler: $('#linrRuler'),
    arrImg: [],
    bool: false,
    init: function () {
        this.context.lineCap = 'round'; //七十结尾样式
        this.context.lineJoin = 'round'; //转弯圆滑
        this.draw();
        this.btnFn();
    },
    draw: function () {
        var cavs = this.cavs,
            self = this;
        var c_x = cavs.offset().left,
            c_y = cavs.offset().top;
        cavs.mousedown(function (e) {
            e = e || window.event;
            self.bool = true;
            var m_x = e.pageX - c_x,
                m_y = e.pageY - c_y;
            self.context.beginPath(); //开始一条路径
            self.context.moveTo(m_x, m_y); //触点

            cavs.mousemove(function (e) {
                if (self.bool) {
                    // 使用计算好的落点进行绘制
                    self.context.lineTo(e.pageX - c_x, e.pageY - c_y);
                    self.context.stroke();
                }

            })
            //  闭合画笔并枷锁
            cavs.mouseup(function () {
                self.context.closePath();
                self.bool = false;

            })
            // 闭合枷锁
            cavs.mouseleave(function () {
                self.context.closePath();
                self.bool = false;

            })
            // 保存每次落笔的canvas图组成数组
            var imgData = self.context.getImageData(0, 0, self.cavs[0].width, self.cavs[0].height);
            self.arrImg.push(imgData);
            // console.log(self.arrImg);


        })

    },
    btnFn: function () {
        var self = this;
        $('.btn-list').on('click', function (e) {
            e = e || window.event;
            switch (e.target.id) {
                case 'cleanBoard': //清屏
                    self.context.clearRect(0, 0, self.cavs[0].width, self.cavs[0].height)
                    break
                case 'eraser':
                    // 橡皮檫使用时改变画笔颜色为使其和画板相同
                    self.context.strokeStyle = "#775444"
                    break
                case 'rescind':
                    // 撤销
                    if (self.arrImg.length > 0) {
                        // 更改canvas数组图像后再绘制
                        self.context.putImageData(self.arrImg.pop(), 0, 0);
                        // console.log(self.arrImg);

                    }

                    break
            }
        })
        this.colorBoard.change(function (e) { //当颜色变化时取值变为画笔颜色
            self.context.strokeStyle = $(this).val();
        })
        this.linrRuler.change(function (e) {
            self.context.lineWidth = $(this).val();
        })
    }
};
darwingLineObj.init();
相关标签： 实例

上一篇： #小案例#Java实现简单 学生选课系统

下一篇： 一致性Hash Java实现版

推荐阅读