JavaScript實(shí)現(xiàn)涂鴉筆功能
本文實(shí)例為大家分享了JavaScript實(shí)現(xiàn)涂鴉筆的具體代碼,供大家參考,具體內(nèi)容如下
1、html部分、css部分
1.1 實(shí)現(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)聽事件進(jìn)行處理
2.2.1 首先要先設(shè)置一個值,確保是鼠標(biāo)點(diǎn)擊后才會實(shí)現(xiàn)畫圖
let drawing = false; let x = 0, y = 0 ; canvas.addEventListener("mousedown",(e)=>{ ?? ?drawing = true; ?? ?[x,y] = [e.offsetX,e.offsetY];//這個是為了讓鼠標(biāo)點(diǎn)下去之后,要記住點(diǎn)的位置-----記住鼠標(biāo)開始的點(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)畫筆的粗細(xì)變化、畫筆顏色的變化
let colorDeg = 0; //為了實(shí)現(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 以上僅實(shí)現(xiàn)畫筆的邏輯變化,我們還需要讓畫筆顯示出來
2.4.1 首先創(chuàng)建一個新的路徑
ctx.beginPath();//新路徑的起點(diǎn)。
2.4.2 記錄一開始點(diǎn)的位置
ctx.moveTo(x,y);
2.4.3 路徑的終點(diǎn)
ctx.lineTo(e.offsetX,e.offsetY);
2.4.4 重新定義鼠標(biāo)按下時的[x,y]的位置
[x,y] = [e.offsetX,e.offsetY];
2.4.5 實(shí)現(xiàn)了點(diǎn)的位置獲取,需要再來一個函數(shù)來連接他們
ctx.stroke();//這是畫出線的方法,沒有這個方法,畫不出線
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JS類中定義原型方法的兩種實(shí)現(xiàn)的區(qū)別
JS類中定義原型方法的兩種實(shí)現(xiàn)的區(qū)別...2007-03-03JavaScript使用面向?qū)ο髮?shí)現(xiàn)的拖拽功能詳解
這篇文章主要介紹了JavaScript使用面向?qū)ο髮?shí)現(xiàn)的拖拽功能,結(jié)合實(shí)例形式詳細(xì)分析了javascript基于面向?qū)ο蟮耐献Чδ軐?shí)現(xiàn)思路、原理與具體操作技巧,需要的朋友可以參考下2019-06-06bootstrap精簡教程_動力節(jié)點(diǎn)Java學(xué)院整理
這篇文章主要介紹了bootstrap精簡教程,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-07-07javascript 玩轉(zhuǎn)Date對象(實(shí)例講解)
下面小編就為大家?guī)硪黄猨avascript 玩轉(zhuǎn)Date對象(實(shí)例講解)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-07-07