HTML5运用canvas标签画椭圆

最新推荐文章于 2021-07-08 14:29:51 发布
最新推荐文章于 2021-07-08 14:29:51 发布
阅读量258 收藏
点赞数
分类专栏： Web前端 文章标签： html5 JavaScript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013257544/article/details/84449855
版权
<!doctype html>
<html>
<head>
<title>画出一个椭圆</title>
</head>
<body>
<!-- 画出我的画布 -->
<canvas id="can1" width="500px" height="500px" style="border:1px solid
black"></canvas>
<script type="text/javascript">
//获取画布
var canvas = document.getElementById("can1");
//获取画笔
var cxt = canvas.getContext("2d");
cxt.beginPath();
//设置填充颜色
cxt.fillStyle = "red";
var a=120;
var b=160;
var x=250;
var y=250;
//选择a、b中的较大者作为arc方法的半径参数
var r = (a > b) ? a : b;
var ratioX = a / r; //横轴缩放比率
var ratioY = b / r; //纵轴缩放比率
cxt.scale(ratioX, ratioY); //进行缩放（均匀压缩）
//从椭圆的左端点开始逆时针绘制
cxt.moveTo((x + a) / ratioX , y / ratioY);
cxt.arc(x / ratioX, y / ratioY, r, 0, 2 * Math.PI);
cxt.fill();
cxt.closePath();
</script>
</body>
</html>
破逼名总重复
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html5使用canvas画三角形
09-28
主要介绍了html5使用canvas画三角形,需要的朋友可以参考下
HTML5画布椭圆形教程
limeiyans喜欢编程的那些事
01-24 1341
创建一个椭圆形使用HTML5画布,我们可以保存上下文状态,伸展画布背景水平,画一个圆,恢复画布的状态,然后应用样式。 body { margin: 0px; padding: 0px; } var canvas = document.getElementById('m
html椭圆的写法,4.8 把圆变换为椭圆 - HTML5 Canvas 实战
weixin_42365492的博客
06-03 1052
缩放最常用的应用之一，就是在水平方向或垂直方向拉伸一个圆，把它变成椭圆。本节，我们将通过平移和横向上拉伸画布上下文，再绘制圆，来创建一个椭圆。图4-10 圆变换为椭圆绘制步骤按照以下步骤，绘制一个椭圆：1. 定义画布上下文：window.onload = function(){var canvas = document.getElementById("myCanvas");var conte...
html5画椭圆的完整代码,HTML5 Canvas中绘制椭圆的4种方法
weixin_30404433的博客
06-05 1404
概述HTML5中的Canvas并没有直接提供绘制椭圆的方法，下面是对几种绘制方法的总结。各种方法各有优缺，视情况选用。各方法的参数相同：1.context为Canvas的2D绘图环境对象，2.x为椭圆中心横坐标，3.y为椭圆中心纵坐标，4.a为椭圆横半轴长，5.b为椭圆纵半轴长。参数方程法该方法利用椭圆的参数方程来绘制椭圆复制代码代码如下://-----------用参数方程绘制椭圆-------...
html怎么把图片做成椭圆形,html5 作图椭圆
weixin_35067976的博客
06-02 1765
html5 绘制椭圆最近的项目要使用html5 绘制椭圆，参考网上的例子发现可以使用贝塞尔曲线绘制，不过要绘制四条贝塞尔曲线。在html5的过程中发现可以使用绘制圆形的方式来绘制椭圆html5中绘制圆的函数如下：arc(x,y,r,start,end,clockwise);具体函数的含义请自行查看，实现的具体代码如下：/**** @param x 中心 x坐标* @param y 中心 y坐标* ...
HTML5 Canvas中绘制椭圆的4种方法
09-28
主要介绍了HTML5 Canvas中绘制椭圆的4种方法,本文讲解了参数方程法、均匀压缩法、三次贝塞尔曲线法、光栅法等4种方法,需要的朋友可以参考下
HTML5 Canvas雾状火焰动画
04-16
解压密码：RJ4587 我们可以在Canvas上绘制很多图形，也可以利用HTML技术在Canvas上制作一些复杂的动画，之前我们也分享过一些基于HTML5 Canvas的火焰动画，例如这个HTML5 Canvas幻彩火焰文字特效和更早以前分享的...
html5 canvas填色画游戏代码
06-11
html5 canvas填色画游戏代码是一款适合儿童玩的益智类填色游戏，通过选中色块，来给模型填充颜色。支持多种模型选择填色效果。
基于HTML5 Canvas动画实现霓虹雨
06-06
基于HTML5 Canvas动画实现霓虹雨
html语言如何画椭圆,如何在HTML5画布上画一个椭圆？
weixin_42466868的博客
06-03 328
Tammo提出了一个问题：How to draw an oval in html5 canvas?，或许与您遇到的问题类似。updates:scaling method can affect stroke width appearancescaling method done right can keep stroke width intactcanvas has ellipse method t...
html css做椭圆,简单实例：用css3画椭圆
weixin_29038345的博客
06-16 1208
现在随着css3的发展，很多形状可以通过css3画出，本篇文章给大家带来的内容是关于如何快速简单的使用css3画出各种各样的椭圆。使用css3画出各种各样的椭圆的原理：我们需要使用css3中的border-radius属性，修改width值为200px，然后把border-radius改成100px/ 50px;“/”之前的是水平半径，”/”之后的是垂直半径，所以 100px / 50px就让di...
HTML5 Canvas中绘制椭圆的5种方法
热门推荐
汉堡请不要欺负面条
02-28 2万+
1.canvas自带的绘制椭圆的方法 ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise)是现在更新的， 参数的意思：(起点x.起点y,半径x,半径y,旋转的角度，起始角，结果角，顺时针还是逆时针) 请参考html5维护及更新 目前只有谷歌可以支持，其他还浏览器还未存在ellip
在HTML5的Canvas上绘制椭圆的几种方法
weixin_33979203的博客
08-27 168
概述 HTML5中的Canvas并没有直接提供绘制椭圆的方法，下面是对几种绘制方法的总结。各种方法各有优缺，视情况选用。各方法的参数相同： context为Canvas的2D绘图环境对象， x为椭圆中心横坐标， y为椭圆中心纵坐标， a为椭圆横半轴长， b为椭圆纵半轴长。 参数方程法 该方法利用椭圆的参数方程来绘制椭圆 //---...
HTML5 Canvas 绘制椭圆与椭圆弧的实现
无心的专栏
06-01 1万+
由于HTML Canvas 2D Context标准中并没有直接绘制椭圆与椭圆弧的方法，所以浏览器普遍没有这个方法，不过，Chrome支持ellipse方法。IE11，Edge, Firefox, Safari目前最新版都还不支持。所以，我们需要用JS来实现这个方法，给Context2D加上一个ellipse方法。
html5 绘制椭圆
07-22 3831
最近的项目要使用html5 绘制椭圆，参考网上的例子发现可以使用贝塞尔曲线绘制，不过要绘制四条贝塞尔曲线。 在html5的过程中发现可以使用绘制圆形的方式来绘制椭圆 html5中绘制圆的函数如下： arc(x,y,r,start,end,clockwise);具体函数的含义请自行查看， 实现的具体代码如下： /** * * @param x 中心 x坐标 * @param y 中心
讨论下canvas画椭圆的方法
weixin_30681121的博客
01-09 237
本文属于《html5 Canvas画图系列教程》 在canvas中可以很方便的用arc方法画出圆形，本来圆形也可以看作是一个宽高相等的椭圆，但canvas中根本没有画椭圆的方法，我们要用其他方法来模拟。 我们首先要明确画一个椭圆需要那些参数，基本的几何知识告诉我们，椭圆需要圆心坐标，宽度，高度——或者还有旋转角度，不过这个可以暂时不要，旋转是比较容易的。 1,使用lineTo画椭圆 你没有...
html中图片椭圆,CSS3技巧之形状（椭圆）
weixin_35959366的博客
06-04 1680
回顾那个只能用图片展示形状的日子，之前接触前端的小伙伴们，大家一定会有颇多感触，好在现在我们可以使用纯CSS实现更多想要的形状效果，今天小编来整理一下，希望对大家有所帮助，也方便自己后期的查看。自适应的椭圆使用border-radius制作一个圆很简单，只要给任何正方形元素设置固定宽高及一半长度以上的border-radius，就可以得到圆形圆形椭圆在实际开发中可能更多的是让元素根据内容自动调增，...
html5画布椭圆,在html5的Canvas上绘制椭圆的几种方法总结
weixin_42564147的博客
07-08 265
概述HTML5中的Canvas并没有直接提供绘制椭圆的方法，下面是对几种绘制方法的总结。各种方法各有优缺，视情况选用。各方法的参数相同：context为Canvas的2D绘图环境对象，x为椭圆中心横坐标，y为椭圆中心纵坐标，a为椭圆横半轴长，b为椭圆纵半轴长。参数方程法该方法利用椭圆的参数方程来绘制椭圆//-----------用参数方程绘制椭圆---------------------//函数的...
HTML5的canvas标签
最新发布
06-10
好的，下面是使用HTML5的canvas标签绘制一个底边长为200，上边长为100，高为80，底下两个角是反圆角的梯形： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>梯形绘制</title> </head> <body> <canvas id="myCanvas" width="400" height="200"></canvas> <script> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.moveTo(50, 20); ctx.lineTo(250, 20); ctx.quadraticCurveTo(300, 20, 300, 70); ctx.lineTo(300, 110); ctx.quadraticCurveTo(300, 160, 250, 160); ctx.lineTo(50, 160); ctx.quadraticCurveTo(0, 160, 0, 110); ctx.lineTo(0, 70); ctx.quadraticCurveTo(0, 20, 50, 20); ctx.fillStyle = "#f9c2ff"; ctx.fill(); </script> </body> </html> ``` 运行上述代码，即可在浏览器中看到绘制的梯形。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值