canvas 实现画板批改功能

作者: 正在成长的切图仔 | 来源:发表于2021-05-11 17:14 被阅读0次

canvas 实现画板批改功能
canvas移动端实现画板批改功能
前端
前端
angular5中使用canvas简单画板
ios开发实现画板功能
canvas2-text
canvas实现的画板
通过canvas画板学习PointerEvent、MouseEv
基于canvas画板原理（H5）

说明： 最近有图片批改作业主观题的需求，所以研究了一下canvas实现了PC端
功能：放大缩小批改橡皮檫清空保存图片
移动端实现请见： https://www.jianshu.com/p/10571d4adca7
第一步： 创建canvas画布

<template>
<div class="awe" id="awe" style="width: 100px; height: 100px" >
    <div class="canvas" >
        <canvas class="canvasas" id="drawing-board"></canvas>
    </div>
</div>
</template>
<script>
export default {
    data () {
        return {
            myContext: null,
            canvas: null,
            image: null,
        }
    },
    methods: {
        // 定义画布对象  画布显示二维图片
        canvas1() {
            this.myContext = document.getElementById('drawing-board').getContext('2d');
            this.canvas = document.getElementById('drawing-board')
        },
    },
    async mounted () {
        await this.canvas1()
    },
}
</script>

第二步：把图片放到canvas画布里面

    // 定义一个image对象并设置好它的onload事件和src属性。
    initialization () {
        // 将图片放到画布里面 myContext.drawImage(img, 0, 0)
        this.image = new Image()//创建一个image对象 通过构造函数创建 img 实例
        this.image.src = "https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3228549874,2173006364&fm=26&gp=0.jpg";
        this.image.setAttribute("crossOrigin",'Anonymous')//  解决图片跨域问题
        this.canvas.width = this.image.width;
        this.canvas.height = this.image.height;
        this.image.onload =  (e) => { // 确保图片完整获取到，创建一个异步事件
            this.drawImage();
        };
    },
    drawImage(sec = 1) {
        this.myContext.clearRect(0, 0, this.canvas.width, this.canvas.height); // 清空画版
        this.canvas.width = this.image.width * sec;
        this.canvas.height = this.image.height * sec;
        this.image.width = this.image.width * sec;
        this.image.height = this.image.height * sec;
        this.myContext.drawImage(this.image,0,0,this.image.width, this.image.height);
    },
    //在mounted () 生命周期里面调用
    async mounted () {
        await this.canvas1()
        await this.initialization() 
    },

第三步：实现放大放小
1.添加点击事件

<div class="botton">
    <button class="enlarge" @click="enlargeClick">+</button>
    <button class="enlarge" @click="emptyTheCanvas">-</button>   
</div>
<script>
export default {
    methods: {
        //这里的sec是为了放大放小是的等比缩放
        drawImage(sec = 1) {
            this.myContext.clearRect(0, 0, this.canvas.width, this.canvas.height); // 清空画版
            this.canvas.width = this.image.width * sec;
            this.canvas.height = this.image.height * sec;
            this.image.width = this.image.width * sec;
            this.image.height = this.image.height * sec;
            this.myContext.drawImage(this.image,0,0,this.image.width, this.image.height);
        },
        // 画布放大
        enlargeClick () {
            this.drawImage(1.2)
        },
        // 画布缩小
        emptyTheCanvas() {
            this.drawImage(0.8)
        },
    },
}
</script>

整体代码

<template>
<div class="awe" id="awe" style="width: 100px; height: 100px" >
    <div class="canvas" >
        <canvas class="canvasas" id="drawing-board"></canvas>
    </div>
</div>
</template>
<script>
export default {
    data () {
        return {
            myContext: null,
            canvas: null,
            image: null,
        }
    },
    methods: {
        // 定义画布对象  画布显示二维图片
        canvas1() {
            this.myContext = document.getElementById('drawing-board').getContext('2d');
            this.canvas = document.getElementById('drawing-board')
        },
        // 定义一个image对象并设置好它的onload事件和src属性。
        initialization () {
            // 将图片放到画布里面 myContext.drawImage(img, 0, 0)
            this.image = new Image()//创建一个image对象 通过构造函数创建 img 实例
            this.image.src = "https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3228549874,2173006364&fm=26&gp=0.jpg";
            this.image.setAttribute("crossOrigin",'Anonymous')//  解决图片跨域问题
            this.canvas.width = this.image.width;
            this.canvas.height = this.image.height;
            this.image.onload =  (e) => { // 确保图片完整获取到，创建一个异步事件
                this.drawImage();
            };
        },
        drawImage(sec = 1) {
            this.myContext.clearRect(0, 0, this.canvas.width, this.canvas.height); // 清空画版
            this.canvas.width = this.image.width * sec;
            this.canvas.height = this.image.height * sec;
            this.image.width = this.image.width * sec;
            this.image.height = this.image.height * sec;
            this.myContext.drawImage(this.image,0,0,this.image.width, this.image.height);
        },
        // 画布放大
        enlargeClick () {
            this.drawImage(1.2)
        },
        // 画布缩小
        emptyTheCanvas() {
            this.drawImage(0.8)
        },
    },
    async mounted () {
        await this.canvas1()
        await this.initialization() 
    },
}
</script>
<style lang="less">
.awe{
    width: 100vw !important;
    height: 100vh !important;
    display: flex;
    position: relative;
    .botton{
        height: 100%;
        position: absolute;
        z-index: 1000;
    }
    .enlarge{
        width: 40px;
        height: 40px;
        font-size: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .canvas{
        display: flex;
        width: 100%;
        justify-content: center;
        align-items: center;
        .canvasas{
            position: absolute;
        }
    }
}
</style>

第四步：画笔实现

了解四个事件 onmousedown（鼠标按下事件） onmousemove (鼠标移动事件) onmouseup （鼠标抬起事件） onmouseout （移除事件）
2.给canvas添加事件

<div>
<canvas class="canvasas" id="drawing-board"  @mousedown="onmousedown" @mousemove="onmousemove" @mouseup="onmouseup"
 @mouseout="onmouseout"></canvas>
</div>
<script>
export default {
    data () {
        return {
            myPaint: false,
            myClickX: [],
            myClickY: [],
            myClickDrag: [],
            myContext: null,
            canvas: null,
            image: null,
            img: null,
            rubberShow: false,
            rubberShow1: false,
            url1: ''
        }
    },
    methods: {
        // 在图片上做画根据鼠标移动轨迹
         redraw(){
              this.myContext.strokeStyle = '#f00'; // 设置颜色
              this.myContext.lineJoin = 'round';
              this.myContext.lineWidth = 5; //设置粗细
              for(let i=0;i<this.myClickX.length;i++){
                  this.myContext.beginPath();
                  if(this.myClickDrag[i] && i){
                      this.myContext.moveTo(this.myClickX[i-1], this.myClickY[i-1])
                  }else{
                      this.myContext.moveTo(this.myClickX[i]-1,this.myClickY[i])
                  }
                  this.myContext.lineTo(this.myClickX[i],this.myClickY[i]);
                  this.myContext.closePath();
                  this.myContext.stroke();
              }
          },
          // 将鼠标移动的轨迹放到myClickDrag 数组中
          addClick(x,y,dragging){
              this.myClickX.push(x);
              this.myClickY.push(y);
              this.myClickDrag.push(dragging);
          },
         // 鼠标按下事件
         onmousedown(e) {
            this.myPaint = true
            this.addClick(e.pageX-this.canvas.offsetLeft,e.pageY - this.canvas.offsetTop);
            if(this.myPaint){
                this.redraw();
            }
        },
        // 鼠标移动事件
        onmousemove(e) {
            if(this.myPaint){
                this.addClick(e.pageX-this.canvas.offsetLeft,e.pageY - this.canvas.offsetTop,true);
                this.redraw();
            }
        },
        // 鼠标抬起事件
        onmouseup() {
            this.myPaint = false;
            this.rubberShow1 = false
            this.image.src = this.canvas.toDataURL("image/png");
            this.myClickX = new Array();
            this.myClickY = new Array();
            this.myClickDrag = new Array();
        },
        // 鼠标移除canvas画布
        onmouseout() {
            this.myPaint = false;
        },
    },
}
</script>

第五步橡皮檫：
思路：通过两个canvas 一个当背景一个当蒙版所有操作在蒙版进行（如果只有一个canvas会把图片一起擦掉裸出底色）不多说上代码

<template>
<div class="awe" id="awe" style="width: 100px; height: 100px" >
    <div class="botton">
        <button class="enlarge" @click="enlargeClick">+</button>
        <button class="enlarge" @click="emptyTheCanvas">-</button>
        <button class="enlarge" @click="rubber">橡皮</button>
        <button class="enlarge" @click="brush">画笔</button>
    </div>
    <div class="canvas" >
        <canvas class="canvasas" id="drawing-board"  @mousedown="onmousedown" @mousemove="onmousemove" @mouseup="onmouseup" @mouseout="onmouseout"></canvas>
        <canvas id="drawing-board1"></canvas>
    </div>
</div>
</template>
<script>
export default {
data () {
    return {
        myPaint: false,
        myClickX: [],
        myClickY: [],
        myClickDrag: [],
        myContext: null,
        canvas: null,
        image: null,
        myContextRce: null,
        canvasRce: null,
        img: null,
        rubberShow: false,
        rubberShow1: false,
        url1: ''
    }
},
methods: {
    // 定义画布对象  画布显示二维图片
    canvas1() {
        this.myContext = document.getElementById('drawing-board').getContext('2d');
        this.canvas = document.getElementById('drawing-board')
        this.myContextRce = document.getElementById('drawing-board1').getContext('2d');
        this.canvasRce = document.getElementById('drawing-board1')
    },
    // 禁止滚轮放大缩小图片
    mousewheel() {
        window.addEventListener('mousewheel', function (event) {
            if (event.ctrlKey === true || event.metaKey) {
                event.preventDefault();
            }
        }, { passive: false });
    },
    initialization1 () {
        // 将图片放到画布里面 myContext.drawImage(img, 0, 0)
        this.img = new Image()//创建一个image对象 通过构造函数创建 img 实例
        this.img.src = "https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3228549874,2173006364&fm=26&gp=0.jpg";
        this.img.setAttribute("crossOrigin",'Anonymous')//  解决图片跨域问题
        this.canvasRce.width = this.img.width;
        this.canvasRce.height = this.img.height;
        this.img.onload =  (e) => { // 确保图片完整获取到，创建一个异步事件
            this.drawImage1();
        };
    },
    drawImage1(sec = 1) {
        this.canvasRce.width = this.img.width * sec;
        this.canvasRce.height = this.img.height * sec;
        this.img.width = this.img.width * sec;
        this.img.height = this.img.height * sec;
        this.myContextRce.drawImage(this.img,0,0,this.img.width, this.img.height);
    },

    // 定义一个image对象并设置好它的onload事件和src属性。
    initialization () {
        // 将图片放到画布里面 myContext.drawImage(img, 0, 0)
        this.image = new Image()//创建一个image对象 通过构造函数创建 img 实例
        this.image.src = "https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3228549874,2173006364&fm=26&gp=0.jpg";
        this.image.setAttribute("crossOrigin",'Anonymous')//  解决图片跨域问题
        this.canvas.width = this.image.width;
        this.canvas.height = this.image.height;
        this.image.onload =  (e) => { // 确保图片完整获取到，创建一个异步事件
            this.drawImage();
        };
    },
    drawImage(sec = 1) {
        this.myContext.clearRect(0, 0, this.canvas.width, this.canvas.height); // 清空画版
        this.canvas.width = this.image.width * sec;
        this.canvas.height = this.image.height * sec;
        this.image.width = this.image.width * sec;
        this.image.height = this.image.height * sec;
        this.myContext.drawImage(this.image,0,0,this.image.width, this.image.height);
    },
    // 在图片上做画根据鼠标移动轨迹
    redraw(){
        this.myContext.strokeStyle = '#f00'; // 设置颜色
        this.myContext.lineJoin = 'round';
        this.myContext.lineWidth = 5; //设置粗细
        for(let i=0;i<this.myClickX.length;i++){
            this.myContext.beginPath();
            if(this.myClickDrag[i] && i){
                this.myContext.moveTo(this.myClickX[i-1], this.myClickY[i-1])
            }else{
                this.myContext.moveTo(this.myClickX[i]-1,this.myClickY[i])
            }
            this.myContext.lineTo(this.myClickX[i],this.myClickY[i]);
            this.myContext.closePath();
            this.myContext.stroke();
        }
    },
    // 将鼠标移动的轨迹放到myClickDrag 数组中
    addClick(x,y,dragging){
        this.myClickX.push(x);
        this.myClickY.push(y);
        this.myClickDrag.push(dragging);
    },
    // 鼠标按下事件
    onmousedown(e) {
        if(this.rubberShow){
            this.rubberShow1 = true
            return false
        }
        this.myPaint = true
        this.addClick(e.pageX-this.canvas.offsetLeft,e.pageY - this.canvas.offsetTop);
        if(this.myPaint){
            this.redraw();
        }
    },
    // 鼠标移动事件
    onmousemove(e) {
        if(this.myPaint){
            this.addClick(e.pageX-this.canvas.offsetLeft,e.pageY - this.canvas.offsetTop,true);
            this.redraw();
        }
        if(this.rubberShow1){
            this.myContext.clearRect(e.pageX-this.canvas.offsetLeft, e.pageY - this.canvas.offsetTop,10,10);
        }
    },
    // 鼠标抬起事件
    onmouseup() {
        this.myPaint = false;
        this.rubberShow1 = false
        this.image.src = this.canvas.toDataURL("image/png");
        this.myClickX = new Array();
        this.myClickY = new Array();
        this.myClickDrag = new Array();
    },
    // 鼠标移除canvas画布
    onmouseout() {
        this.myPaint = false;
    },
    // 画布放大
    enlargeClick () {
        this.drawImage(1.2)
        this.drawImage1(1.2)
    },
    // 画布缩小
    emptyTheCanvas() {
        this.drawImage(0.8)
        this.drawImage1(0.8)
    },
    // 橡皮檫
    rubber() {
        this.rubberShow = true
        this.myPaint = false
    },
    //画笔
    brush () {
        this.rubberShow = false
    },
},   

async mounted () {
    await this.canvas1()
    await this.initialization() 
    await this.initialization1() 
    this.mousewheel()
}
}
</script>

<style lang="less">
.awe{
    width: 100vw !important;
    height: 100vh !important;
    display: flex;
    position: relative;
    .botton{
        height: 100%;
        position: absolute;
        z-index: 1000;
    }
    .enlarge{
        width: 40px;
        height: 40px;
        font-size: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .canvas{
        display: flex;
        width: 100%;
        justify-content: center;
        align-items: center;
        .canvasas{
            position: absolute;
        }
    }
}
    
</style>

第六步保存图片
思路：因为我们在实现橡皮檫的时候使用了两个canvas这个时候在获取批改后的文件的时候不能只获取一张应该把两张图片合并获取

<script>
export default {
    methods: {
        // 保存
        baocun() {
            let imgtext = new Image()
            imgtext.src = this.img.src
            imgtext.setAttribute("crossOrigin",'Anonymous')//  解决图片跨域问题
            imgtext.onload = (e) => {
                this.myContext.drawImage(imgtext,0,0,this.image.width, this.image.height);
                let imgtext1 = new Image()
                imgtext1.src = this.image.src
                imgtext1.setAttribute("crossOrigin",'Anonymous')//  解决图片跨域问题
                imgtext1.onload = (e) => {
                    this.myContext.drawImage(imgtext1,0,0,this.image.width, this.image.height);
                    this.url1 = this.canvas.toDataURL("image/png"); //"image/png" 这里注意一下
                    var a = document.createElement('a');          // 创建一个a节点插入的document
                    var event = new MouseEvent('click')           // 模拟鼠标click点击事件
                    a.download = '图片名字'                  // 设置a节点的download属性值
                    a.href = this.url1;                                 // 将图片的src赋值给a节点的href
                    a.dispatchEvent(event)      
                }
            }
        },
    },
}
</script>

第八步清空痕迹
思路和橡皮擦一样直接上完整功能代码

<template>
<div class="awe" id="awe" style="width: 100px; height: 100px" >
    <div class="botton">
        <button class="enlarge" @click="enlargeClick">+</button>
        <button class="enlarge" @click="emptyTheCanvas">-</button>
        <button class="enlarge" @click="rubber">橡皮</button>
        <button class="enlarge" @click="brush">画笔</button>
        <button class="enlarge" @click="baocun">保存</button>
        <button class="enlarge" @click="qingkong">清空</button>
    </div>
    <div class="canvas" >
        <canvas class="canvasas" id="drawing-board"  @mousedown="onmousedown" @mousemove="onmousemove" @mouseup="onmouseup" @mouseout="onmouseout"></canvas>
        <canvas id="drawing-board1"></canvas>
    </div>
</div>
</template>
<script>
export default {
data () {
    return {
        myPaint: false,
        myClickX: [],
        myClickY: [],
        myClickDrag: [],
        myContext: null,
        canvas: null,
        image: null,
        myContextRce: null,
        canvasRce: null,
        img: null,
        rubberShow: false,
        rubberShow1: false,
        url1: ''
    }
},
methods: {
    // 定义画布对象  画布显示二维图片
    canvas1() {
        this.myContext = document.getElementById('drawing-board').getContext('2d');
        this.canvas = document.getElementById('drawing-board')
        this.myContextRce = document.getElementById('drawing-board1').getContext('2d');
        this.canvasRce = document.getElementById('drawing-board1')
    },
    // 禁止滚轮放大缩小图片
    mousewheel() {
        window.addEventListener('mousewheel', function (event) {
            if (event.ctrlKey === true || event.metaKey) {
                event.preventDefault();
            }
        }, { passive: false });
    },
    initialization1 () {
        // 将图片放到画布里面 myContext.drawImage(img, 0, 0)
        this.img = new Image()//创建一个image对象 通过构造函数创建 img 实例
        this.img.src = "https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3228549874,2173006364&fm=26&gp=0.jpg";
        this.img.setAttribute("crossOrigin",'Anonymous')//  解决图片跨域问题
        this.canvasRce.width = this.img.width;
        this.canvasRce.height = this.img.height;
        this.img.onload =  (e) => { // 确保图片完整获取到，创建一个异步事件
            this.drawImage1();
        };
    },
    drawImage1(sec = 1) {
        this.canvasRce.width = this.img.width * sec;
        this.canvasRce.height = this.img.height * sec;
        this.img.width = this.img.width * sec;
        this.img.height = this.img.height * sec;
        this.myContextRce.drawImage(this.img,0,0,this.img.width, this.img.height);
    },

    // 定义一个image对象并设置好它的onload事件和src属性。
    initialization () {
        // 将图片放到画布里面 myContext.drawImage(img, 0, 0)
        this.image = new Image()//创建一个image对象 通过构造函数创建 img 实例
        this.image.src = "https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3228549874,2173006364&fm=26&gp=0.jpg";
        this.image.setAttribute("crossOrigin",'Anonymous')//  解决图片跨域问题
        this.canvas.width = this.image.width;
        this.canvas.height = this.image.height;
        this.image.onload =  (e) => { // 确保图片完整获取到，创建一个异步事件
            this.drawImage();
        };
    },
    drawImage(sec = 1) {
        this.myContext.clearRect(0, 0, this.canvas.width, this.canvas.height); // 清空画版
        this.canvas.width = this.image.width * sec;
        this.canvas.height = this.image.height * sec;
        this.image.width = this.image.width * sec;
        this.image.height = this.image.height * sec;
        this.myContext.drawImage(this.image,0,0,this.image.width, this.image.height);
    },
    // 在图片上做画根据鼠标移动轨迹
    redraw(){
        this.myContext.strokeStyle = '#f00'; // 设置颜色
        this.myContext.lineJoin = 'round';
        this.myContext.lineWidth = 5; //设置粗细
        for(let i=0;i<this.myClickX.length;i++){
            this.myContext.beginPath();
            if(this.myClickDrag[i] && i){
                this.myContext.moveTo(this.myClickX[i-1], this.myClickY[i-1])
            }else{
                this.myContext.moveTo(this.myClickX[i]-1,this.myClickY[i])
            }
            this.myContext.lineTo(this.myClickX[i],this.myClickY[i]);
            this.myContext.closePath();
            this.myContext.stroke();
        }
    },
    // 将鼠标移动的轨迹放到myClickDrag 数组中
    addClick(x,y,dragging){
        this.myClickX.push(x);
        this.myClickY.push(y);
        this.myClickDrag.push(dragging);
    },
    // 鼠标按下事件
    onmousedown(e) {
        if(this.rubberShow){
            this.rubberShow1 = true
            return false
        }
        this.myPaint = true
        this.addClick(e.pageX-this.canvas.offsetLeft,e.pageY - this.canvas.offsetTop);
        if(this.myPaint){
            this.redraw();
        }
    },
    // 鼠标移动事件
    onmousemove(e) {
        if(this.myPaint){
            this.addClick(e.pageX-this.canvas.offsetLeft,e.pageY - this.canvas.offsetTop,true);
            this.redraw();
        }
        if(this.rubberShow1){
            this.myContext.clearRect(e.pageX-this.canvas.offsetLeft, e.pageY - this.canvas.offsetTop,10,10);
        }
    },
    // 鼠标抬起事件
    onmouseup() {
        this.myPaint = false;
        this.rubberShow1 = false
        this.image.src = this.canvas.toDataURL("image/png");
        this.myClickX = new Array();
        this.myClickY = new Array();
        this.myClickDrag = new Array();
    },
    // 鼠标移除canvas画布
    onmouseout() {
        this.myPaint = false;
    },
    // 画布放大
    enlargeClick () {
        this.drawImage(1.2)
        this.drawImage1(1.2)
    },
    // 画布缩小
    emptyTheCanvas() {
        this.drawImage(0.8)
        this.drawImage1(0.8)
    },
    // 橡皮檫
    rubber() {
        this.rubberShow = true
        this.myPaint = false
    },
    brush () {
        this.rubberShow = false
    },
    // 保存
    baocun() {
        let imgtext = new Image()
        imgtext.src = this.img.src
        imgtext.setAttribute("crossOrigin",'Anonymous')//  解决图片跨域问题
        imgtext.onload = (e) => {
            this.myContext.drawImage(imgtext,0,0,this.image.width, this.image.height);
            let imgtext1 = new Image()
            imgtext1.src = this.image.src
            imgtext1.setAttribute("crossOrigin",'Anonymous')//  解决图片跨域问题
            imgtext1.onload = (e) => {
                this.myContext.drawImage(imgtext1,0,0,this.image.width, this.image.height);
                this.url1 = this.canvas.toDataURL("image/png"); //"image/png" 这里注意一下
                var a = document.createElement('a');          // 创建一个a节点插入的document
                var event = new MouseEvent('click')           // 模拟鼠标click点击事件
                a.download = '图片名字'                  // 设置a节点的download属性值
                a.href = this.url1;                                 // 将图片的src赋值给a节点的href
                a.dispatchEvent(event)      
            }
        }
    },
    // 清空
    qingkong () {
        this.myContext.clearRect(0,0,this.image.width, this.image.height)
        this.myClickX = new Array();
        this.myClickY = new Array();
        this.myClickDrag = new Array();
    }
},   

async mounted () {
    await this.canvas1()
    await this.initialization() 
    await this.initialization1() 
    this.mousewheel()
}
}
</script>

<style lang="less">
.awe{
    width: 100vw !important;
    height: 100vh !important;
    display: flex;
    position: relative;
    .botton{
        height: 100%;
        position: absolute;
        z-index: 1000;
    }
    .enlarge{
        width: 40px;
        height: 40px;
        font-size: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .canvas{
        display: flex;
        width: 100%;
        justify-content: center;
        align-items: center;
        .canvasas{
            position: absolute;
        }
    }
}
    
</style>

canvas 实现画板批改功能
说明：最近有图片批改作业主观题的需求，所以研究了一下canvas实现了PC端功能：放大缩小批改橡皮檫清空...
canvas移动端实现画板批改功能
说明：最近有图片批改作业主观题的需求，所以研究了一下canvas实现了移动端功能：放大缩小批改橡皮檫清空...
前端
```javascript 画板 body,html{ width: 1...
前端
angular5中使用canvas简单画板
angular中使用canvas可以实现一个简单的画板绘制。功能如下：调整笔尖的大小清空画板绘制内容鼠标移动是绘制...
ios开发实现画板功能
ios开发实现画板功能 ios开发实现画板功能
canvas2-text
canvas画板结合JS事件实现写字效果
canvas实现的画板
canvas实现的画板最近一直负责公司云课堂的ppt部分，里面包括画板。这部分的功能我觉得值得分享出来。gith...
通过canvas画板学习PointerEvent、MouseEv
最近想开发个草稿纸功能, 所以学习了下canvas实现简单的画板功能, 但是我们知道在PC端我们可以用MouseE...
基于canvas画板原理（H5）
一个简单的小事例，利用canvas实现画板效果。实现原理：鼠标事件+canvas效果图：代码：如有问题欢迎交流...