我們這一節(jié)結(jié)合之前的API可以來個(gè)簡(jiǎn)單的實(shí)踐
栗子：結(jié)合鼠標(biāo)交互效果實(shí)現(xiàn)畫板的功能掌腰，有寫的功能以及橡皮擦的功能（撤銷把曼、前進(jìn)就先不考慮了）
write.gif
首先來個(gè)布局：
需要調(diào)節(jié)線的粗細(xì)以及橡皮擦的大小绍些，我們需要H5的范圍表單元素
HTML
<body>
<label>線的粗細(xì)：
<input id="line" type="range" step="1" min="1" max="20" value="4">
</label>
<label>橡皮檫的大芯椴佟：
<input id="rub" type="range" step="1" min="1" max="20" value="1">
</label>
<script src="./index.js"></script>
</body>
JS
1遗锣、獲取表單元素: 線帆阳， 橡皮大小
var lineRange = document.getElementById('line');
var rubRange = document.getElementById('rub');
2橱夭、創(chuàng)建Canvas并添加至body中
var canvas = document.createElement('canvas');
canvas.width = 500;
canvas.height = 500;
canvas.style.cssText = 'border: 1px solid #ccc';
document.body.appendChild(canvas);
3氨距、線的尺寸、橡皮尺寸：綁定事件
// 線的尺寸
lineRange.addEventListener('input', changeLineWidth);
// 橡皮尺寸
rubRange.addEventListener('input', changeRubSize);
// 橡皮檫的尺寸
function changeRubSize() {
rubSize = this.value;
}
// 線的粗細(xì)
function changeLineWidth() {
ctx.lineWidth = this.value;
}
4棘劣、 canvas中的事件
var ctx = canvas.getContext('2d');
// 線的粗細(xì)
ctx.lineWidth = 4;
// 橡皮檫的尺寸
var rubSize = 1;
// 是否可用寫擦功能
var isPress = false;
// 按鈕類型
var btnType;
4.1 canvas則需要監(jiān)聽鼠標(biāo)按下的事件俏让，說明用戶下筆
canvas.addEventListener('mousedown', penDown);
// 左鍵為 寫 0
// 中鍵為 橡皮檫 1
// 下筆事件
function penDown(event) {
isPress = true;
btnType = event.button;
// 第一種 坐標(biāo)方式
var curX = event.offsetX;
var curY = event.offsetY;
// 寫
// 當(dāng)鼠標(biāo)按鍵類型為0的時(shí)候，說明用戶開始下筆
if (btnType === 0) {
// 開啟一個(gè)新的路徑
ctx.beginPath();
// 并且將鼠標(biāo)按下的坐標(biāo)作為繪制路徑的起始點(diǎn)
ctx.moveTo(curX, curY);
}
}
4.2 當(dāng)用戶鼠標(biāo)按下，并且此時(shí)監(jiān)聽鼠標(biāo)移動(dòng)的事件首昔，說明用戶此時(shí)正在畫布上移動(dòng)寡喝，也就說明用戶正在繪制路徑
canvas.addEventListener('mousemove', penMove);
// 筆移動(dòng)事件
function penMove(event) {
if (isPress) {
// 第一種 坐標(biāo)方式
// var curX = event.offsetX;
// var curY = event.offsetY;
// 第二種 坐標(biāo)方式
var curX1 = event.clientX - canvas.getBoundingClientRect().x;
var curY1 = event.clientY - canvas.getBoundingClientRect().y;
// 確認(rèn)過用戶是否按下鼠標(biāo)，當(dāng)按下時(shí)isPress則會(huì)為true勒奇，
// 當(dāng)btnType則為0预鬓，說明可繪制路徑
// 當(dāng)btnType則為1，說明使用橡皮擦
switch (btnType) {
case 0:
write(curX1, curY1);
break;
case 1:
rub(curX1, curY1);
break;
}
}
}
// 寫
function write(x, y) {
ctx.lineTo(x, y);
ctx.stroke();
}
// 擦：擦的功能則是clearRect赊颠， 需要注意的是格二，橡皮擦的中心需要是光標(biāo)的中心
function rub(x, y) {
var size = 10 * rubSize;
// 橡皮檫的中心點(diǎn)
ctx.clearRect(x - (size / 2), y - (size / 2), size, size);
}
4.3 當(dāng)鼠標(biāo)按鍵抬起的時(shí)候，說明用戶此時(shí)將筆離開畫布了
鼠標(biāo)抬起事件觸發(fā)竣蹦，則isPress需要重置為false顶猜，閉合路徑
canvas.addEventListener('mouseup', penUp);
// 提筆
function penUp() {
isPress = false;
ctx.closePath();
}
