WebSocket Canvas

课程要求

  • 了解WebSocket、Canvas的作用、概念

参考

WebSocket

参考

实时通信的方法

  • 轮询(Polling):ajax轮询,http协议
  • Comet:轮询的改进
  • WebSocket:tcp协议

Canvas

兼容性:ie9+

不错的参考,写的很详细

作用:使用js在网页上绘图,可绘制直线、矩形、圆形、字符以及添加图像的方法。

//创建 Canvas 元素
<canvas id="myCanvas" width="200" height="100"></canvas>

通过 JavaScript 来绘制

//绘制矩形
//fillRect(x, y, width, height)
//fillRect() 方法使用 fillStyle 属性所指定的颜色、渐变和模式来填充指定的矩形。

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");  //创建 context 对象
cxt.fillStyle="#FF0000";     //绘制一个红色的矩形
cxt.fillRect(0,0,150,75);

//绘制线条
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke(); //stroke() 方法绘制当前路径的边框

//绘制圆形
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();