Canvas做游戏实践分享(三)
3. Canvas 常见用法3.1 canvas中的色彩
??? ??? 对于canvas中色彩的表示，主要沿用CSS的四种方式：
#RRGGBB?? 十六进制表示法#RGB?? 上述十六进制中特殊色彩的简写表达，两种表示法的对应关系为复制R，G，B位上的数值，如#0bf是#00bbff的简写表达方式rgb(R,G,B)?? 函数式的表达方式，各色彩取值为0~255rgba(R,G,B,A)?? 在上述基础上添加了对透明度的支持虽然最终色彩是以字符串的方式表示，但实际操作时还是会用数字来描述色彩。由于每一种色彩均使用8个bit来表示，所以以上色彩表示方式称为24 bit表示法。
16进制色彩的生成
???? 在JavaScript中，16进制表法为0x与对应的16进制数值。如0xf为十进制中的15。如果我们使用控制台来打印一个16进制的数，将会默认得到其十进制表示。如
?
console.log(0xFF55F3);
将会输出16733683。同时JavaScript的Number对象提供的toString方法，在指定参数（进制数）后，可以实现进制的转换。如：
?
var color=(16733683).toString(16);
?将会得到color的值为ff55f3。于是，我们得到了色彩字符串与对应十进制数字的相互转换方式：
色彩字符串转数字var color=’#ff00ff’;var colorNumber=window.parseInt(color.slice(1),16);?任意数字转色彩字符
var colorNumber=16711935;var color=’#’+colorNumber.toString(16);
?
很多时候，我们需要独立操作24bit色彩中的R,G,B三色值，此时就需要将色彩进行处理。可以使用“移位”符号和按位“与”符号，有如下的变换公式：
var red=color >> 16 && 0xff;var green=color >> 8 && 0xff;var blue=color && 0xff;
?对应地，如果我们已知R,G,B三色值，可以使用如下变换公式来组合为24bit色彩值
var color=red<<16 | green <<8 | blue;
?通过上面的知识，我们很容易就得到几个对色彩进行处理的工具函数：
utils.getRandomColor=function(){var colorNumber=Math.random()*0xffffff|0;var color='#'+('00000'+colorNumber.toString(16)).substr(-6); return color;}?【注】使用位运算符|可以实现去除数字小数部分的功能：1.1|0=1??? 11.1|0=11?? -12.6|0=-12
3.2 canvas上下文及clearRect????? Canvas标签的大多数API的调用，都依赖于其上下文对象。很容易就能获取上下文对象，如：
var canvas=document.getElementById(“canvas”);var context=canvas.getContext(canvas);
?
??? 前面介绍到，canvas 实现的游戏主要是逐帧动画。大多数游戏场景中，在每一帧开始前，都需要清除之前帧的所有信息，此时就会用到clearRect方法。如：
context.clearRect(0,0,canvas.width,canvas.height);
?此时，我们是将整个画布给清空。当然，效率更高的方案是只清除需要清除的区块，这就需要具体与游戏的逻辑结合起来。
?
3.3 使用直线绘制图形?? ?使用canvas中的直线（调用方法lineTo）可以实现很多基础图形的绘制。 按照API的说明，在每次绘制一个新的路径的时候，使用beginPath方法，在绘制完路径后，使用closePath方法即可完成起点到终点由一条直线连接。如果需要填充色，使用fill方法，如需要边缘勾勒，使用stroke方法。
?? ?如下是一个简单的模拟画图板的小应用：
<!doctype html><html><head><meta charset="utf-8"><title>Canvas</title><style type="text/css">body {margin: 0px;padding: 0px;}#canvas {margin: 0px;padding: 0px;border: 1px solid #000000;}</style></head><body><canvas id="canvas" width="400" height="400">当前浏览器不支持canvas</canvas><script type="text/javascript" src="utils.js"></script><script type="text/javascript" src="arrow.js"></script><script type="text/javascript">window.onload=function(){var canvas=document.getElementById("canvas");var context=canvas.getContext("2d");var mouse=utils.captureMousePosition(canvas); //添加mousedown监听事件，在用户鼠标按下后开始画线，并注册mousemove事件canvas.addEventListener("mousedown",function(event){context.beginPath();context.moveTo(mouse.x, mouse.y);canvas.addEventListener("mousemove",onMouseMove,false);},false); ?//在鼠标移动时划线function onMouseMove(event){context.lineTo(mouse.x,mouse.y);context.stroke();} //在鼠标按键松开后，注销鼠标移动事件canvas.addEventListener("mouseup",function(event){canvas.removeEventListener("mousemove",onMouseMove,false);},false);};</script></body></html>??