实现点击绘画功能。
监听到mousemove时调用draw。
isDrawing决定调用draw时是否绘画。监听mouseup和mouseout来维护isDrawing。
在draw中绘制路径时,路径的起始点为lastX, lastY。mousedown的位置或者是上一次路径的结尾。终点为mousemove时间的e.offsetX, e.offsetY。
<canvas id="draw" width="800" height="800"></canvas>
<script>
const canvas = document.querySelector('#draw');
/* <canvas> 元素本身并没有绘制能力(它仅仅是图形的容器) - 您必须使用脚本来完成实际的绘图任务。
getContext() 方法可返回一个对象,该对象提供了用于在画布上绘图的方法和属性。 */
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
ctx.strokeStyle = '#BADA55';
ctx.lineJoin = 'round'; // 两条线相交时,所创建的拐角类型
ctx.lineCap = 'round'; // 线条的结束端点样式
ctx.lineWidth = 10;
let isDrawing = false;
let lastX = 0;
let lastY = 0;
let hue = 0;
function draw(e) {
if (!isDrawing) return;
// console.log(e);
ctx.strokeStyle = `hsl(${hue}, 100%, 50%)`;
ctx.lineWigdth = Math.abs(hue - 180);
ctx.beginPath(); // 起始一条路径,或重置当前路径
ctx.moveTo(lastX, lastY); // 把路径移动到画布中的指定点,不创建线条
ctx.lineTo(e.offsetX, e.offsetY); // 添加一个新点,然后在画布中创建从该点到最后指定点的线条
ctx.stroke(); // 绘制已定义的路径
lastX = e.offsetX;
lastY = e.offsetY;
hue++;
hue = hue % 360;
}
canvas.addEventListener('mousemove', draw);
canvas.addEventListener('mousedown', (e) => {
isDrawing = true;
[lastX, lastY] = [e.offsetX, e.offsetY];
});
canvas.addEventListener('mouseup', () => isDrawing = false);
canvas.addEventListener('mouseout', () => isDrawing = false);
</script>