欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript實現(xiàn)涂鴉筆功能

 更新時間：2022年06月21日 14:23:34   作者：短發(fā)少女?(ˉ?ˉ?)  
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)涂鴉筆功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了JavaScript實現(xiàn)涂鴉筆的具體代碼，供大家參考，具體內(nèi)容如下

1、html部分、css部分

1.1 實現(xiàn)一個畫框

<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是個畫框,然后處理事件監(jiān)聽

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

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

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

});

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

});

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

});

2.2 對監(jiān)聽事件進行處理

2.2.1 首先要先設(shè)置一個值，確保是鼠標點擊后才會實現(xiàn)畫圖

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 實現(xiàn)畫筆的粗細變化、畫筆顏色的變化

let colorDeg = 0; //為了實現(xiàn)使用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 以上僅實現(xiàn)畫筆的邏輯變化，我們還需要讓畫筆顯示出來

2.4.1 首先創(chuàng)建一個新的路徑

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 實現(xiàn)了點的位置獲取，需要再來一個函數(shù)來連接他們

ctx.stroke();//這是畫出線的方法，沒有這個方法，畫不出線

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論