用Web socket和Node.js实现HTML 5画布的实时绘图(1)
Web套接字(Web socket)和画布(Canvas)是目前实施到浏览器中的两项超酷的特性。本教程将简要介绍这两者是如何工作的，并且制作了基于Node.js和Web套接字的实时画布。为了简洁起见，我将使用CoffeeScript来编写所有代码。如果你青睐用传统的JavaScript来编写，只要看一下相应的.js文件。出于同样的原因，我也弃用了CSS。
从GitHub下载代码(https://github.com/wesbos/websocket-canvas-draw)
介绍详细内容的屏幕播放速成教程
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。
现在，我们不妨建立Web套接字服务器。创建server.coffee文件，采用下列配置。
io = require('socket.io').listen(4000)
io.sockets.on 'connection', (socket) ->
编译你的coffeescript，重新回到你的终端，输入node server.js.。现在你已有了一台通过端口4000运行的Web套接字服务器。
如果你进入到本地主机：4000，会看到下列结果：
客户端
首先，我们不妨立马让index.html文件搭建和运行起来。除了一些基本的标记外，我还加入了jQuery、现在从我们这个服务器提供的Socket.io JS文件、面向拖动事件的jQuery插件以及我们自己的scripts.js文件。
- <!DOCTYPE HTML>
- <html>
- <head>
- <meta charset="UTF-8">
- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
- <script type="text/javascript" src="js/jquery.event.drag-2.0.js"></script>
- <script src="http://localhost:4000/socket.io/socket.io.js"></script>
- <script type="text/javascript" src="scripts.js"></script>
- <link rel="stylesheet" href="style.css" />
- <title>HTML5 Canvas + Node.JS Socket.io</title>
- </head>
- <body>
- <article><!—我们的画布将在此插入--></article>
- <!-- Scripts required -->
- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
- <script type="text/javascript" src="js/jquery.event.drag-2.0.js"></script>
- <script src="http://localhost:4000/socket.io/socket.io.js"></script>
- <script type="text/javascript" src="scripts.js"></script>
- </body>
由于我们的服务器已搭建和运行起来，我们可以编写用来画到画布的一些代码。创建一个新文件，名为scripts.coffee。下面的所有代码都在App.init()方法里面执行，一旦jQuery文档准备就绪，我们就触发该方法。
创建我们的Canvas元素
#构建我们的应用程序，它有自己的命名空间
- App = {}
- ###
- 初始化
- ###
- App.init = ->
- App.canvas = document.createElement 'canvas' #创建<canvas>元素
- App.canvas.height = 400
- App.canvas.width = 800 #加大尺寸
- document.getElementsByTagName('article')[0].appendChild(App.canvas) #把它附加到DOM中
- AppApp.ctx = App.canvas.getContext("2d") # 存储上下文
- # 为我们的线条画设置一些参数
- App.ctx.fillStyle = "solid"
- App.ctx.strokeStyle = "#bada55"
- App.ctx.lineWidth = 5
- App.ctx.lineCap = "round"
- # 绘图函数
- App.draw = (x,y,type) ->
- if type is "dragstart"
- App.ctx.beginPath()
- App.ctx.moveTo(x,y)
- else if type is "drag"
- App.ctx.lineTo(x,y)
- App.ctx.stroke()
- else
- App.ctx.closePath()
- return
