canvas实现一个简单画板_canvas 库适合开发画板-优快云博客

本文链接：https://blog.youkuaiyun.com/wsq88888888/article/details/129769217
该文档展示了一个使用Vue.js框架和HTML5Canvas元素构建的图形绘制应用。用户可以调整字体大小、选择是否填充图形、回退操作、清空画布以及生成坐标系。应用支持鼠标事件监听，允许用户画圆或直线，并提供了颜色选择功能。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
            width: 100vw;
            height: 100vh;
            box-sizing: border-box;
            font-size: 0;
            color: #000;
        }
 
        div {
            box-sizing: border-box;
            height: 20px;
            color: #000;
            font-size: 16px;
        }
 
        #app {
            height: 100%;
            width: 100%;
        }
 
        span {
            display: block;
            height: 20px;
            line-height: 20px;
            width: 60px;
        }
 
        .topbox {
            height: 120px;
            width: 100%;
            border: 2px solid rgb(177, 176, 176);
            border-left: 0;
            border-right: 0;
            display: flex;
            align-items: center;
            padding: 0 4%;
        }
 
        .bigbox {
            width: 100%;
            height: calc(100% - 120px);
            position: relative;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
        }
 
        #can {
            width: 800px;
            height: 800px;
            border: 1px solid #acabab;
        }
 
        .posi {
            position: absolute;
            z-index: 10000;
            color: #000;
            font-size: 16px;
            width: 140px;
            height: 40px;
            box-shadow: 5px 5px 5px rgb(187, 184, 184);
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 4px;
            background-color: #fff;
            opacity: 0;
        }
 
        .flexbox {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            margin-right: 20px;
        }
 
        .flexStart {
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid rgb(167, 166, 166);
            height: 24px;
            width: 24px;
            border-radius: 4px;
            cursor: pointer;
        }
    </style>
</head>
 
<body>
    <div id="app">
        <div class="topbox">
            <div class="flexbox">
                <div>字体大小：</div>
                <select v-model="size">
                    <option v-for="(l,i) in options" :value="l.value" :key="i">{{l.value}} </option>
                </select>
            </div>
            <div class="flexbox">
                <div>是否填充完全：</div>
                <div>
                    是<input type="radio" name="fill" @click="getFill()" value="true">
                    否<input type="radio" name="fill" @click="getFill()" checked value="false">
                </div>
            </div>
            <div class="flexbox">
                <button @click="back">回退上一步</button>
            </div>
            <div class="flexbox">
                <button @click="clearDarw">清空画布</button>
            </div>
            <div class="flexbox">
                <button @click="zbx">生成坐标系</button>
            </div>
            <!-- H5新增颜色选择器 -->
            <div class="flexbox">
                <div>颜色：</div>
                <input type="color" v-model="color" />
            </div>
            <!-- <div class="flexbox">
                <div class="flexStart" @click="isRounds">
                    <svg t="1667804730617" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="2525" width="16" height="16">
                        <path
                            d="M512 960c-247.039484 0-448-200.960516-448-448S264.960516 64 512 64 960 264.960516 960 512 759.039484 960 512 960zM512 128c-211.744443 0-384 172.255557-384 384s172.255557 384 384 384 384-172.255557 384-384S723.744443 128 512 128z"
                            p-id="2526" :fill="isRound?'#bf8282':'#515151'"></path>
                    </svg>
                </div>
            </div> -->
        </div>
        <div class="bigbox">
            <canvas id="can" width="800px" height="800px"></canvas>
            <div class="posi"></div>
        </div>
    </div>
    <script type="module">
        new Vue({
            el: '#app',
            data: function () {
                return {
                    imgData: [],
                    isRound: false,
                    color: '#000',
                    flag: false,
                    isFill: false,
                    options: [
                        {
                            value: 1
                        }, {
                            value: 2
                        }, {
                            value: 3
                        }, {
                            value: 4
                        }, {
                            value: 5
                        },
                    ],
                    size: 1,
                }
            },
            watch: {
                color: function () {
                    console.log(this.color);
                },
                isRound: function () {
                    if (this.isRound) {
                        this.roundEvent()
                    } else {
                        this.mrEvent()
                    }
                }
            },
            methods: {
                // 绘制圆形
                isRounds() {
                    this.isRound = !this.isRound
                    if (this.isRound) {
                        document.getElementsByClassName("flexStart")[0].style.backgroundColor = "bisque"
                        // 获取can的dom
                        let can = document.getElementById("can")
                        // 创建一个2Dcanvas画布
                        let context = can.getContext('2d')
 
                    } else {
                        document.getElementsByClassName("flexStart")[0].style.backgroundColor = "#fff"
                    }
 
 
                },
                // 回退
                back() {
                    if (this.imgData.length) {
                        // 获取can的dom
                        let can = document.getElementById("can")
                        // 创建一个2Dcanvas画布
                        let context = can.getContext('2d')
                        context.putImageData(this.imgData[this.imgData.length - 1], 0, 0);
                        this.imgData.splice(this.imgData.length - 1, 1)
                    }
 
                },
 
                // 是否绘制
                getFill() {
                    let fill = document.getElementsByName("fill")
                    for (let i = 0; i < fill.length; i++) {
                        if (fill[i].checked) {
                            if (i === 0) {
                                this.isFill = true
                            } else if (i === 1) {
                                this.isFill = false
                            }
                        }
                    }
                },
                // 清空画布
                clearDarw() {
                    // 获取can的dom
                    let can = document.getElementById("can")
                    // 创建一个2Dcanvas画布
                    let context = can.getContext('2d')
                    context.clearRect(0, 0, can.width, can.height);
                },
                // 生成坐标系
                zbx() {
                    this.nowData()
                    // 获取can的dom
                    let can = document.getElementById("can")
                    // 创建一个2Dcanvas画布
                    let context = can.getContext('2d')
                    let screenHeight = document.body.offsetWidth
                    // 获取画布的高
                    let canHeight = can.offsetHeight
                    // 获取画布的宽
                    let canWidth = can.offsetWidth
                    // 坐标轴间隙
                    let gridSize = 20
                    // 平行于x轴绘制的线数
                    let xLineTotal = Math.floor(canHeight / gridSize) * 1
                    // 线条改为当前选择的颜色
                    context.strokeStyle = this.color
                    for (let i = 1; i < xLineTotal; i++) {
                        // 获取每条线所在的纵坐标
                        let linePosition = i * gridSize
                        // 每条线的起始位置
                        context.moveTo(0, linePosition)
                        // 每条线的终点位置
                        context.lineTo(canWidth, linePosition)
                        context.lineWidth = 1
                        // context.lineColor = "#000"
                        context.stroke()
                    }
                    let yLineTotal = Math.floor(canWidth / gridSize) * 1
                    for (let i = 1; i < yLineTotal; i++) {
                        // 获取每条线所在的纵坐标
                        let linePosition = i * gridSize
                        // 每条线的起始位置
                        context.moveTo(linePosition, 0)
                        // 每条线的终点位置
                        context.lineTo(linePosition, canHeight)
                        context.lineWidth = 1
                        // context.lineColor = "#000"
                        context.stroke()
                    }
                },
                // 当前数据
                nowData() {
                    // 获取can的dom
                    let can = document.getElementById("can")
                    // 创建一个2Dcanvas画布
                    let context = can.getContext('2d')
                    // 记录当前数据
                    let width = context.canvas.width;
                    let height = context.canvas.height;
                    this.imgData.push(context.getImageData(0, 0, width, height));
                },
                // 画图函数
                draw(x, y) {
                    // 获取can的dom
                    let can = document.getElementById("can")
                    // 创建一个2Dcanvas画布
                    let context = can.getContext('2d')
                    // 打印绘画当前的横纵坐标
                    // console.log(x, y);
                    // 开始画图
                    context.beginPath();
                    // 画圆 坐标在当前鼠标位置，半径为1px的圆
                    context.arc(x, y, this.size, 0 * Math.PI / 180, 360 * Math.PI / 180)
                    // 线条改为当前选择的颜色
                    context.strokeStyle = this.color
                    // 结束绘画
                    if (this.isFill) {
                        // 填充绘画
                        // 填充色更改为当前选中的颜色
                        context.fillStyle = this.color
                        context.fill();
                    } else {
                        // 不填充绘画
                        context.stroke();
                    }
                },
                rounddown: (e, that) => {
                    let can = document.getElementById("can")
                    let context = can.getContext('2d')
                    // 开始画图
                    context.beginPath();
                    // 画圆 坐标在当前鼠标位置，半径为1px的圆
                    context.arc(e.offsetX, e.offsetY, 120, 0 * Math.PI / 180, 360 * Math.PI / 180)
                    // 线条改为当前选择的颜色
                    context.strokeStyle = that.color
                    context.stroke();
                },
                mrdown: (e, that) => {
                    that.flag = true
                },
                mrup: (e, that) => {
                    that.flag = false
                },
                mrmove: (e, that) => {
                    let can = document.getElementById("can")
                    // 创建一个2Dcanvas画布
                    let context = can.getContext('2d')
                    // 鼠标右下角坐标dom
                    let po = document.getElementsByClassName("posi")[0]
                    // po.style.opacity = "1"
                    po.style.top = e.clientY - 70 + "px"
                    po.style.left = e.clientX + 20 + "px"
                    po.innerHTML = `(${e.offsetX}px,${e.offsetY}px)`
                    if (that.flag) {
                        that.nowData()
                        that.draw(e.offsetX, e.offsetY)
                    }
                },
                // 默认给鼠标事件
                mrEvent() {
                    let can = document.getElementById("can")
                    let context = can.getContext('2d')
                    // 移除事件
                    can.removeEventListener("mousedown", (e) => {
                        let that = this
                        this.rounddown(e, that)
                    })
                    // 鼠标任意键按下事件
                    can.addEventListener("mousedown", (e) => {
                        let that = this
                        this.mrdown(e, that)
                    })
                    // 鼠标任意键松开事件
                    can.addEventListener("mouseup", (e) => {
                        let that = this
                        this.mrup(e, that)
                    })
                    // 鼠标滑动事件
                    can.addEventListener("mousemove", (e) => {
                        let that = this
                        this.mrmove(e, that)
                    })
                },
                // 点击画圆时的鼠标事件
                roundEvent() {
                    let can = document.getElementById("can")
                    let context = can.getContext('2d')
                    // 移除鼠标任意键松开事件
                    can.removeEventListener("mouseup", (e) => {
                        let that = this
                        this.mrup(e, that)
                    })
                    // 移除鼠标滑动事件
                    can.removeEventListener("mousemove", (e) => {
                        let that = this
                        this.mrmove(e, that)
                    })
                    can.removeEventListener("mousedown", (e) => {
                        let that = this
                        this.mrdown(e, that)
                    })
                    can.addEventListener("mousedown", (e) => {
                        let that = this
                        this.rounddown(e, that)
                    })
                }
 
            },
            mounted() {
                let can = document.getElementById("can")
                // 创建一个2Dcanvas画布
                let context = can.getContext('2d')
                let po = document.getElementsByClassName("posi")[0]
                // 禁用鼠标右键
                document.oncontextmenu = function () {
                    return false;
                }
                // 鼠标移入画布
                can.addEventListener('mouseover', (e) => {
                    po.style.opacity = 1
                })
                // 鼠标移入画布
                can.addEventListener('mouseout', (e) => {
                    po.style.opacity = 0
                })
                this.mrEvent()
            }
        })
 
    </script>
</body>
 
</html>