springboot+netty开发简易式游戏：H5 canvas基础

2021-01-11 13:01:06 阅读：208 来源： 互联网

概念

官方：<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。

canvas可以理解为一块画布，画布有大小和背景颜色，我们还要需要画笔和橡皮。

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

ctx 大部分人都比作为画笔，个人觉得是canvas的使用权和控制权（上下文对象）较为准确。

getContext参数‘2d’，表示取的canvas为2维画布，‘3d’为3维画布，这里使用‘2d’就行了。

绘制矩形：

ctx.fillStyle = 'red';
ctx.fillRect(x, y, w, h);

先指定颜色，在进行绘制，fillRect前两个参数为xy坐标，后两个为宽高。

fill表示填充，stroke表示线条。

也可以绘制其他图形，请自行查阅。

橡皮（清除工具）

ctx.clearRect(x, y, w, h);

参数同上，为什么要使用清除工具，我们画笔只会在画布上进行绘制，比如在画布上有一人，第一秒进行一次绘制，第二秒又进行一次绘制，此时画布上有两个任务，我们都知道画布只能出现一个人物，就是要把第一次绘制的清除掉。

示例代码

<!DOCTYPE html>
<html>
<head>
	<title>demo</title>
</head>
<body>
<canvas id="canvas" width="400" height="300" style="background:black"></canvas>
<script type="text/javascript">
	var canvas = document.getElementById('canvas'),
	ctx = canvas.getContext('2d');

	ctx.fillStyle = 'red';
	ctx.fillRect(20, 20, 30, 30);

	ctx.strokeStyle = 'yellow';
	ctx.strokeRect(80, 20, 30, 30);

	/*清除整块画布*/
	// ctx.clearRect(0, 0, 400, 300);
</script>
</body>
</html>

返回目录

标签：netty,canvas,30,ctx,H5,画布,2d,绘制
来源： https://blog.csdn.net/u013399297/article/details/112439715

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

springboot+netty开发简易式游戏：H5 canvas基础

概念

示例代码