浅析PHP程序员必要了解html5绘画标签<canvas>

　　目前HTML5还在大行其道，伴随产生了很多新的代码办法。

　　其中一个便是基于HTML5的游戏，例如微信推广中用到的小游戏------神经猫

或可以单独下载运行的萌宠消除类型游戏

　　这样的小游戏大多数都是通过一个html5的新增<canvas>标签实现的，这个标签有一套自己的编程接口（canvas API），专门用来绘制图形，可以实现一系列漂亮的图形与图像，创建出更好更丰富的新一代web页面，canvas标签通过JavaScript语言的画布，以及脚本来进行图像的绘制。

　　接下来我们来了解canvas标签的具体使用，首先我们在绘制图像之前必须要有一个画布

 一、创建画布

<canvas id="canvas1" width="320" height="160">
            您的浏览器不支持canvas标签
 </canvas>

然后在页面的JavaScript脚本中获取到该元素

var canvas1 = document.getElementById('canvas1');

然后便可在JavaScript脚本中对该canvas标签进行绘画操作

Canvas有如下的常用属性

canvas1.getAttribute("height")
canvas1.getAttribute(“width")
分别获取当前的画布的宽和高

fillStyle    设置或返回用于填充绘画的颜色、渐变或模式
strokeStyle    设置或返回用于笔触的颜色、渐变或模式
shadowColor    设置或返回用于阴影的颜色
shadowBlur    设置或返回用于阴影的模糊级别
shadowOffsetX    设置或返回阴影距形状的水平距离
shadowOffsetY    设置或返回阴影距形状的垂直距离

当然绘画需要画笔

二、获取画笔操作

 我们就需要得到属于这个画布的画笔context，以后的所有事情都通过这个画笔来完成

var canvas1 = document.getElementById('canvas1');
var ctx1 = canvas1.getContext('2d');

然后使用context提供的drawImage()方法来在画布上绘制图像、画布或视频

 

//在画布上定位图像：
context.drawImage(img,x,y);

//在画布上定位图像，并规定图像的宽度和高度：
context.drawImage(img,x,y,width,height);

//剪切图像，并在画布上定位被剪切的部分：
context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

参数    描述
img    规定要使用的图像、画布或视频。
sx    可选。开始剪切的 x 坐标位置。
sy    可选。开始剪切的 y 坐标位置。
swidth    可选。被剪切图像的宽度。
sheight    可选。被剪切图像的高度。
x    在画布上放置图像的 x 坐标位置。
y    在画布上放置图像的 y 坐标位置。
width    可选。要使用的图像的宽度。（伸展或缩小图像）
height    可选。要使用的图像的高度。（伸展或缩小图像）

接下来我们来绘制一张运动的图片在canvas画布上

var b_y=0;
//下面那张图的纵坐标一开始为0正好在画布上显示
//然后越来越大就向下移动了
//上面那张图一开始的纵坐标是负的，所以没显示
//比如画布高568，宽320
//上面图的坐标已开是就是负的568          b_y-568
//b_y越来越大，b_y-568就越来越接近0上面的图就越来越下来了
function drawBackground(){
    ctx1.drawImage(image,0,b_y,320,568);
    ctx1.drawImage(image,0,b_y-568,320,568);
    b_y+=4;
    if(b_y>568){
        b_y=0;
    }
    window.setTimeout("drawBackground()",100);
}

 在完成简单的画布的设置以及绘画功能后可以接触简单的游戏制作

实际上一般的2d的游戏我们都喜欢把游戏里的物品，人物等图片做成固定大小的方块，然后只要有了足够的方块，我们把这些方块按一定的顺序拼到一起，就是一个漂亮的画面了
这样做的好处是，某个位置的图需要换的话，只要把对应的方块放上去就可以了，其他位置的方块都不用动，而且相同的图都是用的同一个方块能实现图片的重用

 

一下是一个简单游戏人物的运动轨迹代码

<script type="text/javascript">
        var can=document.getElementById("c1");//这里的a就代表画布
        var context=can.getContext("2d");//context就代表画笔
        var width=320;
        var height=320;
        can.setAttribute("width",width);
        can.setAttribute("height",height);
        
        var wj_img=new Image();
        wj_img.src="images/wanjia.png";
        wj_img.onload=function(){
            drawWj();
        }
        
        var wjzt=6;
        function drawWj(){
            context.clearRect(0,0,320,320);
            var x1=(wjzt%5)*16;
            var y1=parseInt(wjzt/5)*32;
            
            var x2=16;
            var y2=16;
            
            context.drawImage(wj_img,x1,y1,16,32,x2,y2,16,32);
            wjzt++;
            if(wjzt>8){
                wjzt=6;
            }
            window.setTimeout("drawWj()",100);
            
        }
    </script>

最后我们在制作游戏时候我们需要了解简单的块状元素的碰撞算法以及碰撞检测原理

分为像素级检测和块检测2种
具体的算法又有不同的优化
例如有投影算法、中心点算法等

最简单的一种就是你先算出将要移动的目标坐标，然后判定
在目标点的一个矩形范围里是否有绘制障碍物，有就是碰撞了


像素级的检测则是不光要判断一个范围里是否有障碍物
还需要用自己的不透明的点落到目标区域以后，对应的位置
是否有不透明的点，有就是碰上了，没有则还不算碰撞