长按鼠标移动，画出鼠标轨迹

HTML：

<div class='wrapper'>
　　<canvas class='base7' width='250' height='250'></canvas>
</div>

 

 

CSS：

.wrapper>canvas{
　　margin:50px 0 0 60px;
　　border:1px solid #ccc;
}

 

tips:： css中“>”是css3特有的选择器，A>B 表示选择A元素的所有子B元素。 与A B的区别在于，A B选择所有后代元素，而A>B只选择一代。

JS：

获取当前鼠标相对于canvas的坐标。鼠标默认是获取当前窗口的相对坐标，而canvas可以位于页面上的任何位置，所以需要通过计算才能得到真实的鼠标坐标。

// 通常情况下，可以是x - rect.left和y - rect.top。但为什么实际上却是x - rect.left * (canvas.width/rect.width)呢？canvas.width/rect.width表示判断canvas中存在的缩放行为，求出缩放的倍数。
const windowToCanvas = (canvas,x,y)=>{
　　let rect = canvas.getBoundingClientRect();
　　return {
　　　　x:x-rect.left*(canvas.width/rect.width),
　　　　y:y-rect.top*(canvas.height/rect.height)
　　}

}
// tips：关于getBoundingClientRect()的用法和解释可以参考：https://blog.csdn.net/hl971115/article/details/109530742

在main.js中，我们写一个自执行函数

(function(){
　　let cas = document.querySelector('.base7');
　　if(!cas || !cas.getContext){
　　　　return false;
　　}else{
　　　　let ctx = cas.getContext('2d');
　　　　let isAllowDrawLine = false;
　　　　cas.onmousedown=function(e){
　　　　　　isAllowDrawLine = true;
　　　　　　let ele = windowToCanvas(cas,e.clientX,e.clientY);
　　　　　　let {x,y}=ele;
　　　　　　ctx.moveTo(x,y);

　　　　　　// 小技巧：onmousedown内部添加一个onmousemove事件，就能监听长按鼠标并移动事件啦（不要忘记在onmouseup事件中消除绘制路径功能，否则轨迹会随着鼠标移动不停增加）
　　　　　　cas.onmousemove = (e)=>{
　　　　　　　　if(isAllowDrawLine){
　　　　　　　　let ele = windowToCanvas(cas,e.clientX,e.clientY);
　　　　　　　　let {x,y}=ele;
　　　　　　　　ctx.lineTo(x,y);
　　　　　　　　ctx.stroke();
　　　　　　　　}
　　　　　　}
　　　　}
　　　　cas.onmouseup = ()=>{
　　　　isAllowDrawLine = false;
　　}
}
})()

 

 

 

 

 

 

参考：https://www.jb51.net/html5/599065.html