Canvas：曲线的绘制和填充

曲线的绘制和填充

语法

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

posted on 2022-07-24 15:42 香香鲲阅读(226) 评论(0) 收藏举报

Canvas：曲线的绘制和填充

曲线的绘制和填充

语法

绘制弧形

绘制 钟表

饼状图

绘制钟表