vue使用canvas繪制圓環(huán)

更新時(shí)間：2022年04月10日 15:22:53 作者：深圳最菜的前端

這篇文章主要介紹了vue使用canvas繪制圓環(huán)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了vue使用canvas繪制圓環(huán)的具體代碼，供大家參考，具體內(nèi)容如下

很多時(shí)候，會(huì)有繪制圓環(huán)的要求，比如漸變，圓環(huán)等等

所以現(xiàn)在封裝了一個(gè)方法，可以直接繪制

繪制樣子大概這樣的

// 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: 繪制對(duì)象
?? ??? ??? ??? ?@percent：繪制圓環(huán)百分比, 范圍[0, 100]
?? ??? ??? ??? ?@forecolor: 繪制圓環(huán)的前景色，顏色代碼
?? ??? ??? ??? ?@bgcolor: 繪制圓環(huán)的背景色，顏色代碼
?? ??? ??? ??? ?@colornums: 作為參數(shù)傳入，繪制哪個(gè)顏色
?? ??? ??? ?*/
?? ??? ??? ?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 // 設(shè)置線寬
?? ??? ??? ??? ?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()
?? ??? ??? ?}

?? ??? ??? ?// 繪制運(yùn)動(dòng)圓環(huán)
?? ??? ??? ?function foregroundCircle(n) {
?? ??? ??? ??? ?context.save()
?? ??? ??? ??? ?// context.strokeStyle = forecolor //決定圓環(huán)顏色
?? ??? ??? ??? ?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) // 創(chuàng)建漸變對(duì)象 ?漸變開(kāi)始點(diǎn)和漸變結(jié)束點(diǎn)
?? ??? ??? ??? ?// ?? ?g.addColorStop(0, '#64C58F') // 添加顏色點(diǎn)
?? ??? ??? ??? ?// ?? ?g.addColorStop(1, '#0084FF') // 添加顏色點(diǎn)
?? ??? ??? ??? ?// ?? ?context.strokeStyle = g // 使用漸變對(duì)象作為圓環(huán)的顏色
?? ??? ??? ??? ?// }
?? ??? ??? ??? ?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坐標(biāo)，y坐標(biāo)，半徑，起始角度，終止角度，順時(shí)針/逆時(shí)針)
?? ??? ??? ??? ?context.stroke()
?? ??? ??? ??? ?context.closePath()
?? ??? ??? ??? ?context.restore()
?? ??? ??? ?}

?? ??? ??? ?// 繪制文字
?? ??? ??? ?function text(n) {
?? ??? ??? ??? ?// context.save() // save和restore可以保證樣式屬性只運(yùn)用于該段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()
?? ??? ??? ?}

?? ??? ??? ?// 執(zhí)行動(dòng)畫
?? ??? ??? ?(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
?? ??? ??? ??? ?}
?? ??? ??? ?})()
?? ??? ?}
?? ?},

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: