【javascript】canvas画布涂鸦及保存图片到本地

写在前面

用javascript结合html中的canvas标签来实现画布的随意涂鸦，以及将涂鸦的作品保存下来。

电脑端实现

• 在线体验

http://jsrun.net/dfwKp/embedded/all/light

• index.html

    
    



    
        
            
        
        
            
        
        
            下载
            清空
        
    
    
    
    
    
    
    

• index.js

var canvas = document.getElementById('canvas')
// 画板大小
canvas.width = 280
canvas.height = 280

var context = canvas.getContext('2d')
// 背景颜色
context.fillStyle = 'black'
context.fillRect(0, 0, canvas.width, canvas.height)

// 线宽提示
var range = document.getElementById('customRange1')
range.oninput = function () {
    this.title = 'lineWidth: ' + this.value
}


var Mouse = { x: 0, y: 0 }
var lastMouse = { x: 0, y: 0 }
var painting = false

canvas.onmousedown = function () {
    painting = !painting
}

canvas.onmousemove = function (e) {
    lastMouse.x = Mouse.x
    lastMouse.y = Mouse.y
    Mouse.x = e.pageX - this.offsetLeft
    Mouse.y = e.pageY - this.offsetTop
    if (painting) {
        /*
        画笔参数：
            linewidth: 线宽
            lineJoin: 线条转角的样式, 'round': 转角是圆头
            lineCap: 线条端点的样式, 'round': 线的端点多出一个圆弧
            strokeStyle: 描边的样式, 'white': 设置描边为白色
        */
        context.lineWidth = range.value
        context.lineJoin = 'round'
        context.lineCap = 'round'
        context.strokeStyle = 'white'

        // 开始绘画
        context.beginPath()
        context.moveTo(lastMouse.x, lastMouse.y);
        context.lineTo(Mouse.x, Mouse.y);
        context.closePath()
        context.stroke()
    }
}

canvas.onmouseup = function () {
    painting = !painting
}

// 下载图片
var downl = document.getElementById('downl')
downl.onclick = function () {
    var canvas = document.getElementById('canvas')
    var a = document.createElement('a')
    a.download = 'canvas'
    a.href = canvas.toDataURL('image/jpeg')
    document.body.appendChild(a)
    a.click()
    document.body.removeChild(a)
}

// 清空画布
var clean = document.getElementById('clean')
clean.onclick = function () {
    context.clearRect(0, 0, canvas.width, canvas.height)
    context.fillStyle = 'black'
    context.fillRect(0, 0, canvas.width, canvas.height)
}

移动端实现

• 在线体验

http://jsrun.net/R3wKp/embedded/all/light

• index.html

    
    
    
    
    



    
        
            
        
        
            
        
        
            下载
            清空
        
    
    
    
    
    
    
    


	

• index.js

// 获取元素
var canvas = document.getElementById('canvas')

// 画板大小
canvas.width = 280
canvas.height = 280

// 平面绘图
var context = canvas.getContext('2d')

// 背景颜色
context.fillStyle = 'black'
context.fillRect(0, 0, canvas.width, canvas.height)

// 线宽提示
var range = document.getElementById('customRange1')
range.oninput = function () {
    this.title = 'lineWidth: ' + this.value
}

// 定义坐标
var start_x, start_y, move_x, move_y, end_x, end_y

// 按下手指
canvas.ontouchstart = function (e) {
    start_x = e.touches[0].pageX - this.offsetLeft
    start_y = e.touches[0].pageY - this.offsetTop
    context.lineWidth = range.value
    context.lineJoin = 'round'
    context.lineCap = 'round'
    context.strokeStyle = 'white'
    context.beginPath()
    context.moveTo(start_x, start_y)
}

// 移动手指
canvas.ontouchmove = function (e) {
    move_x = e.touches[0].pageX - this.offsetLeft
    move_y = e.touches[0].pageY - this.offsetTop
    context.lineTo(move_x, move_y)
    context.stroke()
}

// 松开手指
canvas.ontouchend = function (e) {
    end_x = e.changedTouches[0].pageX - this.offsetLeft
    end_y = e.changedTouches[0].pageY - this.offsetTop
    context.closePath();
}

// 下载图片
var downl = document.getElementById('downl')
downl.onclick = function () {
    var canvas = document.getElementById('canvas')
    var a = document.createElement('a')
    a.download = 'canvas'
    a.href = canvas.toDataURL('image/jpeg')
    document.body.appendChild(a)
    a.click()
    document.body.removeChild(a)
}

// 清空画布
var clean = document.getElementById('clean')
clean.onclick = function () {
    context.clearRect(0, 0, canvas.width, canvas.height)
    context.fillStyle = 'black'
    context.fillRect(0, 0, canvas.width, canvas.height)
}

引用参考

https://www.canvasapi.cn/
https://www.jianshu.com/p/e6d8351b6483
https://www.cnblogs.com/Tohold/p/10452869.html
https://getbootstrap.net/docs/components/forms/#range
https://blog.csdn.net/wogieni/article/details/97416465