亚洲激情专区-91九色丨porny丨老师-久久久久久久女国产乱让韩-国产精品午夜小视频观看

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

JavaScript如何實現涂鴉筆功能

發布時間:2022-06-22 09:48:14 來源:億速云 閱讀:295 作者:iii 欄目:開發技術

今天小編給大家分享一下JavaScript如何實現涂鴉筆功能的相關知識點,內容詳細,邏輯清晰,相信大部分人都還太了解這方面的知識,所以分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后有所收獲,下面我們一起來了解一下吧。

JavaScript如何實現涂鴉筆功能

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如何實現涂鴉筆功能”這篇文章的所有內容,感謝各位的閱讀!相信大家閱讀完這篇文章都有很大的收獲,小編每天都會為大家更新不同的知識,如果還想學習更多的知識,請關注億速云行業資訊頻道。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

黑水县| 克什克腾旗| 灌南县| 惠东县| 镇远县| 南昌市| 北安市| 建平县| 灵台县| 三明市| 贵阳市| 万年县| 高清| 耒阳市| 武汉市| 金沙县| 翁牛特旗| 琼中| 襄汾县| 双峰县| 汨罗市| 沐川县| 安化县| 花垣县| 灌阳县| 翁源县| 嵊州市| 闻喜县| 慈溪市| 南投县| 洛南县| 孟州市| 拜泉县| 青河县| 桐梓县| 灵璧县| 旬邑县| 池州市| 平塘县| 东明县| 曲周县|