随手画个饼状图及时钟

今天复习canvas，随手画了个饼状图及时钟。

首先注意canvas中画圆用的是弧度而不是角度，但一般情况下角度对我们来说更直观，所以需要将角度转成弧度，很简单，一个圆角度为360，而弧度为2π，写个函数转换一下就行。

//角度转弧度，angle to radian
function a2r(angle){
    return angle*Math.PI/180;
}

然后还有个注意事项是canvas中画圆中角度0度是在正上方，而弧度0度在正右方。

计算圆弧上某点坐标

使用路径之前先beginPath

实现代码

//绘制饼状图
        function pieChart(arr){
            var total = 0;      //传入数组各项值总和
            arr.forEach(function(item){
                total += item;
            });
            var angleArr = [];      //传入的数组各项相对角度
            var uncludeLastTotal = 0;       //不包括最后一项的总角度和
            for(var i=0; i<arr.length; i++){        
                if(i == arr.length-1){      //如果是最后一项，就直接用360减去之前的总和
                    angleArr.push(360-uncludeLastTotal);
                }else{           //否则计算角度，四舍五入
                    angleArr.push(Math.round(360*arr[i]/total));
                    uncludeLastTotal += Math.round(360*arr[i]/total);
                }
            }
            var nowAngle = 0;       //当前角度，初始值为0
            var canvas = document.getElementById('canvas');
            var ctx = canvas.getContext('2d');
            var cx = 400, cy = 200, r = 100;    //圆心和半径
            angleArr.forEach(function(item){
                var startAng = nowAngle, endAng = nowAngle+item;     //起始及结束角度
                nowAngle += item;
                var x = cx + Math.sin(a2r(startAng)) * r;    //圆弧上坐标x
                var y = cy - Math.cos(a2r(startAng)) * r;    //圆弧上坐标y
                
                ctx.beginPath();
                ctx.moveTo(cx, cy);
                ctx.lineTo(x, y);
                ctx.arc(cx, cy, r, a2r(startAng-90), a2r(endAng-90))     //用的参数是弧度
                ctx.fillStyle = randomColor();
                ctx.closePath();
                ctx.fill();
            })
            // return angleArr;
        }

        pieChart([3, 6, 15, 13, 22, 8])
        // console.dir(canvas)
        
        //随机颜色值
        function randomColor(){
            var r = Math.floor(Math.random()*256);
            var g = Math.floor(Math.random()*256);
            var b = Math.floor(Math.random()*256);
            return `rgb(${r},${g},${b})`;
        }

        //角度转弧度
        function a2r(angle){
            return angle*Math.PI/180;
        }

效果

画时钟

其实画时钟很简单，主要是用到canvas中的旋转rotate()以及位移translate()两个方法。不过在使用canvas变换方法还是有要注意的地方，比如说：

1、先变换在画图。

2、rotate()的旋转中心在画布原点而不是所画图形的中心，要想绕自己中心旋转可以先将自己中心与画布原点重合，然后旋转，然后再平移。

3、变换方法书写与执行是倒序的，比如想要先旋转再平移，那就先写translate()再写rotate()。

4、使用变换方法是先save()（保存之前的画布状态），最后restore()（恢复之前的画布状态）。

实现代码

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
setInterval(function(){
    var rotateAngle = 0;
    //清画布
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    //画时钟刻度
    for(var i=0; i<60; i++){
        rotateAngle += 6;
        // canvas变换之前先save保存canvas状态（颜色，宽高，变换等），不包括图形本身
        ctx.save();
        //canvas变换方法执行顺序是倒序的
        ctx.translate(400, 200);     //再平移
        ctx.rotate(a2r(rotateAngle));        //先旋转
        if(i%5 == 4){                
            ctx.fillRect(120, -2, 10, 4);
        }else{
            ctx.fillRect(120, -1, 6, 2);
        }
        ctx.restore();
    }

    var time = new Date();
    var hour = time.getHours();
    var minute = time.getMinutes();
    var second = time.getSeconds();
    
    //时针
    ctx.save();
    ctx.translate(400, 200);
    ctx.rotate(a2r(hour*30-90));          
    ctx.fillStyle = '#666';
    ctx.fillRect(-10, -3, 70, 6);
    ctx.restore();

    //分针
    ctx.save();
    ctx.translate(400, 200);
    ctx.rotate(a2r(minute*6-90));           
    ctx.fillStyle = 'blue';
    ctx.fillRect(-10, -2, 90, 4);
    ctx.restore();

    //秒针
    ctx.save();
    ctx.translate(400, 200);
    ctx.rotate(a2r(second*6-90));              
    ctx.fillStyle = 'red';
    ctx.fillRect(-10, -1, 110, 2);
    ctx.restore();
}, 1000)

//角度转弧度，angle to radian
function a2r(angle){
    return angle*Math.PI/180;
}

效果

随手画个饼状图及时钟

画时钟

猜你喜欢