JavaScript實現(xiàn)涂鴉筆功能
更新時間：2022年06月21日 14:23:34 作者：短發(fā)少女?(ˉ?ˉ?)
這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)涂鴉筆功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了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è)置一個值，確保是鼠標(biāo)點擊后才會實現(xiàn)畫圖
let drawing = false;
let x = 0, y = 0 ;
canvas.addEventListener("mousedown",(e)=>{
?? ?drawing = true;
?? ?[x,y] = [e.offsetX,e.offsetY];//這個是為了讓鼠標(biāo)點下去之后，要記住點的位置-----記住鼠標(biāo)開始的點，方便連成線
});
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)畫筆的粗細(xì)變化、畫筆顏色的變化
let colorDeg = 0; //為了實現(xiàn)使用hsl（hsl的顏色是角度取值的）的顏色取值
let lineWidth = 50; //畫筆粗細(xì)的定義
let direction = 1; //方便變大變小，取反值用的
//讓上面那些值，賦值給畫布ctx的值上
let ctx = canvas.getContext("2d");
ctx.strokeStyle = `hsl(${colorDeg},100%,50%)`;//顏色的值
ctx.lineWidth = lineWidth;//線的粗細(xì)
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%)`;
?? ?
?? ?//粗細(xì)的更改
?? ?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 重新定義鼠標(biāo)按下時的[x,y]的位置
[x,y] = [e.offsetX,e.offsetY];
2.4.5 實現(xiàn)了點的位置獲取，需要再來一個函數(shù)來連接他們
ctx.stroke();//這是畫出線的方法，沒有這個方法，畫不出線
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
eval與window.eval的差別分析，學(xué)習(xí)js的朋友可以了解下。2011-03-03
JS類中定義原型方法的兩種實現(xiàn)的區(qū)別...2007-03-03
JavaScript使用面向?qū)ο髮崿F(xiàn)的拖拽功能詳解
這篇文章主要介紹了JavaScript使用面向?qū)ο髮崿F(xiàn)的拖拽功能,結(jié)合實例形式詳細(xì)分析了javascript基于面向?qū)ο蟮耐献Чδ軐崿F(xiàn)思路、原理與具體操作技巧,需要的朋友可以參考下2019-06-06
這篇文章主要介紹了CocosCreator入門教程之用TS制作第一個游戲，對TypeScript感興趣的同學(xué)，一定要看一下2021-04-04
在qq空間，新浪微博，人人網(wǎng)等網(wǎng)絡(luò)平臺大家經(jīng)?？梢钥吹揭绘I分享功能，那么基于js代碼是如何實現(xiàn)一鍵分享的呢？下面腳本之家小編給大家介紹js實現(xiàn)一鍵分享功能的代碼，需要的朋友參考下吧2016-04-04
這篇文章主要介紹了如何處理JSON中的特殊字符,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-11-11
這篇文章主要介紹了微信小程序表單驗證功能,結(jié)合完整實例形式分析了微信小程序完成表單驗證功能所涉及的視圖與邏輯操作技巧,需要的朋友可以參考下2017-12-12
本文主要介紹了js百度地圖滾輪縮放所在點偏移問題解決，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02
bootstrap精簡教程_動力節(jié)點Java學(xué)院整理
這篇文章主要介紹了bootstrap精簡教程，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
javascript 玩轉(zhuǎn)Date對象(實例講解)
下面小編就為大家?guī)硪黄猨avascript 玩轉(zhuǎn)Date對象(實例講解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07