Canvas做游戏实践分享(三) -

blessdyb

浏览: 235689 次
性别:
来自: 北京

最近访客更多访客>>

a1111b2222

sty00

ahbbzh

daemon_x2013

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

Canvas做游戏实践分享(三)

博客分类：

canvas游戏开发

canvas javascript html5 games webapp

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.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>

1
顶

0
踩

分享到：

Canvas做游戏实践分享(四) | Canvas做游戏实践分享(二)

2012-02-11 20:58
浏览 2313
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

Canvas做游戏实践分享(三)

3. Canvas 常见用法

3.1 canvas中的色彩

3.2 canvas上下文及clearRect

3.3 使用直线绘制图形

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

Canvas做游戏实践分享(三)

3. Canvas 常见用法

3.1 canvas中的色彩

3.2 canvas上下文及clearRect

3.3 使用直线绘制图形

评论

发表评论

相关推荐

HTML5 WebGame开源工具之impactjs

Canvas做游戏实践分享(十一)

Canvas做游戏实践分享(十)

Canvas做游戏实践分享(九)

Canvas做游戏实践分享(八)

Canvas做游戏实践分享(七)

Canvas做游戏实践分享(六)

Canvas做游戏实践分享(五)

Canvas做游戏实践分享(四)

Canvas做游戏实践分享(二)

Canvas做游戏实践分享(一)

最近访客更多访客>>