您好,登錄后才能下訂單哦!
這篇文章主要介紹“vue怎么使用canvas繪制圓環(huán)”的相關(guān)知識,小編通過實際案例向大家展示操作過程,操作方法簡單快捷,實用性強,希望這篇“vue怎么使用canvas繪制圓環(huán)”文章能幫助大家解決問題。
效果圖:
// 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:繪制圓環(huán)百分比, 范圍[0, 100] @forecolor: 繪制圓環(huán)的前景色,顏色代碼 @bgcolor: 繪制圓環(huán)的背景色,顏色代碼 @colornums: 作為參數(shù)傳入,繪制哪個顏色 */ 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() } // 繪制運動圓環(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)建漸變對象 漸變開始點和漸變結(jié)束點 // g.addColorStop(0, '#64C58F') // 添加顏色點 // g.addColorStop(1, '#0084FF') // 添加顏色點 // context.strokeStyle = g // 使用漸變對象作為圓環(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),半徑,起始角度,終止角度,順時針/逆時針) 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() } // 執(zhí)行動畫 (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 } })() } },
關(guān)于“vue怎么使用canvas繪制圓環(huán)”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識,可以關(guān)注億速云行業(yè)資訊頻道,小編每天都會為大家更新不同的知識點。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。