使用canvas绘制圆形,使用canvas绘制渐变圆环
这篇文章主要介绍了某视频剪辑软件使用帆布绘制圆环，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件使用帆布绘制圆环的具体代码，供大家参考，具体内容如下
很多时候，会有绘制圆环的要求，比如渐变，圆环等等
所以现在封装了一个方法，可以直接绘制
绘制样子大概这样的
//html
div class=medium-graph
画布id= medium-graph-canvas width= 292 height= 292 /
/div
//js
已安装(){
var medium _ canvas=document。getelementbyid(中等图形画布)
this.drawMain(medium_canvas，60，2， #435377 )
},
方法：{
drawMain(drawing_elem，percent，colornums，bgcolor) {
/*
@drawing_elem:绘制对象
@百分比：绘制圆环百分比，范围[0, 100]
@forecolor:绘制圆环的前景色，颜色代码
@bgcolor:绘制圆环的背景色，颜色代码
@colornums:作为参数传入，绘制哪个颜色
*/
var context=drawing _ elem。获取上下文(“2d”)
var center _ x=drawing _ elem。宽度/2
var center _ y=drawing _ elem。高度/2
var rad=(数学。* 2)/100
变化速度=0
//绘制背景圆圈
函数backgroundCircle() {
context.save()
context.beginPath()
context.lineWidth=8 //设置线宽
var半径=中心x-上下文。线条宽度
context.lineCap=round
context.strokeStyle=bgcolor
context.arc(center_x，center_y，radius - 14，0，Math* 2，假)
context.stroke()
context.closePath()
context.restore()
}
//绘制运动圆环
函数前景圆圈(n)
context.save()
//上下文。stroke style=forecolor//决定圆环颜色
context.lineWidth=22
context.lineCap=round
var半径=中心x-上下文。线条宽度
context.beginPath()
//if (colornums==1) {
//var g=上下文。createlanegradient(0，0，180，0) //创建渐变对象渐变开始点和渐变结束点
//g.addColorStop(0， #64C58F) //添加颜色点
//g.addColorStop(1， #0084FF) //添加颜色点
//context.strokeStyle=g //使用渐变对象作为圆环的颜色
//}
if (colornums==2) {
var g=上下文。创建车道坡度(0，0，180，0)
g.addColorStop(0， #E7954C )
g.addColorStop(1， #D36638 )
context.strokeStyle=g
}
//if (colornums==3) {
//var g=上下文。创建车道坡度(0，0，180，0)
//g.addColorStop(0， #FF7C78) //
//g.addColorStop(1， #FD413E )
//context.strokeStyle=g
//}
上下文。电弧(
center_x，
中心y
半径，
数学。/4,
数学/4n *弧度，
错误的
) //用于绘制圆弧context.arc(x坐标，y坐标，半径，起始角度，终止角度，顺时针/逆时针)
context.stroke()
context.closePath()
context.restore()
}
//绘制文字
函数文本(n) {
//context.save() //保存和恢复可以保证样式属性只运用于该段帆布元素
//context.fillStyle=forecolor
//var font_size=40
//上下文。font=font _ size Helvetica像素
//var text _ width=上下文。度量文本(n .到fixed(0) % ).宽度
//上下文。填充文本(n .到fixed(0) % ，center_x - text_width/2，center_y font_size/2)
//context.restore()
}
//执行动画
（函数drawFrame() {
如果（速度=百分比){
窗户。requestanimationframe(绘制框架)
}否则{
返回错误的
}
context.clearRect(0，0，drawing_elem.width，drawing_elem.height)
//backgroundCircle()
//文本（速度)
前景圈（速度)
如果（速度=百分比){
速度
}否则{
速度=1
}
})()
}
},
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。