这篇文章主要介绍了vue使用canvas绘制圆环，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue使用canvas绘制圆环的具体代码，供大家参考，具体内容如下
很多时候，会有绘制圆环的要求，比如渐变，圆环等等
所以现在封装了一个方法，可以直接绘制
绘制样子大概这样的
// html <div class="medium-graph"> <canvas id="medium-graph-canvas" width="292" height="292" /> </div>
// js
mounted() {
var medium_canvas = document.getElementById('medium-graph-canvas')
this.drawMain(medium_canvas, 60, 2, '#435377')
},
methods: {
drawMain(drawing_elem, percent, colornums, bgcolor) {
/*
@drawing_elem: 绘制对象
@percent：绘制圆环百分比, 范围[0, 100]
@forecolor: 绘制圆环的前景色，颜色代码
@bgcolor: 绘制圆环的背景色，颜色代码
@colornums: 作为参数传入，绘制哪个颜色
*/
var context = drawing_elem.getContext('2d')
var center_x = drawing_elem.width / 2
var center_y = drawing_elem.height / 2
var rad = (Math.PI * 2) / 100
var speed = 0
// 绘制背景圆圈
function backgroundCircle() {
context.save()
context.beginPath()
context.lineWidth = 8 // 设置线宽
var radius = center_x - context.lineWidth
context.lineCap = 'round'
context.strokeStyle = bgcolor
context.arc(center_x, center_y, radius - 14, 0, Math.PI * 2, false)
context.stroke()
context.closePath()
context.restore()
}
// 绘制运动圆环
function foregroundCircle(n) {
context.save()
// context.strokeStyle = forecolor //决定圆环颜色
context.lineWidth = 22
context.lineCap = 'round'
var radius = center_x - context.lineWidth
context.beginPath()
// if (colornums == 1) {
// var g = context.createLinearGradient(0, 0, 180, 0) // 创建渐变对象 渐变开始点和渐变结束点
// g.addColorStop(0, '#64C58F') // 添加颜色点
// g.addColorStop(1, '#0084FF') // 添加颜色点
// context.strokeStyle = g // 使用渐变对象作为圆环的颜色
// }
if (colornums == 2) {
var g = context.createLinearGradient(0, 0, 180, 0)
g.addColorStop(0, '#E7954C')
g.addColorStop(1, '#D36638')
context.strokeStyle = g
}
// if (colornums == 3) {
// var g = context.createLinearGradient(0, 0, 180, 0)
// g.addColorStop(0, '#FF7C78') //
// g.addColorStop(1, '#FD413E')
// context.strokeStyle = g
// }
context.arc(
center_x,
center_y,
radius,
-Math.PI / 4,
-Math.PI / 4 + n * rad,
false
) // 用于绘制圆弧context.arc(x坐标，y坐标，半径，起始角度，终止角度，顺时针/逆时针)
context.stroke()
context.closePath()
context.restore()
}
// 绘制文字
function text(n) {
// context.save() // save和restore可以保证样式属性只运用于该段canvas元素
// context.fillStyle = forecolor
// var font_size = 40
// context.font = font_size + 'px Helvetica'
// var text_width = context.measureText(n.toFixed(0) + '%').width
// context.fillText(n.toFixed(0) + '%', center_x - text_width / 2, center_y + font_size / 2)
// context.restore()
}
// 执行动画
(function drawFrame() {
if (speed <= percent) {
window.requestAnimationFrame(drawFrame)
} else {
return false
}
context.clearRect(0, 0, drawing_elem.width, drawing_elem.height)
// backgroundCircle()
// text(speed)
foregroundCircle(speed)
if (speed >= percent) {
speed ++
} else {
speed += 1
}
})()
}
},
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持北冥有鱼。
您可能感兴趣的文章:
- 微信小程序canvas实现手写签名
- vue3如何将html元素变成canvas(海报生成),进行图片保存/截图
- vue echarts实现改变canvas长和宽自适应
- JS前端使用canvas实现扩展物体类和事件派发
