1. 本片文章是使用的原生JS代码编写的画板,能实现画笔粗细的修改,以及画笔颜色的修改
2. 用到的JS的canvas知识点之外,还用到了鼠标事件的监听.根据鼠标事件,监听点击起始位置,以及过程中鼠标移动的位置,到最后鼠标松开的位置.再根据鼠标的移动轨迹进行画线.
3. 源码中封装了两个函数,line()函数是画布的一系列画线方法,change()函数是监听的鼠标移动轨迹,轨迹结合画线方法,完成画板的绘画功能.
// 封装函数 功能:画线
function line() {
ctx.beginPath();
ctx.lineWidth = range.value/5;
ctx.strokeStyle = color.value;
ctx.lineJoin = 'round';
ctx.moveTo(last_mouse.x, last_mouse.y);
ctx.lineTo(mouse.x, mouse.y);
ctx.closePath();
ctx.stroke();
};
// 封装函数 功能:监听鼠标的移动轨迹
function changes() {
can.onmousedown = function (el) {
// 获取鼠标点击的初始位置
mouse.x = el.offsetX;
mouse.y = el.offsetY;
can.onmousemove = function (e) {
last_mouse.x = mouse.x;
last_mouse.y = mouse.y;
// 获取鼠标移动的偏移量
mouse.x = e.pageX - this.offsetLeft;
mouse.y = e.pageY - this.offsetTop;
line();
}
}
can.onmouseup = function () {
// 注意:这里要将鼠标的移动事件值为空
can.onmousemove = null;
}
}
4. 画板清空用到的是canvas中的clearRect()方法,将一整个画布清空.
注意:
在鼠标轨迹的监听事件中,鼠标松开的事件里.要将之前的鼠标事件值为空,这样鼠标松开之后,才不会妨碍后续鼠标事件的执行.
附上源代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<canvas width="900" height="500" style="border: 1px solid blue;background-color: white;" id="can"></canvas><br>
线宽: <input type="range" id="range">
颜色: <input type="color" id="color">
<button id="btn">清空</button>
<script>
/** @type {HTMLCanvasElement} */
var can = document.getElementById('can');
var ctx = can.getContext('2d');
var mouse = { x: 0, y: 0 };
var last_mouse = { x: 0, y: 0 };
function changes() {
can.onmousedown = function (el) {
mouse.x = el.offsetX;
mouse.y = el.offsetY;
can.onmousemove = function (e) {
last_mouse.x = mouse.x;
last_mouse.y = mouse.y;
mouse.x = e.pageX - this.offsetLeft;
mouse.y = e.pageY - this.offsetTop;
line();
}
}
can.onmouseup = function () {
can.onmousemove = null;
}
}
changes();
range.onchange = function () {
if (range.value == 0) {
ctx.lineWidth = 1;
} else {
ctx.lineWidth = range.value/5;
}
}
function line() {
ctx.beginPath();
ctx.lineWidth = range.value/5;
ctx.strokeStyle = color.value;
ctx.lineJoin = 'round';
ctx.moveTo(last_mouse.x, last_mouse.y);
ctx.lineTo(mouse.x, mouse.y);
ctx.closePath();
ctx.stroke();
};
btn.onclick = function(){
ctx.clearRect(0,0,900,500);
}
</script>
</body>
</html>
结果展示: