CreateJS 绘制图形2

最新推荐文章于 2025-11-17 05:02:57 发布

原创

最新推荐文章于 2025-11-17 05:02:57 发布 · 3.7k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #HTML5 #Canvas #JavaScript引擎

本文详细介绍了使用EaselJS库进行图形绘制，包括绘制椭圆、星形、复杂圆角矩形、创建渐变效果以及用图片填充图形等实例，适合JavaScript和HTML5 Canvas开发者参考。

个人原创,欢迎转载,转载请注明出处http://blog.youkuaiyun.com/bud_icelf QQ:909648986

EaselJS 绘制图形2

本节将介绍使用Shape对象,绘制椭圆,绘制星形,绘制复杂的带圆角矩形,创造渐变效果,用图片填充绘图.

例子1 绘制椭圆

<!DOCTYPE html>
<html>
<head>
	<meta charset="gbk">
	<script type="text/javascript" src="easeljs-0.6.0.min.js"></script>
</head>
<body>
	<canvas id="myCanvas" width="200" height="200">
		你的浏览器不支持canvas标签
	</canvas>
	<script>
		var myCanvas=document.getElementById("myCanvas");
		var stage=new createjs.Stage(myCanvas);
		var shape=new createjs.Shape();
		var graphics=shape.graphics;
		graphics.beginFill("red");
		graphics.drawEllipse(5, 5, 60, 120);
		stage.addChild(shape);
		stage.update();
	</script>
</body>
</html>

效果显示