使用canvas绘制圆形，扇形

最新推荐文章于 2023-10-06 00:53:38 发布
最新推荐文章于 2023-10-06 00:53:38 发布
阅读量561 收藏 2
点赞数
文章标签： javascript 开发语言 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_62052306/article/details/131610262
版权

碎碎念

hello，我是小九，今天我们来使用Canvas绘制圆形，扇形。

效果展示

在这里插入图片描述

代码展示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<canvas id="mycanvas" width="500" height="400" style="border: 1px solid black;"></canvas>
	</body>
	<script>
		let cav=document.querySelector('#mycanvas');
		let cxt=cav.getContext("2d");
		//画弧形
		cxt.moveTo(200,200);//圆心点开始
		cxt.arc(200,200,100,Math.PI/180*0,Math.PI/180*110,false);
		cxt.closePath();//封闭
		cxt.stroke();
		cxt.fillStyle='blue';
		cxt.fill();//填充
		
		cxt.beginPath();
		cxt.moveTo(200,200);
		cxt.arc(200,200,100,Math.PI/180*110,Math.PI/180*230,false);
		cxt.closePath();//封闭
		cxt.stroke();
		cxt.fillStyle='green';
		cxt.fill();//填充
		
		cxt.beginPath();
		cxt.moveTo(200,200);
		cxt.arc(200,200,100,Math.PI/180*230,Math.PI/180*360,false);
		cxt.closePath();//封闭
		cxt.stroke();
		cxt.fillStyle='red';
		cxt.fill();//填充
	</script>
</html>
柠檬味的Stars
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
canvas绘制扇形，可以改变数量、扇形角度、扇形方向
z_blackbear的博客
05-07 1486
canvas绘制扇形，支持调整扇形角度，扇形方向 createCanvas() { // 创建一个canvas标签，你也可以在html直接插入，通过document.getElementById(id)的方式获取 this.ele = document.createElement('canvas'); // 设置canvas标签的 id 属性 this.ele.id = 'myCanvas' // 设置c
Canvas（一）：实现简单图形圆与三角形
Dpl0216的博客
07-24 794
API 提供了一个通过JavaScript 和 HTML的元素来绘制图形的方式。它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。
H5画布 canvas（一）canvas简介、绘制圆形/矩形、案例饼状图绘制
商务合作 | 共同学习 | 携手共进
02-18 10万+
canvas 简介、canvas 绘图基础(标签介绍、上下文context、beginPath 状态)、案例：绘制表格、绘制饼状图。
绘制扇形的多种方式，包括border-radius、clip裁剪显示、canvas原点变换等方式的详细理解及demo
zhouzuoluo的博客
07-03 4209
对clip的理解：clip是对使用了该样式的元素进行裁剪显示。使用方法是rect (top, right, bottom, left) 其中参数top代表显示的区域上边界离该元素顶部border-top相对距离，依此分别是右边界离该元素左侧border-left相对距离。参数top和left取值auto时候代表是取值0，bottom和right取值auto时候代表取值100%；注意：clip属性只...
微信小程序canvas绘制圆形图片
CherryCola_zjl的博客
11-06 1万+
canvas基础知识补齐一下，明白了原理便很简单。 先使用.arc绘制一个圆圈，通过.clip裁剪，绘制在圆圈内的内容会出现，其他的都会隐藏。 .drawImage的绘制位置是相对原画布，而不是圆圈，这个不知道的画很坑啊。只要绘制图片的位置再圆圈内便会出现。 //保存上文 targetCtx.save() targetCtx.beginPath() targetCtx.arc(110, 60,...
html5，canvas扇形菜单
11-21
在这个扇形菜单中，`canvas`元素被用来绘制扇形的各个部分，每个部分代表一个菜单项。 扇形菜单的设计通常基于极坐标系统，因为这种系统非常适合创建圆形或扇形的布局。在JavaScript中，我们可以使用`Math.PI`和...
Android图像处理之绘制圆形、三角形及扇形的头像
08-30
除了绘制圆形图片外，我们还可以使用同样的方法来绘制三角形和扇形图片。只需要绘制不同的形状代，即可实现不同的图片形状。 Android图像处理之绘制圆形、三角形及扇形的头像是Android开发中的一项重要技术，本文...
html5+canvas绘制圆形的资产分布图表特效源码.zip
11-03
在这个“html5+canvas绘制圆形的资产分布图表特效源码.zip”压缩包中，我们可以深入探讨HTML5的Canvas API以及如何利用它来创建动态、交互式的圆形图表，这种图表常用于展示资产或数据的分布情况。 Canvas是HTML5中...
canvas手机扇形菜单
08-05
3. 绘制扇形：使用`arc()`方法绘制圆形路径，再用`stroke()`或`fill()`填充或描边。 4. 处理触摸事件：监听`touchstart`, `touchmove`, `touchend`等事件，根据用户触摸位置动态改变扇形状态。 5. 动画效果：通过...
canvas实现转盘抽奖的绘制
10-22
2. 绘制背景：使用`ctx.beginPath()`开始路径，`ctx.arc()`绘制圆形背景，设置颜色（如`ctx.fillStyle = 'white';`）并填充`ctx.fill()`。记得结束路径`ctx.closePath();`。 3. 绘制指针：类似地，使用`ctx.moveTo...
js 使用canvas 把一个圆等分成三份，并做成扇形按钮
最新发布
dxlei44的博客
10-06 321
把一个圆等分成三份或者多份的扇形，并且能通过鼠标和扇形交互，并且精确得识别扇形的触发区域
canvas+js绘制简单统计图(扇形图，条形图)
zem
12-09 4315
第一次写项目，遇上产品让写个统计图分析内容，想来用canvas实现比较方便,顺便把这两个方法放进自己的canvas库中。 绘图前先看一下要绘制的内容，在扇形图中，我们需要每个块占用的百分比，然后计算角度，对应画出弧和分隔线，而对于条形图，我们需要知道每个内容对应的数据量，还需要画出坐标轴。除此之外，两个图都需要的是用不同颜色来标出不同内容，再加个标注标出不同内容对应的颜色，话不多说上代码： ...
Canvas—2D 绘图
青蛙king的博客
06-09 4892
HTML5 中 新增了 <canvas> 元素。 <canvas> 元素负责在页面中设定一个区域，然后就可以通过 JavaScript 动态的在这个区域内绘制图形。
使用 canvas 画圆
雾里看花叹朦胧
12-25 666
使用原生的 HTML5 和 JS ，在屏幕中动态生成随机的 50 个小圆：arc()画圆弧的方法： context.arc(x,y,r,sAngle,eAngle,counterclockwise); arc(圆心的x坐标，圆心的y坐标，圆的半径，起始角（以弧度计，即l圆心的3点钟位置是0度），结束角，规定应该是顺时针还是逆时针画图)其中最后一个参数是可选的，true=逆时针，false =顺时
canvas绘制转盘/扇形 rotate
宏斌的博客
12-03 1272
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&gt...
canvas 画不同颜色的扇形
qq_42039912的博客
05-09 581
<canvas width="600px" height="400px"></canvas> <script> var myCanvas = document.querySelector("canvas"); var ctx = myCanvas.getContext("2d"); var canvasWidth=ctx.canvas.width; var canvasHeight=ctx.canvas.height; //先确定.
Canvas扇形
吃瓜群众的博客
11-21 798
Canvas案例- 你的浏览器不支持canvas，请升级浏览器 (function(){ var canvas = document.querySelector('#cavsElem'); var ctx = canvas.getContext('2d'); var data = [{ "value": .2, "col
Android利用canvas画各种图形(点、直线、弧、圆、椭圆、文字、矩形、多边形、曲线、圆角矩形)
热门推荐
任海丽(3G/移动开发)
01-20 30万+
1、首先说一下canvas类： Class Overview The Canvas class holds the "draw" calls. To draw something, you need 4 basic components: A Bitmap to hold the pixels, a Canvas to host the draw calls (writing into t
canvas动态绘制扇形区域并添加事件
05-15
要在 Canvas 中绘制扇形区域并添加事件，您可以按照以下步骤操作： 1. 在 Canvas 中绘制圆形，使用 `beginPath()` 方法开始路径，使用 `arc()` 方法绘制圆弧，使用 `closePath()` 方法关闭路径，最后使用 `fill()` 或 `stroke()` 方法填充或描边圆形。 2. 绘制扇形区域，使用 `moveTo()` 方法将路径移动到圆心，使用 `lineTo()` 方法连接圆心和扇形边缘，最后使用 `closePath()` 方法关闭路径，再次使用 `fill()` 或 `stroke()` 方法填充或描边扇形区域。 3. 添加事件，使用 `addEventListener()` 方法为 Canvas 元素添加事件监听器。在事件处理程序中，您可以计算鼠标指针位置与圆心之间的距离和角度，以确定鼠标指针是否在扇形区域内。 下面是一个示例代码，展示如何在 Canvas 中绘制扇形区域并添加事件监听器： ```html <canvas id="myCanvas" width="400" height="400"></canvas> ``` ```javascript var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); var x = canvas.width / 2; var y = canvas.height / 2; var radius = 100; var startAngle = 0; var endAngle = Math.PI / 2; var anticlockwise = false; // 绘制圆形 ctx.beginPath(); ctx.arc(x, y, radius, 0, 2 * Math.PI); ctx.closePath(); ctx.stroke(); // 绘制扇形区域 ctx.beginPath(); ctx.moveTo(x, y); ctx.lineTo(x + radius * Math.cos(startAngle), y + radius * Math.sin(startAngle)); ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise); ctx.closePath(); ctx.fill(); // 添加事件监听器 canvas.addEventListener("click", function(event) { var rect = canvas.getBoundingClientRect(); var mouseX = event.clientX - rect.left; var mouseY = event.clientY - rect.top; var dx = mouseX - x; var dy = mouseY - y; var distance = Math.sqrt(dx * dx + dy * dy); var angle = Math.atan2(dy, dx); if (distance <= radius && angle >= startAngle && angle <= endAngle) { console.log("Clicked inside the sector!"); } }); ``` 在这个示例中，我们使用 `arc()` 方法绘制圆形，然后使用 `moveTo()` 和 `lineTo()` 方法连接圆心和扇形边缘，最后使用 `arc()` 方法绘制扇形区域。我们还使用 `fill()` 方法填充扇形区域。 在事件监听器中，我们首先计算鼠标指针位置与圆心之间的距离，然后计算鼠标指针位置与圆心之间的角度。如果鼠标指针在圆形区域内且在扇形区域内，则触发事件。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值