html5_画布绘制绘制实心圆和空心圆

最新推荐文章于 2022-11-08 23:31:42 发布
最新推荐文章于 2022-11-08 23:31:42 发布
阅读量1.6w 收藏 12
点赞数 3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wutrg1502/article/details/80820890
版权


 

<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<title>绘制实心圆和空心圆</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border: 1px solid;"></canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var context=c.getContext("2d");
context.fillStyle="#00FFFF";
context.beginPath();
context.arc(70,70,60,Math.PI*2,0,true);
context.closePath();
context.fill();
context.translate(140,10);
context.strokeStyle="#00ff11";
context.beginPath();
context.arc(70,70,60,Math.PI*2,0,true);
context.stroke();
</script>
</body>

</html>


在绘制圆形的时候会用到beginpath()、arc()、closethpath()、fill()这四个方法。

context.arc(x,y,radious,startAngle,endAngle,anticlockwise);

arc本意为用于绘制弧线，当采用适当的参数后，即可绘制圆形。参数中的x,y为起点坐标

radious为半径

startAngle为起始角度

endAngle为结束的角度

anticlockwise为是否按顺时钟方向进行绘制


冬天下雪啦
关注
  • 3
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
空心圆代码
abcyh999的博客
03-22 2114
空心圆代码如下： <!DOCTYPE html> <html> <head> <style> #{ padding: 0; margin: 0; } #one{ width: 300px; height: 300px; background:red; border-radius:...
HTML5 Canvas 绘制椭圆与椭圆弧的实现
热门推荐
无心的专栏
06-01 1万+
由于HTML Canvas 2D Context标准中并没有直接绘制椭圆与椭圆弧的方法，所以浏览器普遍没有这个方法，不过，Chrome支持ellipse方法。IE11，Edge, Firefox, Safari目前最新版都还不支持。所以，我们需要用JS来实现这个方法，给Context2D加上一个ellipse方法。
利用HTML5实现空心圆技巧
小果果
07-21 7279
您的浏览器不支持canvas标签 //开始画图,通过javascript画出来 //1得到画布： var canvas = document.getElementById('myCanvas'); //得到画笔，获得二维的画布 var ctx = canvas.getContext('2d'); //开始画圆 ctx.beginPath(); ctx.fillS
Html实用型基础标签——列表、表格元素
qq_41890177的博客
07-14 2636
一、列表 分为无序列表，有序列表，定义列表 1、无序列表 <ul> <li></li> <li></li> </ul> <ul> <li>111</li> <li>222</li> <li>333</li> <li>444</li> </ul> 可以注意到...
如何用html5制作空心圆,html5使用canvas画空心圆与实心圆
weixin_31064267的博客
06-29 1009
var canvas=document.getElementById("canvas");var cxt=canvas.getContext("2d");//画一个空心圆cxt.beginPath();cxt.arc(200,200,50,0,360,false);cxt.lineWidth=5;cxt.strokeStyle="green";cxt.stroke();//画空心圆cxt.clos...
用HTML5画空心圆,html5使用canvas画空心圆与实心圆
weixin_39878646的博客
06-24 189
这里给大家分享的是一个学习canvas的时候做的画空心圆与实心圆的练习题，非常简单。复制代码代码如下:var canvas=document.getElementById("canvas");var cxt=canvas.getContext("2d");//画一个空心圆cxt.beginPath();cxt.arc(200,200,50,0,360,false);cxt.lineWidth=5;...
简易画图_MFC实心圆_shinningbu3_
09-29
【简易画图_MFC实心圆_shinningbu3_】是一个基于MFC（Microsoft Foundation Classes）框架的小程序，主要用于教学或实践目的，帮助用户理解如何在Windows环境下利用MFC库来实现图形绘制功能，特别是绘制实心圆。...
html5使用canvas画空心圆与实心圆
09-28
在这个例子中，我们将详细探讨如何使用Canvas API来绘制空心圆和实心圆。 首先，我们需要在HTML文档中设置一个`<canvas>`元素，指定它的宽度、高度和背景色。以下是一个简单的示例： ```html ;"> ``` 这个`...
HTML5canvas 绘制一个圆环形的进度表示实例
08-31
为了增加视觉效果，我们还需要在红色扇形内部绘制一个白色空心圆，这可以通过创建一个较小半径的圆实现。然后再画一条细线，使圆环看起来更立体，线的颜色设置为灰色。 最后，为了使效果更加完善，我们还可以添加更...
Android开发笔记之:在ImageView上绘制圆环的实现方法
09-05
// 绘制空心圆或空心矩形 } @Override protected void onDraw(Canvas canvas) { int center = getWidth() / 2; int innerCircle = dip2px(context, 83); // 内圆半径 int ringWidth = dip2px(context, 10); ...
Android 圆形百分比中间空心
09-18
// 绘制内圆（空心部分） canvas.drawCircle(centerX, centerY, centerX - circlePaint.getStrokeWidth() / 2, circlePaint); // 计算百分比弧度 float progressAngle = (360 * percentage) / 100f; // 绘制...
html5中怎么使用canvas画空心圆与实心圆
細水、長流√的专栏
11-08 1644
这篇文章主要介绍“html5中怎么使用canvas画空心圆与实心圆”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“html5中怎么使用canvas画空心圆与实心圆”文章能帮助大家解决问题。
【无标题】
m0_73749576的博客
09-17 136
京东商城（文字链接）
html无序列表空心圆_若想学前端开发，要从HTML基本元素的列表第二节
weixin_39685697的博客
12-15 1898
列表1、无序列表无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。无序列表使用 <ul> 标签<ul><li>Coffee</li><li>Milk</li></ul><ul><li>Coffee</li><li>Milk</li>...
HTML常用属性
maduan12的博客
12-02 587
文字 <h1>....</h1>一级标题 ..... <h3>....</h3>三级标题 ..... <h6>....</h6>六级标题 ​ <p></p>段落标签，文字会独占一行 <i></i>文字斜体效果 <b></b>文字加粗效果 ​ <br>换行标记 <hr>水平线 &nbsp;网页上显示一个空格 ​ <!--注释-
html css画中空圆圈,实现CSS圆环的5种方法(小结)
weixin_31995467的博客
05-30 5345
想到去年面试实习的时候被问到实习圆环的问题，特意写篇文章总结一下吧！总结了一下大概有5种方法。1. 两个标签的嵌套：.element1{width: 200px;height: 200px;background-color: lightpink;border-radius: 50%;}.child1{width: 100px;height: 100px;border-radius: 50%;bac...
HTML画空心圆
牛奶爱上咖啡的博客
10-16 9779
无标题文档     span{position:absolute; color: red}/*设置颜色*/        //////////////////////////////////////////画空心圆///////////////////////////////////////////// function emptyCircle(){ //    
html怎么做实心圆,html5如何使用canvas画空心圆与实心圆
weixin_36238073的博客
07-04 843
这篇文章主要介绍了html5使用canvas画空心圆与实心圆,需要的朋友可以参考下这里给大家分享的是一个学习canvas的时候做的画空心圆与实心圆的练习题，非常简单。var canvas=document.getElementById("canvas");var cxt=canvas.getContext("2d");//画一个空心圆cxt.beginPath();cxt.arc(200,200,...
利用Java设计绘图版，可以绘画直线、空心椭圆或者实心椭圆、空心矩形或者实心矩形和多边形并且可以在界面设计大小和位置
最新发布
06-07
好的，您想要开发一个绘图软件，可以绘画直线、空心椭圆或者实心椭圆、空心矩形或者实心矩形和多边形，并且可以在界面设计大小和位置。我可以给您提供一些思路和建议。 首先，您需要一个图形界面库来实现绘图板的...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值