您的位置：首页 > 其它

canvas画旋转椭圆

2016-11-09 23:56 531 查看

要求使用画布变换方法。

椭圆画法参照大神佳作：http://web.jobbole.com/82960/

效果如下：

代码如下：

<!DOCTYPE html>
<html>
<head>
<title>旋转椭圆</title>
<meta charset="utf-8">
</head>
<body>
<canvas id="canvas" width="600" height="600"></canvas>

<script type="text/javascript">
var canvas = document.querySelector('#canvas'),
context = canvas.getContext('2d');

var width = canvas.width,
height = canvas.height;

// 原点坐标
var originX = width / 2,
originY = height / 2,
radius = 100;

context.lineWidth = 1;

/* 画椭圆
* x, y表示原点坐标
* radiusX, radiusY分别表示x和y轴的半径
*/
function ellipse(x, y, radiusX, radiusY) {
context.save();
var radius= (radiusX > radiusY) ? radiusX : radiusY;
var ratioX = radiusX / radius;
var ratioY = radiusY / radius;
context.scale(ratioX, ratioY);
context.beginPath();
context.arc(x / ratioX, y / ratioY, radius, 0, 2 * Math.PI, false);
context.restore();
context.stroke();
context.closePath();
}

// 把原点移动到圆心，旋转之后才不会变形
context.translate(originX, originY)

// 椭圆数目
var num = 50;
for (var i = 0; i < num; i++) {
ellipse(0, 0, 10, 80);
context.rotate(2 * Math.PI / num);
}
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： canvas 椭圆画布变换方法

相关文章推荐

新的分享

章节导航