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

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

新聞中心

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

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

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

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

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

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

跨設(shè)備/瀏覽器的兼容性

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

服務(wù)器端

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

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

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

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

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

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

如果你進(jìn)入到本地主機(jī)：4000，會(huì)看到下列結(jié)果：

客戶端

首先，我們不妨立馬讓index.html文件搭建和運(yùn)行起來。除了一些基本的標(biāo)記外，我還加入了jQuery、現(xiàn)在從我們這個(gè)服務(wù)器提供的Socket.io JS文件、面向拖動(dòng)事件的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.

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

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

#構(gòu)建我們的應(yīng)用程序，它有自己的命名空間

 
 
 
 
    
  
  
  
  
  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") # 存儲(chǔ)上下文   
    13. 
  
  
  
  
  13.  
    14. 
  
  
  
  
  14.     # 為我們的線條畫設(shè)置一些參數(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ù)

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

 
 
 
 
    
  
  
  
  
  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.

設(shè)置客戶端Web套接字

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

 
 
 
 
    
  
  
  
  
  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.

畫布繪圖事件

激動(dòng)人心的一刻就出現(xiàn)在這里?，F(xiàn)在我們想把幾個(gè)事件綁定到我們的元素。其工作方式是，有人在畫布上繪圖時(shí)，我們立即使用draw()函數(shù)，畫到當(dāng)前畫布上，并且使用socket.io的emit，通過Web套接字發(fā)送x和y坐標(biāo)。稍后我們會(huì)看一下這個(gè)事件的服務(wù)器端部分，看看服務(wù)器如何將該數(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.

回到服務(wù)器端

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

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

 
 
 
 
    
  
  
  
  
  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套接字服務(wù)器，因?yàn)槲覀円褜?duì)它作了改動(dòng)。按Control-c命令即可終止它，輸入node server.js即可重啟它。

開始繪圖!

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

補(bǔ)充說明

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

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

【編輯推薦】

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

網(wǎng)頁標(biāo)題：用Websocket和Node.js實(shí)現(xiàn)HTML5畫布的實(shí)時(shí)繪圖
當(dāng)前網(wǎng)址：http://m.5511xx.com/article/ccdhggj.html