HTML5 Canvas中绘制椭圆的几种方法
1.canvas自带的绘制椭圆的方法
ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise)是后来添加的,
参数的意思:(起点x.起点y,半径x,半径y,旋转的角度,起始角,结果角,顺时针还是逆时针)
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>椭圆</title>
</head>
<body>
<canvas id="canvas" style="border:1px solid #aaa;display:block;margin:50px auto;">
当前浏览器不支持Canvas,请更换浏览器后再试
</canvas> <script>
window.onload = function(){
var canvas = document.getElementById("canvas");
var ctx=canvas.getContext('2d');
canvas.width = 800;
canvas.height = 800;
if(ctx.ellipse){
ctx.ellipse(400,400,300,200,0,0,Math.PI*2);
ctx.fillStyle="#058";
ctx.strokeStyle="#000";
ctx.fill();
ctx.stroke();
}else{
alert("no ellipse!");
}
}
</script>
</body>
</html>
目前谷歌可以支持,其他浏览器还未存在ellipse();
下面这几种方法是我在网上看到的,在此也做个总结:
2.用参数方程绘制椭圆
//函数的参数x,y为椭圆中心;a,b分别为椭圆横半轴、
//纵半轴长度,不可同时为0
//该方法的缺点是,当lineWidth较宽,椭圆较扁时
//椭圆内部长轴端较为尖锐,不平滑,效率较低
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>椭圆</title>
</head>
<body>
<canvas id="canvas" style="border:1px solid #aaa;display:block;margin:50px auto;">
当前浏览器不支持Canvas,请更换浏览器后再试
</canvas>
<script>
var canvas = document.getElementById("canvas");
canvas.width = 600;
canvas.height = 600;
var context = canvas.getContext("2d");
context.lineWidth = 10;
context.strokeStyle="black";
ParamEllipse(context, 130, 80, 100, 20); //椭圆
function ParamEllipse(context, x, y, a, b){
//max是等于1除以长轴值a和b中的较大者
//i每次循环增加1/max,表示度数的增加
//这样可以使得每次循环所绘制的路径(弧线)接近1像素
var step = (a > b) ? 1 / a : 1 / b;
context.beginPath();
context.moveTo(x + a, y); //从椭圆的左端点开始绘制
for (var i = 0; i < 2 * Math.PI; i += step)
{
//参数方程为x = a * cos(i), y = b * sin(i),
//参数为i,表示度数(弧度)
context.lineTo(x + a * Math.cos(i), y + b * Math.sin(i));
}
context.closePath();
context.stroke();
};
</script>
</body>
</html>
3.均匀压缩法绘制椭圆
//其方法是用arc方法绘制圆,结合scale进行
//横轴或纵轴方向缩放(均匀压缩)
//这种方法绘制的椭圆的边离长轴端越近越粗,长轴端点的线宽是正常值
//边离短轴越近、椭圆越扁越细,甚至产生间断,这是scale导致的结果
//这种缺点某些时候是优点,比如在表现环的立体效果(行星光环)时
//对于参数a或b为0的情况,这种方法不适用
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>椭圆</title>
</head>
<body>
<canvas id="canvas" style="border:1px solid #aaa;display:block;margin:50px auto;">
当前浏览器不支持Canvas,请更换浏览器后再试
</canvas>
<script>
var canvas = document.getElementById("canvas");
canvas.width = 600;
canvas.height = 600;
var context = canvas.getContext("2d");
context.lineWidth = 10;
context.strokeStyle="black";
EvenCompEllipse(context, 130, 200, 100, 20); //椭圆
function EvenCompEllipse(context, x, y, a, b){
context.save();
//选择a、b中的较大者作为arc方法的半径参数
var r = (a > b) ? a : b;
var ratioX = a / r; //横轴缩放比率
var ratioY = b / r; //纵轴缩放比率
context.scale(ratioX, ratioY); //进行缩放(均匀压缩)
context.beginPath();
//从椭圆的左端点开始逆时针绘制
context.moveTo((x + a) / ratioX, y / ratioY);
context.arc(x / ratioX, y / ratioY, r, 0, 2 * Math.PI);
context.closePath();
context.stroke();
context.restore();
};
</script>
</body>
</html>
纠正:上述方法也可以实现线条粗细一致的椭圆
只需要调整两句话的顺序(先恢复上下文状态,再描边)
context.stroke();
context.restore(); 变为:
context.restore();
context.stroke();
4.使用三次贝塞尔曲线模拟椭圆1
//此方法也会产生当lineWidth较宽,椭圆较扁时,
//长轴端较尖锐,不平滑的现象
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>椭圆</title>
</head>
<body>
<canvas id="canvas" style="border:1px solid #aaa;display:block;margin:50px auto;">
当前浏览器不支持Canvas,请更换浏览器后再试
</canvas>
<script>
var canvas = document.getElementById("canvas");
canvas.width = 600;
canvas.height = 600;
var context = canvas.getContext("2d");
context.lineWidth = 10;
context.strokeStyle="black";
BezierEllipse1(context, 470, 80, 100, 20); //椭圆
function BezierEllipse1(context, x, y, a, b){
//关键是bezierCurveTo中两个控制点的设置
//0.5和0.6是两个关键系数(在本函数中为试验而得)
var ox = 0.5 * a,
oy = 0.6 * b;
context.save();
context.translate(x, y);
context.beginPath();
//从椭圆纵轴下端开始逆时针方向绘制
context.moveTo(0, b);
context.bezierCurveTo(ox, b, a, oy, a, 0);
context.bezierCurveTo(a, -oy, ox, -b, 0, -b);
context.bezierCurveTo(-ox, -b, -a, -oy, -a, 0);
context.bezierCurveTo(-a, oy, -ox, b, 0, b);
context.closePath();
context.stroke();
context.restore();
};
</script>
</body>
</html>
5.使用三次贝塞尔曲线模拟椭圆2
//此方法也会产生当lineWidth较宽,椭圆较扁时
//,长轴端较尖锐,不平滑的现象
//这种方法比前一个贝塞尔方法精确度高,但效率稍差
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>椭圆</title>
</head>
<body>
<canvas id="canvas" style="border:1px solid #aaa;display:block;margin:50px auto;">
当前浏览器不支持Canvas,请更换浏览器后再试
</canvas>
<script>
var canvas = document.getElementById("canvas");
canvas.width = 600;
canvas.height = 600;
var context = canvas.getContext("2d");
context.lineWidth = 10;
context.strokeStyle="black";
BezierEllipse2(context, 470, 200, 100, 20); //椭圆
function BezierEllipse2(ctx, x, y, a, b){
var k = .5522848,
ox = a * k, // 水平控制点偏移量
oy = b * k; // 垂直控制点偏移量</p> <p> ctx.beginPath();
//从椭圆的左端点开始顺时针绘制四条三次贝塞尔曲线
ctx.moveTo(x - a, y);
ctx.bezierCurveTo(x - a, y - oy, x - ox, y - b, x, y - b);
ctx.bezierCurveTo(x + ox, y - b, x + a, y - oy, x + a, y);
ctx.bezierCurveTo(x + a, y + oy, x + ox, y + b, x, y + b);
ctx.bezierCurveTo(x - ox, y + b, x - a, y + oy, x - a, y);
ctx.closePath();
ctx.stroke();
};
</script>
</body>
</html>
原文:https://blog.csdn.net/gao_xu_520/article/details/58588020
HTML5 Canvas中绘制椭圆的几种方法的更多相关文章
- 在 Canvas 中绘制扇形
在 HTML5 Canvas 中,我们可以通过 arc 方法来绘制圆形: // context.arc(x, y, r, sAngle, eAngle, counterclockwise); var ...
- HTML5 Canvas中实现绘制一个像素宽的细线
正统的HTML5 Canvas中如下代码 ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(10, 100); ctx.lineTo(300,100); c ...
- HTML5在canvas中绘制复杂形状附效果截图
HTML5在canvas中绘制复杂形状附效果截图 一.绘制复杂形状或路径 在简单的矩形不能满足需求的情况下,绘图环境提供了如下方法来绘制复杂的形状或路径. beginPath() : 开始绘制一个新路 ...
- HTML5 在canvas中绘制复杂形状
作者:卿笃军 原文地址:http://blog.csdn.net/qingdujun/article/details/32942667 一.绘制复杂形状或路径 在简单的矩形不能满足需求的情况下,画图环 ...
- ThreeJS中创建文字的几种方法
1. DOM + CSS 传统html5的文字实现,用于添加描述性叠加文字的方法.一般使用绝对定位,并且保证z-index够大,用于显示在3D场景之上. 优点: 与CSS3D效果一致 缺点: 3d效果 ...
- C#中实现并发的几种方法的性能测试
C#中实现并发的几种方法的性能测试 0x00 起因 去年写的一个程序因为需要在局域网发送消息支持一些命令和简单数据的传输,所以写了一个C/S的通信模块.当时的做法很简单,服务端等待链接,有用户接入后开 ...
- PHP中获取星期的几种方法
PHP中获取星期的几种方法 PHP星期几获取代码: 1 date(l); 2 //data就可以获取英文的星期比如Sunday 3 date(w); 4 //这个可以获取数字星期比如123,注意0 ...
- CSS中隐藏内容的3种方法及属性值
CSS中隐藏内容的3种方法及属性值 (2011-02-11 13:33:59) 在制作网页时,隐藏内容也是一种比较常用的手法,它的作用一般有:隐藏文本/图片.隐藏链接.隐藏超出范围的内容.隐藏弹出 ...
- 关于iOS去除数组中重复数据的几种方法
关于iOS去除数组中重复数据的几种方法 在工作工程中我们不必要会遇到,在数组中有重复数据的时候,如何去除重复的数据呢? 第一种:利用NSDictionary的AllKeys(AllValues)方 ...
随机推荐
- 递归实现进制转换(C++版)
上次呢,我们留下了一道题,今天我们来一起看一看: 题目链接:https://www.cnblogs.com/gaozirong/p/10547434.html 这是我写的程序,大家可以对照参考一下(C ...
- C#生成验证码类
using System;using System.Collections.Generic;using System.Drawing;using System.Drawing.Drawing2D;us ...
- jQuery css()与class()的用法
一.css()用法: 1.设置css // css(name, value) // 修改单个样式 // name:样式名 value:样式值 $("li") .css(&quo ...
- opencv 将视频分解成图片和使用本地图片合成视频
代码如下: // cvTest.cpp : Defines the entry point for the console application. #include "stdafx.h&q ...
- mac下配置influxdb
influxdb 基本概念 参考:https://docs.influxdata.com/influxdb/v1.4/concepts/key_concepts 基本概念图: Database(绿色白 ...
- 总纲篇:产品结构设计指导VII(本博客指引章节)
本章目的:搭建自己的产品结构设计知识体系与框架,从零开始设计一个完整产品. 需知远途即捷径! //作者的结构设计体系尚在搭建中,所有的文章都会定期进行一定编排修改 目录: 0)自序 1.基础篇 1)时 ...
- iterm自动登录ssh脚本
经常在工作中需要切换到不同的服务器去部署,或者查看日志,每次登录都要去找对应的IP和地址,非常麻烦,最终决定使用iterm2+脚本来实现自动登录. 1.iterm2(下载安装不再介绍http://ww ...
- HTTP传输数据压缩
一.基础 1.HTTP压缩是指: Web服务器和浏览器之间压缩传输的”文本内容“的方法. HTTP采用通用的压缩算法,比如gzip来压缩HTML,Javascript, CSS文件. 能大大减少网络传 ...
- jenkins配置构建执行状态
运行构建 在项目 左侧列表点击 “立即构建” ,在 “Build History” 列表中,会看到执行状态,蓝色圆点表示构建成功,红色圆点表示构建失败 点击 构建失败的任务(红色的小圆点).然后点击“ ...
- 通过java代码给log4j指定appender
工具代码 import org.apache.log4j.ConsoleAppender; import org.apache.log4j.LogManager; import org.apache. ...