本文實例為大家分享了JS實現(xiàn)canvas簡單小畫板的具體代碼，供大家參考，具體內(nèi)容如下

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;//鼠標(biāo)在畫布上的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();//閉合當(dāng)前的路徑 結(jié)束繪制

}

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

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

總結(jié)

以上是生活随笔為你收集整理的html5画板功能,JS实现canvas简单小画板功能的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。