Weitere ähnliche Inhalte
Kürzlich hochgeladen (20)
WebSocketとCanvasでオンライン対戦オセロを作ろう 第1回 基礎の基礎
- 7. WebSocket HelloWorld
<!doctype html>
var ws = require("websocket-server")
<title>hello websocket</title>
var server = ws.createServer();
<input id="name" type="textfield" onchange="send(this);" />
server.addListener("connection", function(conn){
<div id="msg"></div>
conn.addListener("message", function(name){
<script type="text/javascript">
server.broadcast("Hello " + name.toUpperCase());
var conn;
});
(function() {
});
if(window["WebSocket"]) {
server.listen(8080);
url = "ws://{ }:8080/";
conn = new WebSocket(url);
conn.onmessage = function(e) {
document.getElementById("msg").innerHTML = e.data;
}
}
})();
var send = function(m) {
if(conn) {
name = m.value;
conn.send(name);
}
}
</script>
- 8. WebSocket
HTTP
TCP
URL scheme ws:/ wss:/
/ /
OK
http://dev.ariel-networks.com/Members/inoue/websocket/
- 10. Canvas HelloWorld
<!doctype html>
<title>Hello Canvas</title>
<canvas id="canvas" width="300" height="200"></canvas>
<script>
var canvas = document.getElementById("canvas");
(function(){
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.strokeRect(20, 20, 260, 160);
ctx.beginPath();
ctx.fillStyle = 'rgb(188, 0, 45)';
ctx.arc(150, 100, 40, Math.PI*2, false);
ctx.fill();
})();
</script>
- 11. Canvas
3D
Video *1
*1: Video Canvas
→http://www.craftymind.com/factory/html5video/CanvasVideo.html
Hinweis der Redaktion
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n