p5.js入門教程之鼠標(biāo)交互的示例
本文介紹了p5.js入門教程之鼠標(biāo)交互的示例,分享給大家,具體如下:
一、鼠標(biāo)交互常用關(guān)鍵詞
p5.js提供了許多鼠標(biāo)操作用的關(guān)鍵詞與函數(shù),常用的有:
mouseIsPressed:關(guān)鍵詞,若鼠標(biāo)按下則為true,反之為false
mouseButton:關(guān)鍵詞,用來判斷鼠標(biāo)按下的是哪個(gè)鍵
案例如下:
function setup() { createCanvas(400, 400); } function draw() { background(220); if (mouseIsPressed) { textAlign(CENTER); textSize(30); if (mouseButton == LEFT) text("LEFT",200,height/2); if (mouseButton == RIGHT) text("RIGHT",200,height/2); if (mouseButton == CENTER) text("CENTER",200,height/2); } }
當(dāng)鼠標(biāo)按下左、中、右鍵時(shí),分別會(huì)在屏幕上顯示“LEFT”、“CENTER”、“RIGHT"。
查看效果:
http://alpha.editor.p5js.org/full/BkEcwrdUb
二、鼠標(biāo)交互常用函數(shù)
鼠標(biāo)操作常用函數(shù)如下,還有:
mouseClicked():函數(shù),鼠標(biāo)點(diǎn)擊時(shí)觸發(fā)一次
mousePressed():函數(shù),鼠標(biāo)按下時(shí)觸發(fā)一次
mouseReleased():函數(shù),鼠標(biāo)松開時(shí)觸發(fā)一次
我們可以用這些函數(shù)控制何時(shí)在屏幕上顯示圖形,案例如下:
var showEllipse=false; var showRect=false; function setup() { createCanvas(400, 400); } function draw() { background(220); if (mouseIsPressed){ ellipse(50, height/2, 50, 50); } if(showEllipse){ ellipse(200, height/2, 50, 50); } if(showRect){ rectMode(CENTER); rect(350,height/2,50,50); } } function mouseClicked(){ showEllipse=!showEllipse; } function mousePressed(){ showRect=true; } function mouseReleased(){ showRect=false; }
查看效果:http://alpha.editor.p5js.org/full/BkHEY8OUZ
三、鼠標(biāo)拖拽物體
靈活運(yùn)用以上關(guān)鍵字和函數(shù),可以做出許多功能,這里舉一例,用鼠標(biāo)拖拽物體。
代碼如下:
var x=200; var y=200 var r=50; function setup() { createCanvas(400, 400); } function draw() { background(220); if(mouseIsPressed&&dist(mouseX,mouseY,x,y)<r){ x=mouseX; y=mouseY; } ellipse(x,y,r,r); }
查看效果:http://alpha.editor.p5js.org/full/SJ6gbPdLb
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Javascript 類的繼承實(shí)現(xiàn)代碼
JavaScript中類的學(xué)習(xí),從基本類繼承過來方法。2009-07-07JavaScript中的一些實(shí)用小技巧總結(jié)
這篇文章主要給大家總結(jié)介紹了關(guān)于JavaScript中的一些實(shí)用小技巧,文中通過示例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用JavaScript具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04JS+HTML實(shí)現(xiàn)自定義上傳圖片按鈕并顯示圖片功能的方法分析
這篇文章主要介紹了JS+HTML實(shí)現(xiàn)自定義上傳圖片按鈕并顯示圖片功能的方法,結(jié)合實(shí)例形式分析了JavaScript圖片上傳、編碼轉(zhuǎn)換等相關(guān)操作技巧,需要的朋友可以參考下2020-02-02抽出www.templatemonster.com的鼠標(biāo)懸停加載大圖模板的代碼
抽出www.templatemonster.com的鼠標(biāo)懸停加載大圖模板的代碼...2007-07-07JS動(dòng)態(tài)添加元素及綁定事件造成程序重復(fù)執(zhí)行解決
這篇文章主要給大家介紹了關(guān)于JS動(dòng)態(tài)添加元素及綁定事件造成程序重復(fù)執(zhí)行的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來一起看看吧。2017-12-12JavaScript數(shù)據(jù)結(jié)構(gòu)與算法之基本排序算法定義與效率比較【冒泡、選擇、插入排序】
這篇文章主要介紹了JavaScript數(shù)據(jù)結(jié)構(gòu)與算法之基本排序算法定義與效率比較,結(jié)合實(shí)例形式詳細(xì)總結(jié)分析了javascript排序算法中的冒泡、選擇、插入等排序算法原理與操作技巧,需要的朋友可以參考下2019-02-028 行 Node.js 代碼實(shí)現(xiàn)代理服務(wù)器
JavaScript 前后端通吃,在全棧開發(fā)領(lǐng)域具有獨(dú)特的優(yōu)勢。今天就來看看作為服務(wù)端語言的 JavaScript,完成一個(gè)簡單的代理服務(wù)器功能是多么容易。2016-12-12