其实题目是画椭圆，先说Canvas中的圆
Canvas画圆相信大家都很熟悉
oGC.arc(400,300,100,0,2*Math.PI,false);
如上图，直接调用API就可以了，计算机利用内部的光栅，借助Bresenham算法来画圆。 我们把这个放在最后css3 画圆，我们来谈谈借助圆的参数多项式来画圆。
Circle(oGC,400,300,100);functioncircle(context,x,y,a){//x,y为坐标； a为直径 varr=1/a;//①注意：这里的r可以硬编码css3 画圆，但不仁慈的情况下，写死的值是不一样的
上下文.beginPath();
context.moveTo(x+a,y);for(vari=0;i<2*Math.PI;i+=r){
context.lineTo(x+a*Math.cos(i),y+a*Math.sin(i));
语境。 关闭路径（）；
语境。 充满（）;
原则是什么？ 相信三角函数学好的童鞋很容易理解。 如果你不知道，请注意注意①。 我把r的值改一下，相信会有效果的~
r 和 2*Math.PI 的组合就是圆的精细度。 当直径为100时，r可为1/10。 如果常见的话可以写成r=1/a； 这样，无论直径大还是小，圆都会很细，对性能影响很大
现在我们来看看文章的主角，看椭圆看圆
functionEllipSEOne(上下文,x,y,a,b){varstep=(a>b)?1/a:1/b;
上下文.beginPath();
context.moveTo(x+a,y);for(vari=0;i<2*Math.PI;i+=step){
context.lineTo(x+a*Math.cos(i),y+b*Math.sin(i));
语境。 关闭路径（）；
语境。 充满（）;
它与圆基本相同，但圆只有一个直径，而椭圆则分为长轴和短轴。
看看疗效吧~
好了，椭圆的绘制成功了，文章就结束了~
这怎么可能！ ！
这样结束就太鸡肋了，刚才是第一种方法，下面看看其他的方法
方法二、均匀压缩法
这是我最喜欢的方法。 这很容易理解。 与方法1相比，性能要快很多。 先贴出代码吧~
functionEllipseTwo(上下文,x,y,a,b){
context.save();varr=(a>b)?a:b;varratioX=a/r;varratioY=b/r;
context.scale(ratioX,ratioY);
上下文.beginPath();
context.arc(x/ratioX,y/ratioY,r,0,2*Math.PI,false);
语境。 关闭路径（）；
语境。 恢复（）;
语境。 充满（）;
其原理是借助尺度来压缩一个标准圆。 ratioX 是垂直轴的缩放百分比，ratioY 是水平轴的缩放百分比。 由于这两个值不同，所以标准圆被缩放为椭圆
记住save()和restore()恢复上下文环境，soeasy理解的方式
下面两种方法要求很高，都使用三次贝塞尔曲线方法
方式三、四、贝塞尔法
functionEllipseThree(上下文,x,y,a,b){varox=0.5*a,
oy=0.6*b；
语境。 节省（）;
语境。 翻译（x，y）；
上下文.beginPath();
上下文.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);
语境。 关闭路径（）；
语境。 充满（）;
语境。 恢复（）;
}functionEllipseFour(上下文,x,y,a,b){vark=0.5522848,
ox=k*a,
oy=k*b；
语境。 翻译（x，y）；
上下文.beginPath();
context.moveTo(-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.bezierCurveTo(-ox,b,-a,oy,-a,0);
语境。 关闭路径（）；
语境。 充满（）;
贝塞尔方法的核心在于两个控制点的选择，它有一个致命的问题。 当lineWidth较宽时，椭圆更平坦，长轴更尖锐，不会平滑
如果不知道贝塞尔是啥的可以自行百度...这个我就不解释了...
还有最后一个光栅方法来绘制椭圆。 光栅法画圆很简单，但是画椭圆就很麻烦。 下面是最简单的椭圆绘制方法，相当于lineWidth为1px的情况
functionEllipseFive(context,x,y,a,b){vardata=context.getImageData(0,0,800,600);varimageData=data.data;vartx=0;varty=b;vard=b*b+a*a*(- b+0.25);varmx=a*a/Math.sqrt(a*a+b*b);while(tx0){if(d<0){
交易++；
d+=b*b*(2*tx+2)+a*a*(-2*ty+3);
}别的{
d+=a*a*(-2*ty+3);
ty--;
setPix(x+tx,y+ty);
setPix(x-tx,y+ty);
setPix(x+tx,y-ty);
setPix(x-tx,y-ty);
context.putImageData(data,0,0);functionsetPix(x,y){
console.log(x,y);varindex=getStartIndex(x,y);for(vari=0;i<4;i++){if(i==3){
图像数据[索引+i]=255；
}别的{
图像数据[索引+i]=128；
}functiongetStartIndex(x,y){返回*800*4+x*4;
给个结果图吧~
光栅法的原理这里就不讲了，讲起来会花很长时间，而且这里不建议用光栅法画椭圆，因为对于不同的线宽来说很麻烦
好了，这篇文章就到这里了，谢谢~
所有笔试题（java、前端、数据库、springboot等）一气呵成，请关注文末小程序
腾讯云】1核2G5M轻量级应用服务器50元，性价比高，助您轻松上云
仍在学习，永不放弃。 作为技术人员很容易被淘汰。 只有不断学习，才能拥有良好的生存空间。 明天小编就整理一下CSS3勾画基本图形的绘制方法，分享给大家！
1. 圆形
画一个圆应该是最简单的，直接设置div的宽高，填充颜色，效果就下来了。
2.圆角正方形
画圆角正方形也很简单。 在1的基础上，可以使用CSS3的border-radius。
3. 圆形
根据圆形的特点，在2的基础上，将div的宽度和高度设置为正圆形，然后将border-radius设置为50%。
4.椭圆
椭圆也很简单，只需要在3的基础上让div的宽度和高度不一致即可。为了更好看，建议将宽度设置为高度的1.5倍。
5. 三角形
三角形比其他三角形稍微困难一些。 这里我们需要使用border-style属性来分别设置四个边的边框长度。 最终疗效见下面代码。
6. 弧线
本质上是借助圆角来实现的。 现在需要将圆的左上角圆角绘制成圆弧，因此将左边框和斜边边框的长度设置为0px，使其不可见css3三角形，并设置左上角圆角的直径，令变得更大更明显，其余圆角的直径全部设置为0px，这样就完成了一个圆弧。
7. 平行四边形
平行四边形在圆形的基础上使用了 CSS3 变换属性。 使用变体功效。
8.六角星
六角星使用“:after”在相反方向制作另一个三角形，然后在定位中将它们堆叠在一起以产生六角星。 说白了就是两个三角形拼在一起就形成了一个六角星。
9.五角星
五角星主要利用了CSS3的transform属性css3三角形，与“:after”配合使用。
10.心形、阴阳图、PointBurst、Momo仿消息框、吃豆人等就不一一举例了，直接看代码即可。
整个代码如下：
.rectangle {
width: 150px;
height: 100px;
background-color: orangered;
margin-bottom:5px;
}
.rounded-rectangle {
width: 150px;
height: 100px;
background-color: orangered;
border-radius: 10%;
margin-bottom:5px;
}
.circle {
width: 100px;
height: 100px;
background-color: orangered;
border-radius: 50%;
margin-bottom:5px;
}
.ellipse {
width: 150px;
height: 100px;
background-color: orangered;
border-radius: 50%;
margin-bottom:5px;
}
.triangle{
width: 0px;
height: 0px;
border-style: solid;
background-color: transparent;
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: blue;
border-left-color:transparent;
border-top-width: 50px;
border-bottom-width: 50px;
border-left-width: 50px;
border-right-width: 50px;
margin-bottom:5px;
}
.line{
width: 100px;
height: 3px;
background-color: orangered;
margin-bottom:5px;
}
.arc {
width: 100px;
height: 100px;
border-style: solid;
border-top-width: 10px;
border-bottom-width: 0px;
border-left-width: 10px;
border-right-width: 0px;
border-top-color: blue;
border-bottom-color: red;
border-left-color: red;
border-right-color: red;
background-color: transparent;
border-top-right-radius: 0px;
border-top-left-radius: 100px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
}
.parallelogram {
width: 150px;
height: 100px;
-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
-o-transform: skew(20deg);
transform: skew(20deg);
background: red;
margin-top:20px;
margin-left:20px;
}
.star-six {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
position: relative;
}
.star-six:after {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
position: absolute;
content: "";
top: 30px;
left: -50px;
}
.star-five {
margin: 50px 0;
position: relative;
display: block;
color: red;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid red;
border-left: 100px solid transparent;
-moz-transform: rotate(35deg);
-webkit-transform: rotate(35deg);
-ms-transform: rotate(35deg);
-o-transform: rotate(35deg);
transform: rotate(35deg);
}
.star-five:before {
border-bottom: 80px solid red;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
position: absolute;
height: 0;
width: 0;
top: -45px;
left: -65px;
display: block;
content: '';
-webkit-transform: rotate(-35deg);
-moz-transform: rotate(-35deg);
-ms-transform: rotate(-35deg);
-o-transform: rotate(-35deg);
transform: rotate(-35deg);
}
.star-five:after {
position: absolute;
display: block;
color: red;
top: 3px;
left: -105px;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid red;
border-left: 100px solid transparent;
-webkit-transform: rotate(-70deg);
-moz-transform: rotate(-70deg);
-ms-transform: rotate(-70deg);
-o-transform: rotate(-70deg);
transform: rotate(-70deg);
content: '';
}
.heart{
width:160px;
height:200px;
position:relative
}
.heart:before{
content:" ";
border: 0 solid transparent;
-moz-border-radius:100px;
-webkit-border-radius:100px;
border-radius:100px 100px 0 0;
width:80px; height:120px;
background:#669;
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
position:absolute;
left:20px;
}
.heart:after{
content:" ";
border: 0 solid transparent;
-moz-border-radius:100px;
-webkit-border-radius:100px;
border-radius:100px 100px 0 0;
width:80px;
height:120px;
background:#669;
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
position:absolute;
left:48px;
top:0px;
}
.pac-man {
width: 0px;
height: 0px;
border: 60px solid red;
border-color: red transparent red red ;
-moz-border-radius: 60px;
-webkit-border-radius: 60px;
border-radius: 60px;
}
.talkbubble {
width: 120px;
height: 80px;
background: red;
position: relative;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
margin-left:20px;
margin-bottom:20px;
}
.talkbubble:before {
content:"";
position: absolute;
right: 100%;
top: 26px;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-right: 26px solid red;
border-bottom: 13px solid transparent;
margin-left:20px;
margin-bottom:20px;
}
.burst-12 {
background: red;
width: 80px;
height: 80px;
position: relative;
text-align: center;
margin-left:20px;
}
.burst-12:before,
.burst-12:after {
content: "";
position: absolute;
top: 0; left: 0;
height: 80px;
width: 80px;
background: red;
}
.burst-12:before {
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);
}
.burst-12:after {
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-ms-transform: rotate(60deg);
-o-transform: rotate(60deg);
transform: rotate(60deg);
}
.yin-yang {
width: 96px;
height: 48px;
background: #eee;
border-color: red;
border-style: solid;
border-width: 2px 2px 50px 2px;
border-radius: 100%;
position: relative;
}
.yin-yang:before {
content: "";
position:
absolute;
top: 50%;
left: 0;
background: #eee;
border: 18px solid red;
border-radius: 100%;
width: 12px;
height: 12px;
}
.yin-yang:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
background: red;
border: 18px solid #eee;
border-radius:100%;
width: 12px;
height: 12px;
}
点击此处查看跑步效果
