JavaScript如何实现涂鸦笔功能

蜗牛 互联网技术资讯 2022-06-22 24 0

今天小编给大家分享一下JavaScript如何实现涂鸦笔功能的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。

JavaScript如何实现涂鸦笔功能  javascript 第1张

1、html部分、css部分

1.1 实现一个画框

<canvas id="draw" width="800" height="800">
    
</canvas>

1.2 css部分

<style>
    html,body{
        margin:0;
    }
    canvas{
        border:1px solid black;
    }
</style>

2、JS部分

2.1 先让canvas是个画框,然后处理事件监听

const canvas = document.querySelector("#draw");

canvas.addEventListener("mousedown",(e)=>{
    
});

canvas.addEventListener("mouseup",(e)=>{

});

canvas.addEventListener("mouseover",(e)=>{

});

canvas.addEventListener("mouseleave",(e)=>{

});

2.2 对监听事件进行处理

2.2.1 首先要先设置一个值,确保是鼠标点击后才会实现画图

let drawing = false;
let x = 0, y = 0 ;

canvas.addEventListener("mousedown",(e)=>{
    drawing = true;
    [x,y] = [e.offsetX,e.offsetY];//这个是为了让鼠标点下去之后,要记住点的位置-----记住鼠标开始的点,方便连成线
});

canvas.addEventListener("mouseup",(e)=>{
    drawing = false;
});

canvas.addEventListener("mouseover",(e)=>{
    //判断如果drawing为真,就返回值,console一下
    if(!drawing) return;
    console.log("draw");

});

canvas.addEventListener("mouseleave",(e)=>{
    drawing = false;
});

2.3 实现画笔的粗细变化、画笔颜色的变化

let colorDeg = 0; //为了实现使用hsl(hsl的颜色是角度取值的)的颜色取值
let lineWidth = 50; //画笔粗细的定义
let direction = 1; //方便变大变小,取反值用的

//让上面那些值,赋值给画布ctx的值上
let ctx = canvas.getContext("2d");
ctx.strokeStyle = `hsl(${colorDeg},100%,50%)`;//颜色的值
ctx.lineWidth = lineWidth;//线的粗细
ctx.lineCap = "round"; 
ctx.lineJoin = "round"; 


canvas.addEventListener("mouseover",(e)=>{
    //判断如果drawing为真,就返回值,console一下
    if(!drawing) return;
    console.log("draw");
    
    //颜色操作
    colorDeg = colorDeg < 360 ? colorDeg + 1 : 0 ;
    ctx.strokeStyle = `hsl(${colorDeg},100%,50%)`;
    
    //粗细的更改
    if(lineWidth < 1 || lineWidth > 50){
        direction =  direction * (-1);
    }

    lineWidth += direction;
    ctx.lineWidth = lineWidth;
    
});

2.4 以上仅实现画笔的逻辑变化,我们还需要让画笔显示出来

2.4.1 首先创建一个新的路径

ctx.beginPath();//新路径的起点。

2.4.2 记录一开始点的位置

ctx.moveTo(x,y);

2.4.3 路径的终点

ctx.lineTo(e.offsetX,e.offsetY);

2.4.4 重新定义鼠标按下时的[x,y]的位置

[x,y] = [e.offsetX,e.offsetY];

2.4.5 实现了点的位置获取,需要再来一个函数来连接他们

ctx.stroke();//这是画出线的方法,没有这个方法,画不出线

以上就是“JavaScript如何实现涂鸦笔功能”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注蜗牛博客行业资讯频道。

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:niceseo99@gmail.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

评论