canvas画旋转椭圆

来源：互联网发布：提字器软件编辑：程序博客网时间：2024/06/11 10:04

要求使用画布变换方法。

椭圆画法参照大神佳作：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>

0 0