`
blessdyb
  • 浏览: 232028 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Canvas做游戏实践分享(三)

canvasjavascripthtml5gameswebapp 
阅读更多

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做游戏实践分享(二)
评论
发表评论

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

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics