Canvas库

最新推荐文章于 2024-08-10 08:43:09 发布

cifu7520

最新推荐文章于 2024-08-10 08:43:09 发布

阅读量280

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/u/3502371/blog/1082895

版权

H5游戏引擎，就是canvas库。

常见的canvas库：

1.Konva

kanvo面向对象，舞台、层、组，都是对象。舞台、层是全局的。

2.echarts

图表

3.白鹭时代

Konva:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Konva</title>
</head>
<body>
	<div id="box"></div>
	<script src="konva.min.js"></script><!-- 引入js文件 --> 
	<script>
		//创建舞台
		var stage = new Konva.Stage({
			container:"box",
			width:600,
			height:600
		});

		//创建层
		var layer = new Konva.Layer();

		//绘制矩形
		var rect = new Konva.Rect({
			x:100,
			y:100,
			width:300,
			height:150,
			fill:"red",
			stroke:"green",
			strokeWidth:10
		});

		//将矩形添加到层中
		layer.add(rect);

		//将层添加到舞台中
		stage.add(layer);
	</script>
</body>
</html>

转载于:https://my.oschina.net/u/3502371/blog/1082895