python绘制立体扇形_认识canvas（画扇形动态画圆弧（requestAnimationFrame结合settimeout做的动画）、画表盘）...

最近做的两个项目都是关于canvas的，做完整理一下，方便下一次使用，在vue里写的小demo，

功能：画扇形动态画圆弧（requestAnimationFrame结合settimeout做的动画）、画表盘

1、创建一个ctx对象

2、begain()方法开始画笔

3、fillStyple设置填充颜色 [strokeStyle]

4、arc(x,y,r,startAngle,endAngle,direction) true是顺时针 false是逆时针默认是逆时针

5、closePath()结束画笔开始填充fill() [没有closePah直接stroke()]

mounted () {

this.$nextTick(() => {

1、创建一个ctx对象

2、begain()方法开始画笔

3、fillStyple设置填充颜色 [strokeStyle]

4、arc(x,y,r,startAngle,endAngle,direction) true是顺时针 false是逆时针默认是逆时针

5、closePath()结束画笔开始填充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)

// 动态画圆弧

let ctx02 = this.$refs.can02.getContext('2d')

this.drawArc(ctx02, 400, 400, 100, 0, 360, '#ddd', 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,刻度数，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自动算半径]，开始角度，结束角度，填充颜色，方向)

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自动算半径]，开始角度，结束角度，画的颜色，是否圆角，方向)

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()

}

python绘制立体扇形_认识canvas（画扇形动态画圆弧（requestAnimationFrame结合settimeout做的动画）、画表盘）...相关推荐

python绘制立体扇形_Python如何用Matplotlib画出优雅的扇形图？
colors = [plt.cm.Accent(i) for i in np.linspace(0, 1, country_metrics.shape[0])] #制作颜色,从0到1的区域内均 ...
python绘制反比例函数_怎样在几何画板中画可变的反比例函数
原标题:怎样在几何画板中画可变的反比例函数反比例函数是中学时代必学的一种函数,其图像是是双曲线,是用平滑的曲线把一些特殊的点连接起来的,掌握反比例函数的图像是中学数学的重点和难点.作为好用的绘图工具 ...
python绘制三维曲线图_机器学习的绘图库有哪些？如何运用python绘制机器学习常见曲线？...
专栏引荐绘图的变量单变量查看单变量最方便的无疑是displot()函数,默许绘制一个直方图,并你核密度估计(KDE) sns.set(color_codes=True) np.random.se ...
python绘制樱花洒落_用python绘制樱花树
黑夜可能漫长,但总会迎来温暖的阳光,三月如期而至,武大的樱花又一次盛开.那么今天就一起来看看怎样在python中画一棵美丽的樱花树- 说到用python画画,那当然就是小乌龟Turtle库了,为啥是t ...
python绘制混淆矩阵_如何实现python绘制混淆矩阵？
大家从python基础到如今的入门,想必都对python有一定基础,今天小编给大家带来一个关于python的高阶内容--绘制混淆矩阵,一起来看下吧~ 介绍: 混淆矩阵通过表示正确/不正确标签的计数来表 ...
用python绘制熊猫图案_使用熊猫在Python中绘制数据
用python绘制熊猫图案在关于基于Python的绘图库的系列文章中 ,我们将对使用pandas(一种非常流行的Python数据操作库)的绘图进行概念性的研究. Pandas是Python中用于可缩 ...
layui导入加载动画_厉害了！这个免费神器帮你无脑做施工动画
你好,这里是 BIMBOX.今天诚意给你安利一款好用免费的施工动画软件. 很多施工企业在建完模型后,都会用模拟动画的形式展示施工方案流程.做施工方案可视化评审.质量安全交底等.施工模拟动画这两年也成 ...
python绘制回形纹_用python画百变风味月饼
举头望明月,低头思故乡,不知道为什么,现在总是对儿时的事有感而发,回不到的过去,唯有珍惜当下,中秋快乐. 1.首先我们需要导入画图和数据计算的相关库. import numpy as np from ...
python绘制彩色同心圆_如何用python画同心圆
Python是一种计算机程序设计语言.是一种面向对象的动态类型语言,最初被设计用于编写自动化脚本,随着版本的不断更新和语言新功能的添加,越来越多被用于独立的.大型项目的开发.Python在设计上坚持了 ...

python绘制立体扇形_认识canvas（画扇形动态画圆弧（requestAnimationFrame结合settimeout做的动画）、画表盘）...

python绘制立体扇形_认识canvas（画扇形动态画圆弧（requestAnimationFrame结合settimeout做的动画）、画表盘）...相关推荐

最新文章

热门文章

python绘制立体扇形_认识canvas（画扇形 动态画圆弧（requestAnimationFrame结合settimeout做的动画）、画表盘）...

python绘制立体扇形_认识canvas（画扇形 动态画圆弧（requestAnimationFrame结合settimeout做的动画）、画表盘）...相关推荐

最新文章

热门文章

python绘制立体扇形_认识canvas（画扇形动态画圆弧（requestAnimationFrame结合settimeout做的动画）、画表盘）...

python绘制立体扇形_认识canvas（画扇形动态画圆弧（requestAnimationFrame结合settimeout做的动画）、画表盘）...相关推荐