旋转圆形画布javascript_Javascript_Html_Canvas

旋转圆形画布javascript

javascript html canvas

旋转圆形画布javascript,javascript,html,canvas,Javascript,Html,Canvas,我在用HTML5画布旋转一个圆圈时遇到了麻烦。我正在创建一个圆，用作加载量规。现在，装载部分（石灰绿色）从45度标记处开始。我似乎不知道如何让这部分从0度开始。任何帮助都将不胜感激 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>guage</title> </head> <body> <

我在用HTML5画布旋转一个圆圈时遇到了麻烦。我正在创建一个圆，用作加载量规。现在，装载部分（石灰绿色）从45度标记处开始。我似乎不知道如何让这部分从0度开始。任何帮助都将不胜感激

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>guage</title>
  </head>
  <body>
    <canvas id="canvas" width="300" height="300"></canvas>
    <p>Your browser does not support canvas.</p>
    <script src="http://127.0.0.1:3000/guage.js" charset="utf-8"></script>
  </body>
</html>

以下是浏览器中输出的屏幕截图：有没有办法将圆旋转45度？或者你们中有没有人有我在这个例子中完全忽略尝试的替代建议

提前谢谢

创建圆时，需要将起始圆弧设置为顶部。.arc（）的第四个参数是起始位置。只需将其设置为-Math.PI/2，就可以从顶部开始

//Create fill for circle
var angle = 90 * (Math.PI / 180);
ctx.beginPath();
ctx.lineWidth = "20";
ctx.strokeStyle = "rgb(24, 242, 92)";
ctx.arc(150,125, 75, -Math.PI/2, rando * Math.PI); // The fourth argument here
ctx.stroke();

供参考。（但固定为75%）

创建一个简单的量程刻度盘。下面是一个简单的拨号盘，其设置类似于范围滑块

将

min

，

max

设置为所需的值。将dial.start设置到起始位置。当前默认值为12点钟（-1/2弧度）。使用功能

dial.setValue（value）

设置值。它将自动安排渲染。必须使用

拨号.setRenderContext（context2D）

设置渲染上下文。如果你不这样做，它就不会画任何东西

这些值是颜色等的其他值。。应该很容易解决

//数学常数
常数MPI=Math.PI；
常数MPI2=Math.PI*2；
//拨盘
变量拨号={
开始：-MPI/2，//开始位置。
最小值：0，//最小值
最大值：100，//最大值
值：0，//当前值
宽度：20，
内宽：16，
背：“灰色”，
颜色：“7F3”，
字体：“62px arial”，
textCol：“灰色”，
ctx:null，
rendering:false，//指示渲染到期的标志
setRenderContext:函数（上下文）{
this.ctx=上下文；
this.draw=this.draw.bind（this）；//将draw函数绑定到thi
},
setValue:function（val）{//函数设置值
this.value=Math.min（this.max，Math.max（this.min，val））；
如果（！this.rendering）{
这是真的；
requestAnimationFrame（this.draw）；
}
},
draw:函数drawDial（）{//用于绘制刻度盘的函数
此参数=假；
如果（this.ctx==null）{//没有上下文，那么不要渲染
返回；
}
const ctx=this.ctx；
常数w=ctx.canvas.width；
常数h=ctx.canvas.height；
var r=Math.min（w，h）/2；//获取readius
常数cw=w/2；
常数ch=h/2；
ctx.clearRect（0,0，w，h）；//清除刻度盘
//渲染刻度盘背面的圆圈
ctx.fillStyle=this.back；
ctx.beginPath（）；
ctx.arc（cw、ch、r、0、MPI2）；
ctx.arc（cw，ch，r-this.width，0，MPI2，true）；//反向绘制内圈
ctx.fill（）；
//获取刻度盘位置和百分比值
var ang=（this.value-this.min）/（this.max-this.min）；
变量百分比=（ang*100）.toFixed（0）+“%”；//作为百分比字符串
ang*=MPI2；
//获取范围外半径
r-=该宽度/2；
r+=该宽度为0.5/2；
ctx.fillStyle=this.color；
ctx.beginPath（）；
//从外部开始顺时针绘制，然后从内部开始逆时针绘制。
ctx.arc（cw、ch、r、this.start、this.start+ang）；
ctx.arc（cw，ch，r-this.innerWidth，this.start+ang，this.start，true）；
ctx.fill（）；
//如果有字体，则绘制百分比
如果（this.font！==null）{
ctx.font=this.font；
ctx.fillStyle=this.textCol；
ctx.textAlign=“中心”；
ctx.textb基线=“中间”；
ctx.fillText（百分比，cw，ch）；
}
}    
}
//========================================================================
//使用拨号盘；
//创建画布和上下文
const canvas=document.createElement（“canvas”）；
画布宽度=200；
画布高度=200；
const ctx=canvas.getContext（“2d”）；
document.body.appendChild（画布）；//将画布添加到文档中。
//------------------------------------------------------------------------
//设置拨号盘
var myValue=1；//价值
拨号.setRenderContext（ctx）；//附加渲染上下文
拨号设置值（0）；//第一次拔出刻度盘
// ----------------------------------------------------------------------
//此功能将拨号增加到100%，然后等待2秒
//然后重新开始
无功转速=1；
函数moveDialUp（）{
myValue+=速度；
拨号设置值（myValue）；
如果（myValue>100）{
myValue=0；
速度=数学随机数（）*5+1；
setTimeout（moveDialUp，2000）；//2秒钟后重新启动
}否则{
设置超时（移动拨号，50）；
}
}
//开始吧
moveDialUp（）非常感谢。我是画布新手，没有意识到第四个论点与起点有关。
//Create fill for circle
var angle = 90 * (Math.PI / 180);
ctx.beginPath();
ctx.lineWidth = "20";
ctx.strokeStyle = "rgb(24, 242, 92)";
ctx.arc(150,125, 75, -Math.PI/2, rando * Math.PI); // The fourth argument here
ctx.stroke();