oCanvas 一款以对象的方式操作canvas

最新推荐文章于 2021-07-12 22:03:01 发布

weixin_34405925

最新推荐文章于 2021-07-12 22:03:01 发布

阅读量168

点赞数

文章标签： python javascript ViewUI

原文链接：https://my.oschina.net/yangyan/blog/859200

版权

2019独角兽企业重金招聘Python工程师标准>>>

oCanvas changes the way you work with the canvas element. With the native canvas API you are drawing pixels onto the canvas. But when building something, you tend to think more in terms of objects than actual pixels. This is what oCanvas is made to do — create a bridge between the native API and the way you want to work. If you would want to access the native API, that is also possible. http://ocanvas.org/docs 例子代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>oCanvas Demo</title>
	<script src="ocanvas-2.7.4.min.js"></script>
	<style type="text/css">
		
	</style>
</head>
<body>
	<canvas id="c1" width="1000" height="600"></canvas>
	<script type="text/javascript">

	// 创建一个Canvas画布对象
		var canvas = oCanvas.create({
			canvas:"#c1",
			background:'#000000'
		});

		// Center planet
		var center = canvas.display.ellipse({
			x:canvas.width/2,
			y:canvas.height/2,
			radius:canvas.width/20,
			fill:'#fff'
		}).add();


		// Prototype objects that will be used to instantiate the others
		
		var satelliteProto = canvas.display.ellipse({
			fill:'#eee'
		});

		var pathProto = canvas.display.ellipse({
			stroke:'1px #999'
		});

		// Set up data
		var satellites=[];depth=3;
		var satelliteColors=["#FF0000","#00BC22","#00659D"];
		var pathColors=["#6C6868","#EF1919","#20208F"];
		// Create seven satellites and paths. Definition is further down.
		
		for (var i = 0,l=7; i <l; i++) {
			createSatellite({
				parent:center,
				depth:1,
				distance:(i+1)*canvas.width/6,
				radius:canvas.width/100,
				speed:1
			})
		};

		// Set up a tick function that will move all satellites each time
		
		canvas.setLoop(function () {
			for (var i = 0; i < satellites.length; i++) {
				satellites[i].rotation+=satellites[i].speed;
			};
		});

		// Definition for a satellite and its corresponding path
		function createSatellite (options) {
			// Create the path that the satellite will follow
	var path = pathProto.clone({
		radius: options.distance,
		x: options.x || 0, y: options.y || 0,
		strokeColor: pathColors[options.depth - 1]
	});
	options.parent.addChild(path);

	// Create a new satellite
	var satellite = satelliteProto.clone({
		origin: {
			x: 0,
			y: options.distance * (Math.round(Math.random()) ? 1 : -1)
		},
		speed: Math.random() * (2 * Math.random() - 0.5) + 0.5,
		radius: options.radius,
		x: options.x || 0, y: options.y || 0,
		fill: satelliteColors[options.depth - 1],
		rotation: Math.random() * 360
	});
	options.parent.addChild(satellite);
	satellites.push(satellite);

	// Create another satellite that will circle around this satellite
	if (options.depth < depth) {
		createSatellite({
			parent: satellite, depth: options.depth + 1,
			distance: options.radius * 7,
			radius: options.radius / 1.5,
			x: satellite.origin.x * -1, y: satellite.origin.y * -1,
			speed: 10
		});
	}
		}
canvas.timeline.start();
	</script>
</body>
</html>

tips：

本文由wp2Blog导入，原文链接：http://devonios.com/ocanvas-%e4%b8%80%e6%ac%be%e4%bb%a5%e5%af%b9%e8%b1%a1%e7%9a%84%e6%96%b9%e5%bc%8f%e6%93%8d%e4%bd%9ccanvas.html

转载于:https://my.oschina.net/yangyan/blog/859200