html5画板功能,JS实现canvas简单小画板功能

本文实例为大家分享了JS实现canvas简单小画板的具体代码，供大家参考，具体内容如下

Html部分：

Document

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();

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。