效果： http://dsj-666.gitee.io/draw
源码：
js画布 - 锐客网
canvas {
border: 1px solid purple;
}
* {
padding: 0;
margin: 0;
list-style: none;
}body {
background-color: antiquewhite;
}.wrapper {
margin: 10px;
}.wrapper canvas {
border: 1px soild pink;
border-radius: 25px;
box-shadow: 10px 10px 10px #888888;
}.wrapper .btn-list {
width: 1000px;
text-align: center;
}.wrapper .btn-list li {
display: inline-block;
margin: 40px;
}.wrapper .btn-list li input {
width: 60px;
background-color: rgb(166, 197, 226);
border-radius: 5px;
color: white;
border: none;
cursor: pointer;
padding: 5px;
}.range {
-webkit-appearance: none;
height: 1px;
outline: none;
width: 180px !important;
border-radius: 20px;
}.range::-webkit-slider-thumb {
/* 滑块的样式 */
-webkit-appearance: none;
height: 20px;
width: 20px;
border-radius: 50%;
background-color: rgb(70, 141, 158);
box-shadow: 0 2px 2px rgba(0, 0, 0, .2);
}.wrapper .btn-list li input:hover {
transition: .3s;
transform: translate(-5px, -5px);
box-shadow: 5px 5px 5px #888888;
background-color: rgb(142, 191, 238);
}/**
* darwing2020/7/15
*/window.onload = function() {
var darwingLineObj = {
cavs: $('.cavs'),
context: $('.cavs')[0].getContext('2d'),
color: $('input:eq(0)'),
cleanBoard: $('input:eq(1)'),
eraser: $('input:eq(2)'),
res: $('input:eq(3)'),
range: $('input:eq(4)'),
flag: null,
arrImg: [],
init: function() {
this.context.lineCap = 'round';
//线条起始开始的样式 是圆的
this.context.lineJoin = 'round';
//线条转弯的时候的样式
this.draw();
this.btnFn();
},
draw: function() {
var cavs = this.cavs,
self = this;
var c_x = cavs.offset().left,
c_y = cavs.offset().top;
cavs.mousedown(function(e) {
self.flag = true;
e = e || window.event;
var m_x = e.pageX - c_x,
m_y = e.pageY - c_y;
self.context.beginPath();
self.context.moveTo(m_x, m_y);
cavs.mousemove(function(e) {
if (self.flag) {
self.context.lineTo(e.pageX - c_x, m_y = e.pageY - c_y);
self.context.stroke();
}
});
cavs.mouseup(function() {
self.flag = false;
});
cavs.mouseleave(function() {self.flag = false;
});
var imgData = https://www.it610.com/article/self.context.getImageData(0, 0, self.cavs[0].width, self.cavs[0].height);
self.arrImg.push(imgData);
// console.log(arrImg);
//console.log(self.arrImg);
});
},
btnFn: function() {
var self = this;
$('.btn-list').on('click', function(e) {
e = e || window.event;
switch (e.target.value) {
case '清屏':
self.context.clearRect(0, 0, self.cavs[0].width, self.cavs[0].height)
break;
case '橡皮':
self.context.strokeStyle = 'antiquewhite';
break;
case '撤销':
if (self.arrImg.length > 0) {
self.context.putImageData(self.arrImg.pop(), 0, 0);
}
break;
}
});
this.color.change(function(e) { //颜色变化的时候
self.context.strokeStyle = $(this).val();
});
this.range.change(function(e) {
self.context.lineWidth = $(this).val();
})
}
}darwingLineObj.init();
}练习注意点：
css :
- 当input 的type为range的时候，滑块的样式可能不能通过input直接修改，设置类名修改，
- -webkit-appearance：none来清除默认样式，再来设置滑块和轨道的样式
canvas:
- getImageDate(x,y,宽，高)获取画布画出来的图，putImageData()放置获取的图
var img = ctx.getImageData(70, 70, 160, 160); ctx.putImageData(img, 300, 300);
- 多个按钮绑定点击时间的 时候，可以用委托事件方式，不用一个个绑定，再用e.target辨别
- jq对象对象没有getContext('2d') 方法，注意转换为 DOM对象
- 可以对始终点的线条设置圆角样式，拐弯点设置样式为圆角
- 相对大一点的js文件，最好写个对象，调用对象里的初始化函数，来调用其他函数。
- 画笔的实现主要通过鼠标移动事件，来实时的计算出鼠标相对画板的位置，用上下文对象.lineTo画出
- 清屏功能就是通过clearRect()方法 实现 范围是整个画板，注意获取画板的宽高的时候转换为DOM元素
- 橡皮擦功能就是画笔功能 颜色设置为背景色一样就能实现
- 撤销就是将，每一次按下按钮的时候就将整个画布保存在数组中，每次点撤销的时候即使pop()删除数组最后一个元素并返回，这就回到的上一个状态
【2020/7/15|2020/7/15 js模拟画板】
