日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關咨詢
選擇下列產(chǎn)品馬上在線溝通
服務時間：8:30-17:00
你可能遇到了下面的問題
關閉右側工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
用Websocket和Node.js實現(xiàn)HTML5畫布的實時繪圖

Web套接字(Web socket)和畫布(Canvas)是目前實施到瀏覽器中的兩項超酷的特性。本教程將簡要介紹這兩者是如何工作的，并且制作了基于Node.js和Web套接字的實時畫布。為了簡潔起見，我將使用CoffeeScript來編寫所有代碼。如果你青睞用傳統(tǒng)的JavaScript來編寫，只要看一下相應的.js文件。出于同樣的原因，我也棄用了CSS。

專注于為中小企業(yè)提供網(wǎng)站設計制作、網(wǎng)站建設服務,電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)興文免費做網(wǎng)站提供優(yōu)質(zhì)的服務。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了1000多家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設實現(xiàn)規(guī)模擴充和轉(zhuǎn)變。

從GitHub下載代碼(https://github.com/wesbos/websocket-canvas-draw)

介紹詳細內(nèi)容的屏幕播放速成教程

http://www.youtube.com/watch?feature=player_embedded&v=n7wQsLu_k00

跨設備/瀏覽器的兼容性

http://www.youtube.com/watch?v=oI9AahO9vDY&feature=player_embedded

服務器端

我們要做的第一件事就是建立一臺Web套接字服務器。為此，我們要用到Node.js和模塊Socket.io。Socket.io使得搭建和運行Web套接字服務器的任務超容易完成。它甚至為不支持原生Web套接字的瀏覽器提供了可退回到Flash的功能(Flash fallback)。在本教程中，我們將只使用支持元素的瀏覽器。

如果你之前還沒有安裝Socket.io，就要確保已安裝，為此需要往你的終端中輸入npm install socket.io。

現(xiàn)在，我們不妨建立Web套接字服務器。創(chuàng)建server.coffee文件，采用下列配置。

io = require('socket.io').listen(4000)

io.sockets.on 'connection', (socket) ->

編譯你的coffeescript，重新回到你的終端，輸入node server.js.。現(xiàn)在你已有了一臺通過端口4000運行的Web套接字服務器。

如果你進入到本地主機：4000，會看到下列結果：

客戶端

首先，我們不妨立馬讓index.html文件搭建和運行起來。除了一些基本的標記外，我還加入了jQuery、現(xiàn)在從我們這個服務器提供的Socket.io JS文件、面向拖動事件的jQuery插件以及我們自己的scripts.js文件。

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2.  
    3. 
  
  
  
  
  3.  
    4. 
  
  
  
  
  4.      
    5. 
  
  
  
  
  5.      
    6. 
  
  
  
  
  6.      
    7. 
  
  
  
  
  7.      
    8. 
  
  
  
  
  8.      
    9. 
  
  
  
  
  9.      
    10. 
  
  
  
  
  10.  
    11. 
  
  
  
  
  11.     HTML5 Canvas + Node.JS Socket.io 
    12. 
  
  
  
  
  12.  
    13. 
  
  
  
  
  13.  
    14. 
  
  
  
  
  14.     
     
    15. 
  
  
  
  
  15.  
    16. 
  
  
  
  
  16.      
    17. 
  
  
  
  
  17.      
    18. 
  
  
  
  
  18.      
    19. 
  
  
  
  
  19.      
    20. 
  
  
  
  
  20.      
    21. 
  
  
  
  
  21.  
    22.

由于我們的服務器已搭建和運行起來，我們可以編寫用來畫到畫布的一些代碼。創(chuàng)建一個新文件，名為scripts.coffee。下面的所有代碼都在App.init()方法里面執(zhí)行，一旦jQuery文檔準備就緒，我們就觸發(fā)該方法。

創(chuàng)建我們的Canvas元素

#構建我們的應用程序，它有自己的命名空間

 
 
 
 
    
  
  
  
  
  1. App = {}  
    2. 
  
  
  
  
  2.  
    3. 
  
  
  
  
  3. ###  
    4. 
  
  
  
  
  4.     初始化  
    5. 
  
  
  
  
  5. ###  
    6. 
  
  
  
  
  6. App.init = -> 
    7. 
  
  
  
  
  7.     App.canvas = document.createElement 'canvas' #創(chuàng)建元素  
    8. 
  
  
  
  
  8.     App.canvas.height = 400 
    9. 
  
  
  
  
  9.     App.canvas.width = 800  #加大尺寸  
    10. 
  
  
  
  
  10.     document.getElementsByTagName('article')[0].appendChild(App.canvas) #把它附加到DOM中  
    11. 
  
  
  
  
  11.  
    12. 
  
  
  
  
  12.     AppApp.ctx = App.canvas.getContext("2d") # 存儲上下文   
    13. 
  
  
  
  
  13.  
    14. 
  
  
  
  
  14.     # 為我們的線條畫設置一些參數(shù)  
    15. 
  
  
  
  
  15.     App.ctx.fillStyle = "solid" 
    16. 
  
  
  
  
  16.     App.ctx.strokeStyle = "#bada55" 
    17. 
  
  
  
  
  17.     App.ctx.lineWidth = 5 
    18. 
  
  
  
  
  18.     App.ctx.lineCap = "round" 
    19. 
  
  
  
  
  19.  
    20. 
  
  
  
  
  20.     # 繪圖函數(shù)  
    21. 
  
  
  
  
  21.     App.draw = (x,y,type) -> 
    22. 
  
  
  
  
  22.         if type is "dragstart"  
    23. 
  
  
  
  
  23.             App.ctx.beginPath()  
    24. 
  
  
  
  
  24.             App.ctx.moveTo(x,y)  
    25. 
  
  
  
  
  25.         else if type is "drag"  
    26. 
  
  
  
  
  26.             App.ctx.lineTo(x,y)  
    27. 
  
  
  
  
  27.             App.ctx.stroke()  
    28. 
  
  
  
  
  28.         else  
    29. 
  
  
  
  
  29.             App.ctx.closePath()  
    30. 
  
  
  
  
  30.     return  
    31.

#p#

畫到畫布函數(shù)

由于畫到畫布需要建立、移動和關閉路徑，我創(chuàng)建了一個短小的函數(shù)，用來連接到jQuery拖動開始事件和拖動事件。

 
 
 
 
    
  
  
  
  
  1. # 繪圖函數(shù)  
    2. 
  
  
  
  
  2. App.draw = (x,y,type) -> 
    3. 
  
  
  
  
  3.     if type is "dragstart"  
    4. 
  
  
  
  
  4.         App.ctx.beginPath()  
    5. 
  
  
  
  
  5.         App.ctx.moveTo(x,y)  
    6. 
  
  
  
  
  6.     else if type is "drag"  
    7. 
  
  
  
  
  7.         App.ctx.lineTo(x,y)  
    8. 
  
  
  
  
  8.         App.ctx.stroke()  
    9. 
  
  
  
  
  9.     else  
    10. 
  
  
  
  
  10.         App.ctx.closePath()  
    11. 
  
  
  
  
  11. return  
    12.

設置客戶端Web套接字

由于我們已將文件添加到http://localhost:4000/socket.io/socket.io.js，我們就能創(chuàng)建一個對象，以便通過該對象發(fā)送數(shù)據(jù)。只編寫了幾行代碼，我們就創(chuàng)建了App.socket對象，并且綁定到名為“draw”的任何入站W(wǎng)eb套接字事件。我們稍后對此會有介紹。

 
 
 
 
    
  
  
  
  
  1. # 套接字!  
    2. 
  
  
  
  
  2. App.socket = io.connect('http://localhost:4000')  
    3. 
  
  
  
  
  3.  
    4. 
  
  
  
  
  4. App.socket.on 'draw', (data) -> 
    5. 
  
  
  
  
  5.     App.draw(data.x,data.y,data.type)  
    6.

畫布繪圖事件

激動人心的一刻就出現(xiàn)在這里。現(xiàn)在我們想把幾個事件綁定到我們的元素。其工作方式是，有人在畫布上繪圖時，我們立即使用draw()函數(shù)，畫到當前畫布上，并且使用socket.io的emit，通過Web套接字發(fā)送x和y坐標。稍后我們會看一下這個事件的服務器端部分，看看服務器如何將該數(shù)據(jù)發(fā)送到所有打開的窗口。

 
 
 
 
    
  
  
  
  
  1. ###  
    2. 
  
  
  
  
  2.     繪圖事件  
    3. 
  
  
  
  
  3. ###  
    4. 
  
  
  
  
  4. $('canvas').live 'drag dragstart dragend', (e) -> 
    5. 
  
  
  
  
  5.     type = e.handleObj.type  
    6. 
  
  
  
  
  6.     offset = $(this).offset()  
    7. 
  
  
  
  
  7.  
    8. 
  
  
  
  
  8.     ee.offsetX = e.layerX - offset.left  
    9. 
  
  
  
  
  9.     ee.offsetY = e.layerY - offset.top  
    10. 
  
  
  
  
  10.     x = e.offsetX  
    11. 
  
  
  
  
  11.     y = e.offsetY  
    12. 
  
  
  
  
  12.     App.draw(x,y,type)  
    13. 
  
  
  
  
  13.     App.socket.emit('drawClick', { x : x, y : y, type : type})  
    14. 
  
  
  
  
  14.     return 
    15.

回到服務器端

由于我們知道通過Web套接字發(fā)送x、y和事件類型，我們需要在服務器端進行一番處理。我們要做的就是，把該數(shù)據(jù)回過頭來發(fā)送到瀏覽器打開的另外每個人。

我們更新后的server.coffee文件現(xiàn)在看來像這樣。我們先等待連接事件，然后等待由瀏覽器發(fā)送的“drawClick”事件。發(fā)送完畢后，我們把數(shù)據(jù)發(fā)送到瀏覽器打開的另外每個人。我們之前編寫的服務器端腳本然后就會繪制畫布。

 
 
 
 
    
  
  
  
  
  1. io = require('socket.io').listen(4000)  
    2. 
  
  
  
  
  2.  
    3. 
  
  
  
  
  3. io.sockets.on 'connection', (socket) -> 
    4. 
  
  
  
  
  4.     socket.on 'drawClick', (data) -> 
    5. 
  
  
  
  
  5.         socket.broadcast.emit 'draw',{ x : data.x, y : data.y, type: data.type}  
    6. 
  
  
  
  
  6.         return  
    7. 
  
  
  
  
  7.     return 
    8.

你現(xiàn)在需要重啟Web套接字服務器，因為我們已對它作了改動。按Control-c命令即可終止它，輸入node server.js即可重啟它。

開始繪圖!

一旦你完全了解了這一切的工作原理，就可以在支持Web套接字和畫布的任何Web瀏覽器(截至截稿時包括Chrome、Firefox、Safari、Opera和IE9)中打開你的index.html文件。訪問http://caniuse.com/#search=canvas，即可獲得更多的支持信息。

補充說明

由于這是一個非?；镜难菔?，存在幾個局限性，不過再編寫一點代碼，就很容易克服。目前，畫布只支持每次一個人繪圖;如果兩個或多個人同時繪圖，畫布就會被零星地繪制。另外，添加工具方面肯定也有很大的改進余地，比如缺少畫筆、顏色、橡皮檫和PNG導出。

原文：http://wesbos.com/html5-canvas-websockets-nodejs/
 

【編輯推薦】

  1. 走近Node.js的異步代碼設計
  2. 使用Node.js開發(fā)多人玩的HTML 5游戲
  3. Node.js提速指南
  4. Node.js專區(qū)
  5. 使用JavaScript和Canvas寫一個游戲框架

文章名稱：用Websocket和Node.js實現(xiàn)HTML5畫布的實時繪圖
文章來源：http://m.5511xx.com/article/ccdhggj.html