一个非常漂亮的圆形滑块Round Slider,可修改成圆形进度条!

滑块效果图

改动百分比效果图

思路

首先绘制一个灰色边框的圆

        ctx.translate(150,150);//坐标定位至150,150处
		ctx.beginPath();
		ctx.lineWidth='20';
		ctx.strokeStyle='#EEEEEE';
		ctx.arc(0,0,radius,0,2*Math.PI);//绘制一个完整的圆
		ctx.stroke();

    再绘制一个半径一样、圆心一样蓝色的圆

        ctx.beginPath();
		ctx.rotate(-Math.PI);//逆时针选择一个π
		ctx.lineWidth='20';
		ctx.strokeStyle='#6699FF';
		ctx.arc(0,0,radius,0,move/180*Math.PI);//根据move的大小绘制圆弧
		ctx.stroke();

    在圆弧上绘制一个小圆作为指示器

        //绘制指针小圆
		ctx.sav
  • 10
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 15
    评论
要实现一个canvas弧形滑块,可以按照以下步骤进行: 1. 引入vue和canvas,在vue组件中创建一个canvas元素。 2. 通过canvas API绘制一个弧形,可以使用arc方法绘制圆弧。 3. 绘制滑块,可以使用fillRect方法绘制一个矩形。 4. 监听鼠标事件(mousedown、mousemove、mouseup),根据鼠标位置计算滑块的位置,并重新绘制canvas。 下面是一个简单的实现代码: ```html <template> <canvas ref="canvas"></canvas> </template> <script> export default { mounted() { const canvas = this.$refs.canvas const ctx = canvas.getContext('2d') const width = canvas.width const height = canvas.height const centerX = width / 2 const centerY = height / 2 const radius = 100 const startAngle = Math.PI * 1.5 const endAngle = Math.PI * 2.5 let position = 0 let dragging = false function draw() { // 绘制弧形 ctx.beginPath() ctx.arc(centerX, centerY, radius, startAngle, endAngle) ctx.lineWidth = 10 ctx.strokeStyle = '#ddd' ctx.stroke() // 绘制滑块 const sliderWidth = 20 const sliderHeight = 40 const x = centerX + Math.cos(position) * radius - sliderWidth / 2 const y = centerY + Math.sin(position) * radius - sliderHeight / 2 ctx.fillStyle = '#aaa' ctx.fillRect(x, y, sliderWidth, sliderHeight) } function getPosition(x, y) { const dx = x - centerX const dy = y - centerY return Math.atan2(dy, dx) } function handleMouseDown(e) { const x = e.clientX - canvas.offsetLeft const y = e.clientY - canvas.offsetTop const distance = Math.sqrt(Math.pow(centerX - x, 2) + Math.pow(centerY - y, 2)) if (distance > radius - 10 && distance < radius + 10) { dragging = true } } function handleMouseMove(e) { if (dragging) { const x = e.clientX - canvas.offsetLeft const y = e.clientY - canvas.offsetTop position = getPosition(x, y) draw() } } function handleMouseUp() { dragging = false } draw() canvas.addEventListener('mousedown', handleMouseDown) canvas.addEventListener('mousemove', handleMouseMove) canvas.addEventListener('mouseup', handleMouseUp) } } </script> ``` 以上代码创建了一个canvas元素,并在mounted钩子函数中绘制了一个弧形和一个滑块。同时,监听了鼠标事件,在鼠标拖动时计算滑块的位置并重新绘制canvas。
评论 15
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

编程界小明哥

请博主喝瓶水,博主持续输出!

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值