p5.js入門教程之鼠標(biāo)交互的示例

更新時(shí)間：2018年03月16日 15:40:31 作者：西河某人

這篇文章主要介紹了p5.js入門教程之鼠標(biāo)交互的示例,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

本文介紹了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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

js控制div層的疊加簡(jiǎn)單方法
下面小編就為大家?guī)硪黄猨s控制div層的疊加簡(jiǎn)單方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-10-10
JS判斷文本框內(nèi)容改變事件的簡(jiǎn)單實(shí)例
本篇文章主要是對(duì)JS判斷文本框內(nèi)容改變事件的簡(jiǎn)單實(shí)例進(jìn)行了詳細(xì)的介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助
2014-03-03
javascript實(shí)現(xiàn)驗(yàn)證IP地址等相關(guān)信息代碼
本文給大家分享的是一組判斷IP地址是否合法，判斷子網(wǎng)掩碼是否合法，驗(yàn)證輸入的網(wǎng)關(guān)地址是否合法的javascript代碼，十分的簡(jiǎn)單實(shí)用，有需要的小伙伴可以參考下。
2015-05-05
js實(shí)現(xiàn)的格式化數(shù)字和金額功能簡(jiǎn)單示例
這篇文章主要介紹了js實(shí)現(xiàn)的格式化數(shù)字和金額功能,結(jié)合簡(jiǎn)單實(shí)例形式分析了javascript數(shù)字字符串轉(zhuǎn)換、運(yùn)算等相關(guān)操作技巧,需要的朋友可以參考下
2019-07-07
從javascript語言本身談項(xiàng)目實(shí)戰(zhàn)
從javascript語言本身談項(xiàng)目實(shí)戰(zhàn)...
2006-12-12
JavaScript解八皇后問題的方法總結(jié)
在國(guó)際象棋的8*8棋盤上如何擺放8個(gè)皇后使任一皇后無法吃掉其他皇后的問題便是最初的八皇后問題,此后也被不斷擴(kuò)展而作為經(jīng)典的算法題目,這里我們就來看一下JavaScript解八皇后問題的方法總結(jié)
2016-06-06
javascript彈出頁面回傳值的方法
這篇文章主要介紹了javascript彈出頁面回傳值的方法,實(shí)例分析了由a1.html彈出的b1.html回傳值的實(shí)現(xiàn)方法,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
2015-01-01
js對(duì)象合并與數(shù)組合并綜合應(yīng)用舉例
這篇文章主要給大家介紹了關(guān)于js對(duì)象合并與數(shù)組合并綜合應(yīng)用舉例的相關(guān)資料,本文將介紹常見的JS對(duì)象合并和數(shù)組合并方法,幫助讀者更好地理解和運(yùn)用這些方法,需要的朋友可以參考下
2023-11-11
基于JavaScript實(shí)現(xiàn)前端數(shù)據(jù)多條件篩選功能
這篇文章主要為大家詳細(xì)介紹了基于JavaScript實(shí)現(xiàn)前端數(shù)據(jù)多條件篩選功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-09-09
javascript實(shí)現(xiàn)回車鍵提交表單方法總結(jié)
這篇文章主要介紹了javascript實(shí)現(xiàn)回車鍵提交表單方法,實(shí)例總結(jié)了純javascript與jQuery的實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-01-01