JavaScript實(shí)現(xiàn)涂鴉筆功能
本文實(shí)例為大家分享了JavaScript實(shí)現(xiàn)涂鴉筆的具體代碼，供大家參考，具體內(nèi)容如下
1、html部分、css部分
1.1 實(shí)現(xiàn)一個(gè)畫(huà)框
<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是個(gè)畫(huà)框,然后處理事件監(jiān)聽(tīng)
const canvas = document.querySelector("#draw");
canvas.addEventListener("mousedown",(e)=>{
?? ?
});
canvas.addEventListener("mouseup",(e)=>{
});
canvas.addEventListener("mouseover",(e)=>{
});
canvas.addEventListener("mouseleave",(e)=>{
});2.2 對(duì)監(jiān)聽(tīng)事件進(jìn)行處理
2.2.1 首先要先設(shè)置一個(gè)值，確保是鼠標(biāo)點(diǎn)擊后才會(huì)實(shí)現(xiàn)畫(huà)圖
let drawing = false;
let x = 0, y = 0 ;
canvas.addEventListener("mousedown",(e)=>{
?? ?drawing = true;
?? ?[x,y] = [e.offsetX,e.offsetY];//這個(gè)是為了讓鼠標(biāo)點(diǎn)下去之后，要記住點(diǎn)的位置-----記住鼠標(biāo)開(kāi)始的點(diǎn)，方便連成線
});
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 實(shí)現(xiàn)畫(huà)筆的粗細(xì)變化、畫(huà)筆顏色的變化
let colorDeg = 0; //為了實(shí)現(xiàn)使用hsl（hsl的顏色是角度取值的）的顏色取值
let lineWidth = 50; //畫(huà)筆粗細(xì)的定義
let direction = 1; //方便變大變小，取反值用的
//讓上面那些值，賦值給畫(huà)布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 以上僅實(shí)現(xiàn)畫(huà)筆的邏輯變化，我們還需要讓畫(huà)筆顯示出來(lái)
2.4.1 首先創(chuàng)建一個(gè)新的路徑
ctx.beginPath();//新路徑的起點(diǎn)。
2.4.2 記錄一開(kāi)始點(diǎn)的位置
ctx.moveTo(x,y);
2.4.3 路徑的終點(diǎn)
ctx.lineTo(e.offsetX,e.offsetY);
2.4.4 重新定義鼠標(biāo)按下時(shí)的[x,y]的位置
[x,y] = [e.offsetX,e.offsetY];
2.4.5 實(shí)現(xiàn)了點(diǎn)的位置獲取，需要再來(lái)一個(gè)函數(shù)來(lái)連接他們
ctx.stroke();//這是畫(huà)出線的方法，沒(méi)有這個(gè)方法，畫(huà)不出線
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Bootstrap Table實(shí)現(xiàn)定時(shí)刷新數(shù)據(jù)的方法
這篇文章主要介紹了Bootstrap Table實(shí)現(xiàn)定時(shí)刷新數(shù)據(jù)的方法，在這里小編比較推薦使用第二種方法，需要的朋友參考下吧2018-08-08
這篇文章給大家分享了基于bootstrap打造的特色進(jìn)度條效果，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2017-05-05
微信小程序scroll-view點(diǎn)擊項(xiàng)自動(dòng)居中效果的實(shí)現(xiàn)
這篇文章主要介紹了微信小程序scroll-view點(diǎn)擊項(xiàng)自動(dòng)居中效果的實(shí)現(xiàn)代碼，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-03-03
下面小編就為大家?guī)?lái)一篇js 彈出虛擬鍵盤修改密碼的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10
js如何獲取file控件的完整路徑具體實(shí)現(xiàn)代碼
需要隱藏input file然后獲取它的值，但連jquery都無(wú)法獲取它的值，下面與大家分享下使用js的具體獲取方法，感興趣的朋友可以參考下哈2013-05-05
windows系統(tǒng)下簡(jiǎn)單nodejs安裝及環(huán)境配置
相信對(duì)于很多關(guān)注javascript發(fā)展的同學(xué)來(lái)說(shuō),nodejs已經(jīng)不是一個(gè)陌生的詞眼,這里不想談太多的nodejs的相關(guān)信息。只說(shuō)一下，windows系統(tǒng)下簡(jiǎn)單nodejs環(huán)境配置2013-01-01
如何實(shí)現(xiàn)chrome瀏覽器關(guān)閉頁(yè)面時(shí)彈出“確定要離開(kāi)此面嗎？”
這篇文章主要介紹了如何實(shí)現(xiàn)chrome瀏覽器關(guān)閉頁(yè)面時(shí)彈出“確定要離開(kāi)此面嗎？”的方法以及相關(guān)資料,需要的朋友可以參考下2015-03-03
這篇文章主要給大家介紹了關(guān)于iframe跨域POST提交的相關(guān)資料,文中給出了詳細(xì)的介紹與示例代碼，相信對(duì)大家的學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值，需要的朋友可以一起來(lái)學(xué)習(xí)學(xué)習(xí)。2017-01-01
微信小程序?qū)Ш綑诟S滑動(dòng)效果的實(shí)現(xiàn)代碼
這篇文章主要介紹了小程序?qū)Ш綑诟S滑動(dòng)效果，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-05-05
一文帶你搞懂JavaScript中轉(zhuǎn)義字符的使用
說(shuō)起轉(zhuǎn)義字符，大家最先想到的肯定是使用反斜杠，這也是我們最常見(jiàn)的，很多編程語(yǔ)言都支持。除了反斜杠以外，在前端開(kāi)發(fā)中，還有其他幾種轉(zhuǎn)義字符，也是較常見(jiàn)的，本文將對(duì)這些做一個(gè)總結(jié)2023-02-02