iT邦幫忙

2018 iT 邦幫忙鐵人賽
0
Modern Web

30天學習30套前端技術(2018年)系列 第 40

[十分鐘學習] p5.js - 繪畫套件

example1

p5.js是一套JavaScript函式庫,有完整的繪畫功能,並不侷限在畫布上,你可以把整個瀏覽器當作你的草稿,另外有套件可以讓你更容易去做HTML5物件互動、匯入文字欄位,影片、視訊或聲音等功能

GitHub Star: 7,000
Javascripting Overall: 87%
瀏覽器: ChromeFirefoxIE11+
RWD: 不支援(可運作)
License: GNU Lesser General Public License v2.1


《安裝》

  • CDN

      <!-- p5.js v0.6.0 -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/p5.js"></script>
    
  • npm

      $ npm install p5
    

《範例》

  • 用滑鼠繪畫

      <script>
      	function setup() {
      		createCanvas( 240, 120 ); // 建立畫布 createCanvas( 【寬度】, 【高度】 )
      	}
    
      	function draw() {
      		if ( mouseIsPressed ) { // 按住滑鼠左/右鍵時
      			fill( "blue" ); // 填滿顏色
      			strokeWeight(0); // 外框寬度
      			ellipse( mouseX, mouseY, 10, 10 ); // 繪製圓圈 ellipse( 【x軸】, 【y軸】, 【寬度】, 【高度】 )
      		}
      	}
      </script>
    

    函式列表

    函式 描述

    createCanvas( 【寬度】, 【高度】 )|建立畫布
    ellipse( 【x軸】, 【y軸】, 【寬度】, 【高度】 )|繪製圓圈
    fill( 【顏色】 )|填滿顏色


《延伸》

  1. p5.js | home
  2. p5.js | reference
  3. goldfire/howler.js: Javascript audio library for the modern web.

上一篇
[十分鐘學習] howler.js - 音源播放函式庫
下一篇
[十分鐘學習] fullPage.js - 全頁式導覽
系列文
30天學習30套前端技術(2018年)61
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言