标签：Canvas 填充 300 money ctx canvas var 绘制 deg
曲线的绘制和填充
语法
arc()：在当前子路经添加一条弧线；
语法：context.arc(x,y,r,sAngle,eAngle,counterclockwise);
| 参数 | 描述 |
|---|---|
| x | 圆的中心的 x 坐标。 |
| y | 圆的中心的 y 坐标。 |
| r | 圆的半径。 |
| sAngle | 起始角，以弧度计。（弧的圆形的三点钟位置是 0 度）。 |
| eAngle | 结束角，以弧度计。 |
| counterclockwise | 可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。 |
绘制弧形
var canvas = document.querySelector("#box")
var ctx = canvas.getContext("2d") //Context 上下文
let deg=Math.PI/180
ctx.arc(300,300,200,0*deg,270*deg,true)
ctx.stroke()
效果图：
绘制 钟表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<style>
#box {
border: 1px gray solid;
}
</style>
<canvas id="box" width="600" height="600">
</canvas>
<script>
var canvas = document.querySelector("#box")
var ctx = canvas.getContext("2d")
var deg = Math.PI / 180//计算度数用作单位
function biaopan(){
var r=200//半径
var y1=300//中心x坐标
var x1=300//中心y坐标
var kedu=10//刻度长度
ctx.arc(x1, y1, r, 0, 360 * deg)//绘制一个完整的园
var startAnge=6;//一个刻度有6°
for(let i=0;i<60;i++){
let a;//大刻度
if(i%5){a=kedu}//如果刻度被5整除，那么变为大刻度
else{a=kedu*2}
var y2=y1+r*Math.sin(i*startAnge*deg)//半径×刻度夹角6°+中心y坐标=刻度在圆上的y坐标
var x2=x1+r*Math.cos(i*startAnge*deg)//半径×刻度夹角6°+中心x坐标=刻度在圆上的x坐标
var y3=y1+(r-a)*Math.sin(i*startAnge*deg)//半径-大/刻度的长度=刻度向内端点的y坐标
var x3=x1+(r-a)*Math.cos(i*startAnge*deg)//半径-大/刻度的长度=刻度向内端点的x坐标
ctx.moveTo(x2,y2)//连接刻度的首尾（首）
ctx.lineTo(x3,y3)//（尾）
}
ctx.stroke()
}
function biaozhen(){
var sh=160//秒长度
var hh=100//时
var mh=140//分
var s=new Date().getSeconds()
var h = new Date().getHours()
var m = new Date().getMinutes()
//秒针
ctx.moveTo(300,300)
var y4=300+sh*Math.sin((s*6-90)*deg)
var x4=300+sh*Math.cos((s*6-90)*deg)
ctx.lineTo(x4,y4)
//时针
ctx.moveTo(300,300)
//var y5=300+hh*Math.sin((s*0.5/60-90)*deg)
//var x5=300+hh*Math.cos((s*0.5/60-90)*deg)
var y5=300+hh*Math.sin((m/60-90)*deg)
var x5=300+hh*Math.cos((m/60-90)*deg)
ctx.lineTo(x5,y5)
//分针
ctx.moveTo(300,300)
var y6=300+mh*Math.sin((m*6-90)*deg)
var x6=300+mh*Math.cos((m*6-90)*deg)
ctx.lineTo(x6,y6)
ctx.stroke()
}
setInterval(()=>{
canvas.width=canvas.width
biaopan()
biaozhen()
},1000)
</script>
</body>
</html>
饼状图
var canvas = document.querySelector("#box")
var ctx = canvas.getContext("2d")
var arr = [{
name: "衣服",
money: 8000
}, {
name: "car",
money: 2000
}, {
name: "food",
money: 7000
}, {
name: "cash",
money: 1000
},{
name: "cash2",
money: 5000
},{
name: "cash3",
money: 5400
}]
arr.total=0;
//求总金额
for(var i=0;i<arr.length;i++){
arr.total=arr.total+arr[i].money
}
var start=0;
var deg=Math.PI/180
arr.forEach(el=>{
ctx.beginPath()
var r=parseInt(Math.random()*255)
var g=parseInt(Math.random()*255)
var b=parseInt(Math.random()*255)
ctx.fillStyle=`rgb(${r},${g},${b})`
var n=(el.money/arr.total)*360//每一类与总数的比例
ctx.arc(300,300,200,start*deg,(start+n)*deg)
ctx.lineTo(300,300)
start=start+n
ctx.fill()
ctx.stroke()
})
标签：Canvas,填充,300,money,ctx,canvas,var,绘制,deg 来源： https://www.cnblogs.com/LIXI-/p/16511157.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。