摘要:最近做的兩個項目都是關(guān)于的,做完整理一下,方便下一次使用,在里寫的小,功能畫扇形動態(tài)畫圓弧結(jié)合做的動畫畫表盤創(chuàng)建一個對象方法開始畫筆設(shè)置填充顏色是順時針是逆時針默認是逆時針結(jié)束畫筆開始填充沒有直接創(chuàng)建一個對象方法開始畫筆設(shè)置填充顏色是順時針
最近做的兩個項目都是關(guān)于canvas的,做完整理一下,方便下一次使用,在vue里寫的小demo,
功能:畫扇形 動態(tài)畫圓弧(requestAnimationFrame結(jié)合settimeout做的動畫)、畫表盤
1、創(chuàng)建一個ctx對象
2、begain()方法開始畫筆 3、fillStyple設(shè)置填充顏色 [strokeStyle] 4、arc(x,y,r,startAngle,endAngle,direction) true是順時針 false是逆時針 默認是逆時針 5、closePath()結(jié)束畫筆 開始填充fill() [沒有closePah直接stroke()]
mounted () { this.$nextTick(() => { /* 1、創(chuàng)建一個ctx對象 2、begain()方法開始畫筆 3、fillStyple設(shè)置填充顏色 [strokeStyle] 4、arc(x,y,r,startAngle,endAngle,direction) true是順時針 false是逆時針 默認是逆時針 5、closePath()結(jié)束畫筆 開始填充fill() [沒有closePah直接stroke()] */ // 封裝畫扇形 let ctx = this.$refs.can01.getContext("2d") this.drawFanShapes(ctx, 400, 400, 0, 0, 150, "red", false) this.drawFanShapes(ctx, 400, 400, 0, 120, 200, "green", false) // 動態(tài)畫圓弧 let ctx02 = this.$refs.can02.getContext("2d") this.drawArc(ctx02, 400, 400, 100, 0, 360, "#ffffd", 10, "round", false) let globalAni = null let endAngle = 0 let _self = this function animate () { let timer = setTimeout(() => { globalAni = requestAnimationFrame(animate) if (endAngle < 270) { endAngle += 10 _self.drawArc(ctx02, 400, 400, 100, 0, endAngle, "green", 10, "round", false) } else { clearTimeout(timer) cancelAnimationFrame(globalAni) } }, 20) } globalAni = requestAnimationFrame(animate) // 畫時鐘表盤 let ctx03 = this.$refs.can03.getContext("2d") this.drawClock(ctx03, 200, 200, 60, -180 - 160, 1, "red") }) }, methods: { // 畫表刻度(ctx,x,y,刻度數(shù),startX, endY,lineWidth, strokeColor) drawClock (ctx, x, y, num, startX, endY, lineWidth, strokeColor) { for (let i = 0; i < 60; i++) { ctx.save() ctx.lineWidth = 1 ctx.strokeStyle = "red" ctx.translate(200, 200) ctx.rotate(6 * i * Math.PI / 180) ctx.beginPath() ctx.moveTo(0, -180) ctx.lineTo(0, -160) ctx.stroke() ctx.restore() } }, // 畫扇形(ctx,width,height,半徑[0自動算半徑],開始角度,結(jié)束角度,填充顏色,方向) drawArc (ctx, width, height, radius, startAngle, endAngle, strokeColor, lineWidth, round, direction) { ctx.save() let basic = { x: width / 2, y: height / 2, r: (!radius) ? (width - lineWidth) / 2 : radius, startAngle: (startAngle / 180) * Math.PI, endAngle: (endAngle / 180) * Math.PI, direction: direction || false } ctx.beginPath() ctx.strokeStyle = strokeColor ctx.lineWidth = lineWidth ctx.arc(basic.x, basic.y, basic.r, basic.startAngle, basic.endAngle, direction) ctx.lineCap = round ctx.stroke() ctx.restore() }, // 畫圓弧(ctx,x,y,半徑[0自動算半徑],開始角度,結(jié)束角度,畫的顏色,是否圓角,方向) drawFanShapes (ctx, width, height, radius, startAngle, endAngle, fillColor, direction) { let basic = { x: width / 2, y: height / 2, r: (!radius) ? width / 2 : radius, startAngle: (startAngle / 180) * Math.PI, endAngle: (endAngle / 180) * Math.PI, direction: direction || false } ctx.beginPath() ctx.fillStyle = fillColor ctx.moveTo(basic.x, basic.y) ctx.arc(basic.x, basic.y, basic.r, basic.startAngle, basic.endAngle, direction) ctx.closePath() ctx.fill() } }
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/109358.html
摘要:最近做的兩個項目都是關(guān)于的,做完整理一下,方便下一次使用,在里寫的小,功能畫扇形動態(tài)畫圓弧結(jié)合做的動畫畫表盤創(chuàng)建一個對象方法開始畫筆設(shè)置填充顏色是順時針是逆時針默認是逆時針結(jié)束畫筆開始填充沒有直接創(chuàng)建一個對象方法開始畫筆設(shè)置填充顏色是順時針 最近做的兩個項目都是關(guān)于canvas的,做完整理一下,方便下一次使用,在vue里寫的小demo,功能:畫扇形 動態(tài)畫圓弧(requestAnima...
摘要:渣渣成品圖最近對于圓形有種特別的感情呢因為寫了個就像到了用來做時鐘大概會比較有趣吧所以就著手寫了個這樣的一個東西大概代碼上錯漏還是蠻多的接下來分享下關(guān)于如何開發(fā)一個圓形時鐘條吧使用這次就沒有采用的方法來實現(xiàn)圓環(huán)了因為我想要做多層嵌套的圓環(huán)覺 渣渣成品圖:http://codepen.io/thewindswor... 最近對于圓形有種特別的感情呢...因為寫了個cricle_proce...
摘要:渣渣成品圖最近對于圓形有種特別的感情呢因為寫了個就像到了用來做時鐘大概會比較有趣吧所以就著手寫了個這樣的一個東西大概代碼上錯漏還是蠻多的接下來分享下關(guān)于如何開發(fā)一個圓形時鐘條吧使用這次就沒有采用的方法來實現(xiàn)圓環(huán)了因為我想要做多層嵌套的圓環(huán)覺 渣渣成品圖:http://codepen.io/thewindswor... 最近對于圓形有種特別的感情呢...因為寫了個cricle_proce...
摘要:渣渣成品圖最近對于圓形有種特別的感情呢因為寫了個就像到了用來做時鐘大概會比較有趣吧所以就著手寫了個這樣的一個東西大概代碼上錯漏還是蠻多的接下來分享下關(guān)于如何開發(fā)一個圓形時鐘條吧使用這次就沒有采用的方法來實現(xiàn)圓環(huán)了因為我想要做多層嵌套的圓環(huán)覺 渣渣成品圖:http://codepen.io/thewindswor... 最近對于圓形有種特別的感情呢...因為寫了個cricle_proce...
摘要:先上效果圖這種圖形大家應(yīng)該都見過,俗稱儀表盤,當(dāng)然,上圖只是個最基本的儀表盤架子,可能在實際場景中還會其他很多花里胡哨的點綴,那些暫且不管,不是關(guān)鍵,這東西經(jīng)常見到,但還沒親自上手在代碼層面實現(xiàn)過,最近做的一個需求恰好有這個場景,這里歸先上效果圖: showImg(https://user-gold-cdn.xitu.io/2019/5/23/16ae28a94cb51d3e); 這種圖形大...
閱讀 1617·2021-11-22 14:45
閱讀 1063·2021-11-17 09:33
閱讀 3322·2021-09-02 09:48
閱讀 969·2019-08-30 15:54
閱讀 2767·2019-08-30 15:53
閱讀 2553·2019-08-30 12:54
閱讀 2241·2019-08-29 12:37
閱讀 2421·2019-08-26 13:58