文章目录
canvas游戏设计
1.canvas基础知识
1.1canvas元素
- canvas元素我们称之为画布，之所以称之为画布就像我们的白板一样，或者黑板一样，我们它只是一个容器，我们需要绘制的图形图像都需要绘制在这个黑板上，那其实我们知道canvas不光可以用来去绘制基本的图形或者图图案，同样我们也可以拿它去实现游戏。
- 我们之所以不使用flash来完成游戏。是因为flash中。想要去运行，我们必须得要有对应的flash插件。没有对应的flash插件，我们没有办法在浏览器当中去运行我们要的游戏。而canvas对于我们来讲有个很方便的地方。就是他只是一个标签，只要你的浏览器支持canvas标签。我们就可以利用相关的代码来去完成一个游戏，或者图形回执。所以他是没有平台限制的并且也不需要我们去下载对应的插件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<canvas id="can"></canvas>
</body>
</html>
-
- canvas 默认的宽高，300 X 150
-
- 给 canvas 元素设置宽高的时候，建议大家使用 canvas 标签本身提供的 width 和 height 属性。不建议大家使用 CSS 的样式设置，会导致 canvas 原本绘制的图片图形拉伸，变形。
-
- 如果浏览器不支持 canvas 标签，我们可以将提示的错误信息放在 canvas 标签的中间内容中
// 1.获取canvas元素
var can = document.getElementById('can');
// 通过canvas提供给我们的 绘图环境(绘图上线文) 绘制相关的 图形或图案
var ctx=can.getContext('2d');
// 3.获取到用于绘制图形图案的 相关api
1.2canvas 的绘图环境
- CanvasRenderingContext2D 对象提供的属性
| 属性 | 描述 |
|---|---|
| canvas | 绘图环境所属的 canvas 对象。 |
| fillStyle | 绘图环境在后续的图形填充操作中所使用的的颜色，渐变色或者图案 |
| font | 用来设置字形 |
| lineCap | 绘制的线段的端点的样式，butt，round，square |
| lineWidth | 绘制的线条的宽度 |
| shadowColor | 用什么颜色绘制阴影 |
| shadowOffsetX | 水平方向的偏移 |
| shadowOffsetY | 垂直方向的偏移 |
| strokeStyle | 绘图环境在后续的图形描边操作中所使用的的颜色，渐变色或者图案 |
| textAlign | 本文的对齐方式 |
| textBaseline | 垂直的堆砌方式 |
1.3 直线
- 对画直线的功能，我们可以使用beginPath(),closePath(),moveTo(),lineTo()和stroke()几个方法组合起来。
1.3.1 画直线
// 获取对应的canvas 节点
var can=document.getElementById('canvas');
// 获取2d绘图环境
var ctx=can.getContext('2d');
// 开始一段新的路径
ctx.beginPath();
// 将笔触移动到某一点。
ctx.moveTo(100,100);
ctx.lineTo(200,200);
// 绘制直线
ctx.stroke();
- beginPath() 定义一个新的路径绘制动作的开始
- moveTo() 为固定点创建一个新的子路径，新的笔触点。
- lineTo() 以上下文点为起点,到方法参数中指定的点之间画一条直线
- stroke() 为所花的先赋予颜色等样式，并使其可见。如果没有特别指定颜色的话，则默认使用黑色。
1.3.2 直线的宽度
- 直线的宽度用lineWidth属性设定。
ctx.lineWidth=5; //默认的按像素单位。
1.3.3 线条颜色
直线的颜色用strokeStyle属性
ctx.strokeStyle='red';
ctx.strokeStyle='rgba(0,0,0)';
ctx.strokeStyle='#f00';
1.3.4 直线端点的样式
- canvas支持3中直线的端点样式：butt,round,square. 使用lineCap属性设定。
ctx.lineCap="butt";
ctx.lineCap="round";
ctx.lineCap="square";
var canvas=document.getElementById('canvas');
var ctx=canvas.getContext('2d');
// butt 黄色 10
ctx.beginPath();
ctx.strokeStyle='yellow';
ctx.lineWidth=10;
ctx.lineCap='butt';
ctx.moveTo(100,100);
ctx.lineTo(300,100);
ctx.stroke();
// round 蓝色 20
ctx.beginPath();
ctx.strokeStyle='blue';
ctx.lineWidth=20;
ctx.lineCap='round';
ctx.moveTo(100,130);
ctx.lineTo(300,130);
ctx.stroke();
// square 红色 13
ctx.beginPath();
ctx.strokeStyle='red';
ctx.lineWidth=15;
ctx.lineCap='square';
ctx.moveTo(100,160);
ctx.lineTo(300,160);
ctx.stroke();
1.4圆弧
1.4.1画弧线
- 画弧线的方法是arc().每一条弧线都要由中心点，半径，起始角度(弧度制—弧度=角度值 * Math.PI/180)，结束角度(弧度制—弧度=角度值 * Math.PI/180)，后台绘图方向这几个参数来去确定一条弧线
ctx.arc(x, y, radius, startAngle, endAngle, direction);
// direction 用来设置圆弧的绘制方向
// 默认 false 顺时针绘制
// true 逆时针绘制
- 另外，也可以用 arcTo()方法来画弧线，用来在路径中绘制圆角。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
canvas {
border: 3px solid red;
}
</style>
</head>
<body>
<canvas id="canvas" width="600" height="600"></canvas>
</body>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.arc(300, 300, 150, (90 * Math.PI) / 180, (270 * Math.PI) / 180);
ctx.stroke();
</script>
</html>
1.4.2二次曲线(二次贝塞尔曲线)
- 通过 quadraticCurveTo()来完成二次曲线的绘制，每一条二次曲线要求要有上下文点，一个控制点和一个终止点来去定义。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
canvas {
border: 3px solid red;
}
</style>
</head>
<body>
<canvas id="canvas" width="600" height="600"></canvas>
</body>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.moveTo(100,100);
//二次曲线的起点
ctx.quadraticCurveTo(288,0,388,150);
// arg1 控制点的x坐标
// arg2 控制点的y坐标
// arg3 结束点的x坐标
// arg4 结束点的y坐标
ctx.stroke();
</script>
</html>
1.4.3贝塞尔曲线
- 使用bezierCurveTo(); 每一条贝塞尔曲线需要由起点，两个控制点和一个终止点来确定。由于贝塞尔曲线的是有两个控制点的，因此贝塞尔曲线可以比二次曲线更加复杂
ctx.bezierCurveTo(control1X,control1Y,control2X,control2Y,endx,endy);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
canvas {
border: 3px solid red;
}
</style>
</head>
<body>
<canvas id="canvas" width="600" height="600"></canvas>
</body>
<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.fillStyle="red";
ctx.moveTo(100,300);
ctx.bezierCurveTo(0,0,600,0,400,300);
ctx.lineTo(400,300);
ctx.arc(400,400,150,0,1.3*Math.PI);
// ctx.stroke();
ctx.fill();
</script>
</html>
1.4.4线条的链接样式
- HTML5 canvas 中支持3种线条的链接样式；包括：miter，round和bevel，设定链接样式使用lineJoin属性，默认情况下使用miter样式
ctx.lineJion='round';
- 注意：如果线条比较细他们之间链接并不形成很尖锐的角度的话，那么不同的样式可能会比较难以区分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
canvas {
border: 3px solid red;
}
</style>
</head>
<body>
<canvas id="canvas" width="600" height="600"></canvas>
</body>
<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
// 设置线条的宽度
ctx.lineWidth = 30;
// miter样式
ctx.beginPath();
ctx.moveTo(100, 150);
ctx.lineTo(150, 50);
ctx.lineTo(200, 150);
ctx.lineJoin = "miter";
ctx.stroke();
// round样式
ctx.beginPath();
ctx.moveTo(240, 150);
ctx.lineTo(290, 50);
ctx.lineTo(340, 150);
ctx.lineJoin = "round";
ctx.stroke();
// bevel样式
ctx.beginPath();
ctx.moveTo(380, 150);
ctx.lineTo(430, 50);
ctx.lineTo(480, 150);
ctx.lineJoin = "bevel";
ctx.stroke();
</script>
</html>
1.4.5圆角
- 画圆角使用arcTo()方法，这个方法需要一个控制点，一个终止点，半径作为必要参数
ctx.arcTo(controlX, controlY, endX, endY, radius);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
canvas {
border: 3px solid red;
}
</style>
</head>
<body>
<canvas id="canvas" width="600" height="600"></canvas>
</body>
<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
// 设置矩形相关的参数
var rectWidth=200;
var rectHeight=100;
var rectX=200;
var rectY=50;
var radius=50;
ctx.beginPath();
ctx.moveTo(rectX,rectY);
ctx.lineTo
最低0.47元/天 解锁文章
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
