系统回顾2------游戏开发技能

（1）最基本的HTML5画布API及其相关使用

相关要求

环境要求：Google Chrome, Firefox, Safari, Opera, 或者 IE9以上的现代浏览器

编程要求：需要有基础的HTML和Javascript编程经验，相关的画布编程将调用Javascript API来处理

小提示：你可以将width和height添加到CSS文件中，但是和直接设置canvas的属性，有一定区别：使用属性来定义canvas，不仅定义的是canvas对象的高宽，同时也定义了可绘制图形区域的高宽。而使用CSS来定义做不到这一点，只能定义Canvas本身的大小，所以推荐使用属性来设置相关高宽

①为了能够调用HTML5的画布API，我们需要来访问画布的相关上下文（Context），用来访问HTML5画布相关的相关API方法

var canvas = document.getElementById('gbCanvas'),     
      context = canvas.getContext('2d');  //使用context可以调用更多方法，绘制直线

②使用HTML5画布绘制直线

在HTML5的画布API中，我们使用如下方法来绘制直线：

beginPath() - 开始准备绘制

moveTo() - 绘制的起始坐标（x, y）

lineTo() - 绘制结束的坐标（x, y )

stroke() - 立刻开始绘制直线

【小提示】：缺点是绘制的直线是黑色的；

想设置样式属性的话，请设置在调用stroke()方法前，否则设置的属性将无效。即在绘制前设置粗细

③设置直线的样式

1.粗细：

context.lineWidth = 20; //设置直线粗细为20px

2.颜色

context.strokeStyle = '#DD4814'; //设置直线粗细为20px

3.两端的样式

context.lineCap = 'butt'; //绘制按钮类型
context.lineCap = 'round'; //绘制圆角类型
context.lineCap = 'square'; //绘制正方形类型

④绘制弧形

相关参数如下：

arc( x, //定义圆心x坐标
       y, //定义圆心y坐标
       radius, //半径
       startAngle, //起始角度
       endAngle, //结束角度
       counterClockWise //是否是逆时针方向
        );

⑤生成二次曲线

可以使用如下方法：

quadraticCurveTo(controllpointX,controllpointY(顶点坐标),endingpointX,endingpointY(结束点坐标))

起始点坐标由moveTo() - 绘制的起始坐标（x, y）确定

⑥贝塞尔曲线

相对于二次曲线来说，贝塞尔曲线增加了一个控制点来生成更复杂的曲线样式，其它参数类似，方法及其参数说明如下：

 bezierCurveTo(controllpoint1X,controllpoint1Y,controllpoint2X,controllpoint2Y, 
endingpointX, endingpointY)

⑦H5的路经概念

使用HTML5的路经(path)，我们可以连接多个子路经。上一个路经的结束点即成为下一个子路经的起始点。我们可以使用如下的相关方法来构建不同的子路经：

lineTo，arcTo，quadraticCruveTo()，bezierCurveTo()

如果你希望重新开始绘制一个路经，可以使用beginPath()方法

⑧连接样式

lineJoin = '...';

对应的值为：miter(正常)，round(圆滑)，bevel(尖角)

⑨arcTo生成矩形圆角效果

arcTo(x1, y1, x2, y2, radius)

利用当前端点，端点1和端点2绘制圆角效果

⑩

系统回顾2------游戏开发技能

猜你喜欢