HTML5之通过arc方法绘制多个不同样式的圆

最新推荐文章于 2022-12-19 22:07:33 发布
最新推荐文章于 2022-12-19 22:07:33 发布
阅读量2.7k 收藏
点赞数
分类专栏： HTML5 文章标签： 前端技术 HTML5之画布 画圆
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011659172/article/details/17514547
版权

 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>通过arc方法绘制多个不同样式的圆</title>
</head>
<body>
<div>
<p>
<span onClick="span1_click()">实体圆</span>
<span onClick="span2_click()">边框圆</span>
<span onClick="span3_click()">衔接圆</span>
<canvas id="cMain" width="280px" height="190px"></canvas>
</p>
</div>
</body>
<script type="text/javascript">
function $(id){
return document.getElementById(id); 
}
/*
绘制实体圆
*/
function span1_click(){
 var  cnv = $("cMain");
 var cxt = cnv.getContext("2d");
 //清除画布原有图形
 cxt.clearRect(0,0,280,190);
 //画实体圆
 cxt.beginPath();
 cxt.arc(100,100,50,0,Math.PI*2,true);
 cxt.closePath();
 //设置填充的背景色
 cxt.fillStyle="#666";
 //进行填充
 cxt.fill();
}
/*
绘制边框圆
*/
function span2_click(){
 var  cnv = $("cMain");
 var cxt = cnv.getContext("2d");
 //清除画布原有图形
 cxt.clearRect(0,0,280,190);
 //画边框圆
 cxt.beginPath();
 cxt.arc(100,100,50,0,Math.PI*2,true);
 cxt.closePath();
 //设置填充的背景色
 cxt.fillStyle="#666";
 //设置边框宽度
 cxt.lineWidth=2;
 //进行描边
 cxt.stroke();
}
/*
绘制衔接圆
*/
function span3_click(){
 var  cnv = $("cMain");
 var cxt = cnv.getContext("2d");
 //清除画布原有图形
 cxt.clearRect(0,0,280,190);
 //画圆
 cxt.beginPath();
 cxt.arc(100,100,50,0,Math.PI*2,true);
 cxt.closePath();
 //填充的背景色
 cxt.fillStyle="#eee";
 //进行填充
 cxt.fill();
 //设置边框色
 cxt.strokeStyle="#666";
 //设置边框宽度
 cxt.lineWidth=2;
 //进行描边
 cxt.stroke();
 //开始画衔接的边框圆
 cxt.beginPath();
 cxt.arc(175,100,50,0,Math.PI*2,true);
 cxt.closePath();
 //设置边框颜色
 cxt.strokeStyle="#666";
 //设置边框宽度
 cxt.lineWidth=2;
 //进行描边
 cxt.stroke();
}
</script>
</html>

自定义函数解析1:当用户点击"实体圆"时,将调用自定义函数span1_click(),在该函数中:首先,通过获取的上下文环境对象cxt来调用clearRect()方法,清空原有画布中的图形，放置图形在画布中的交叉展示;然后，调用arc()方法绘制一个圆的路径,圆心坐标为(100,100),半径为50像素,弧度从0开始到Math.PI*2结束、按顺时针方向进行绘制,路径绘制完成之后,填充背景颜色;最后使用fill()方法将颜色填充至已绘制的图形中,从而在画布中绘制一个实体圆

自定义函数解析2:绘制圆的路径与绘制实体圆的方法一致,只是最后在绘制图形的时候使用stroke()方法对路径进行描边,而不是绘制实体圆中的fill()方法。在进行描边之前,通过lineWidth和strokeStyle属性分别设置边框圆的宽度和颜色,最后使用strkoe()方法,按照设置的宽度和颜色对已绘制的图路径进行描边

自定义函数解析3:结合绘制实体圆和边框圆的方法与过程,只是在绘制第二个圆时,改变了圆心的横坐标距离.

咩咩文
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
C语言Arc函数画圆弧,用Canvas的arc函数绘制圆和图形
weixin_29543187的博客
05-23 3349
Canvas没有circle函数来画一个圆。在Canvas绘图API中，提供了一个函数来绘制不同的弧，包括圆。arc函数可接受以下参数，具体说明参见表把角度转换为弧度arc函数使用的angle参数指的是radian(弧度)而不是degree(角度)。如果原来习惯于使用角度，那么就需要在把angle参数值传入arc函数之前将角度值转换成弧度值。可以用下面的公式来转换角度单位：Radians = π/...
html语言arc属性,html5 canvas常用属性方法（介绍）
weixin_31220401的博客
05-31 320
本章给大家带来html5 canvas常用属性方法(介绍)，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。首先引入标签就不必说了。其次就是得到canvas的2d环境了( var ctx = canvasDom.getContext('2d') )。现在呢，你可能想画点什么东西。画东西之前你要确定好一些东西，比如:ctx.fillStyle：这是一个用来确定填充颜色的属性。(带fil...
html5制作圆形
milijiangjun的博客
08-15 1万+
代码如下 Document .addBg {     width: 100px;     height: 100px;     background-color: rgba(113,228,250,1);     border-radius: 100px;     -webkit-border-radius: 100px;     position: absol
canvas arc() 方法绘制弧线、曲线、圆形，rect() 绘制矩形
热门推荐
蚩尤后裔-汪茂雄
11-16 1万+
目录 canvas arc() 方法 绘制圆形 填充圆形 canvas rect() 绘制矩形 注意：canvas 的 width 与 height 属性的值不能带单位，如 100px、100% 都是错误的，只能是纯数字，单位默认为 px。 canvas arc() 方法 1、arc() 方法创建弧/曲线（用于创建圆或部分圆），更多可参考《HTML 5 Canvas 绘制图形图像》 ...
js+html5实现canvas绘制圆形图案的方法
10-24
`beginPath()`方法用于创建一个新的路径，即开始一个新的绘制任务，这对于绘制多个图形时避免路径混合至关重要。`arc(x, y, radius, startAngle, endAngle)`方法用于绘制一个弧形，其中`x`和`y`是弧形中心的坐标，`...
基于html5绘制圆形多角图案
09-28
`arc`方法用于绘制圆，`fillStyle`设置填充样式为之前创建的渐变，然后用`fill`方法填充圆形。 接下来，再次遍历并绘制多边形，但这次是在圆的边缘。`r`变量控制圆的半径，每次循环都会增加，使得圆逐渐扩大，同时...
html5 canvas绘制的圆形气泡渐变背景动画特效源码.zip
11-03
创建渐变对象后，可以添加多个颜色停止点，然后将此渐变作为fillStyle或strokeStyle使用，绘制出带有渐变效果的图形。 3. **动画效果**：实现动画的关键在于利用requestAnimationFrame()函数来定期重绘Canvas。通过...
html5 canvas绘制的不同有趣情绪表情动画特效源码.zip
11-02
这个项目中，开发者很可能利用了Canvas的`fillRect()`方法来绘制表情的基础形状，如圆形或椭圆形代表脸部，`arc()`用于绘制眼睛和嘴巴等曲线形状，以及`beginPath()`, `moveTo()`, `lineTo()`等方法来绘制更复杂的...
基于HTML5 Canvas做的圆盘抽奖小程序.zip
最新发布
02-13
2. **绘图路径与样式**：使用`beginPath()`开始一个新的路径，然后通过`arc()`函数绘制圆盘的边缘。`strokeStyle`和`fillStyle`分别设置线条和填充的颜色，`stroke()`和`fill()`用于绘制已定义的路径。 3. **旋转...
html5动态画圆（可根据此方法动态处理其他图形）
08-09
在鼠标移动时生成图形，就像QQ截图的椭圆工具
html5（arc（）方法）
zhangjinlei00的专栏
11-27 496
arc() 方法使用一个中心点和半径，为一个画布的当前子路径添加一条弧。 语法 arc(x, y, radius, startAngle, endAngle, counterclockwise) 参数 参数 描述 x, y 描述弧的圆形的圆心的坐标。 radius 描述弧的圆形的半径。 startAngle, endAngle 沿着圆指
HTML5 Canvas arc()函数讲解
appteam_vlctech的专栏
10-08 1733
为大家介绍曲线的语法。 如果要创建一个圆形，我们可以使用arc()方法。 语法：arc(定义一个中心点，半径，起始角度，结束角度，和绘图方向：顺时针或逆时针) 代码：context.arc(centerX, centerY, radius, startingAngle, endingAngle, antiClockwise); HTML5 Canvas Arc 说明： Canvas
HTML5中canvas的fillRect、arc用法
sxj的专栏
11-20 8442
1、要使用html5，首先要有一个支持html5的浏览器，比如：火狐，谷歌等等，首先在body区域加入一个canvas标签，id为canvas-fram,如一下代码： 2、在head区域加入一个draw2D函数，在函数内通过document.getElementById("canvas-fram")获得canvas标签对象，然后在通过该对象的getContext("2d")获得可画图形的画板，最
html5中圆形的绘制
weixin_72303943的博客
07-05 2733
圆形的绘制
HTML5系列代码：使用arc()方法绘制一条弧线
BLOG域名:programb.blog.csdn.net
06-27 872
arc() 方法创建弧/曲线（用于创建圆或部分圆）。 提示：如需通过 arc() 来创建圆，请把起始角设置为 0，结束角设置为 2*Math.PI。 提示：请使用 stroke() 或 fill() 方法在画布上绘制实际的弧。 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>使用arc()方法绘制一条弧线</title> <style type="text.
html画布里面画圆,html5 canvas 画布画圆
weixin_42413377的博客
06-18 1529
什么是 Canvas？HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。javascript画布是一个矩形区域，您能够控制其每一像素。csscanvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。html浏览器支持Internet Explorer 9+, Firefox, Opera, Chrome 以及 Safari 支持 标签。javaps:Int...
HTML5 arc的例子
weixin_30716141的博客
09-08 109
demo.html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>arc</title> <script> function init() { ...
H5基础（画布）
2201_75624032的博客
12-19 393
arc(): 设置圆 参数1: 圆心x 参数2：圆心 y 参数3： 半径 参数4： 起始角度 参数5：结束角度 360 * Math.PI / 180。arc(): 设置圆 参数1: 圆心x 参数2：圆心 y 参数3： 半径 参数4： 起始角度 参数5：结束角度 360 * Math.PI / 180。rect(): 设置矩形 参数1：x 参数2： y 参数3： width 参数4： height。rect(): 设置矩形 参数1：x 参数2： y 参数3： width 参数4： height。
【画布---H5的新增技术】
weixin_44892365的博客
12-08 668
【画布---H5的新增技术】
HTML5 Canvas图形绘制：开始与闭合路径详解
例如，如果你想要绘制多个不相连的形状，每个形状都需要独立开始和结束路径。不正确地使用这些方法可能导致形状之间的意外连接，影响最终的渲染效果。\n\n在Canvas API中，除了开始和闭合路径外，还有其他许多用于...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值