3. Canvas 常见用法
3.1 canvas中的色彩
对于canvas中色彩的表示,主要沿用CSS的四种方式:
- #RRGGBB 十六进制表示法
- #RGB 上述十六进制中特殊色彩的简写表达,两种表示法的对应关系为复制R,G,B位上的数值,如#0bf是#00bbff的简写表达方式
- rgb(R,G,B) 函数式的表达方式,各色彩取值为0~255
- rgba(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.οnlοad=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>