div里利用canvas进行一个饼形图的绘制

2022-06-16 分类：网站建设

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>绘制饼形图。</title> 
    <style> 
        canvas{ 
            border: 1px solid green; 
        } 
    </style> 
</head> 
<body> 
    <!-- 绘制饼形图 --> 
    <canvas width="500" height="500" id="canvas"></canvas> 
</body> 
<script> 
    var canvas = document.getElementById(’canvas’); 
    var ctx = canvas.getContext(’2d’); 
    function toAngle(radian){ 
        return radian*180/Math.PI; 
    } 
    function toRadian(angle){ 
        return angle*Math.PI/180; 
    } 
    /*将饼状图画出来*/ 
    var colors = ’green,yellow,pink,blue,red,lightgreen,lightblue’.split(’,’); 
    var text = ’HTML5,Canvas,Javascript,Css3,Ajax,框架封装,jQuery与移动Web’.split(’,’); 
    var x0 = canvas.width/2, 
        y0 = canvas.height/2, 
        radius = 100, 
        start = -5, 
        distance = 20, 
        padding = 5, 
        step = 360/colors.length; 
    for(var i = 0 ; i < colors.length ; i ++){ 
        ctx.beginPath(); 
        ctx.fillStyle = colors[i]; 
        ctx.moveTo(x0,y0); 
        ctx.arc(x0,y0,radius,toRadian(start),toRadian(start+=step)); 
        ctx.fill(); 
        /*画斜线*/ 
        ctx.beginPath(); 
        ctx.strokeStyle = colors[i]; 
        var x1 = x0 + (radius+distance)*Math.cos(toRadian(( start-step/2 ))), 
            y1 = y0 + (radius+distance)*Math.sin(toRadian(( start-step/2 ))); 
        ctx.moveTo(x0,y0); 
        ctx.lineTo(x1,y1); 
        ctx.stroke(); 
        /*写文字*/ 
        ctx.beginPath(); 
        ctx.fillStyle = colors[i]; 
        var textX = x1, 
            textY = y1; 
        if(start-step/2 > 90 && start-step/2 < 270){ 
            ctx.textAlign = ’right’; 
            textX = textX - padding; 
        }else{ 
            ctx.textAlign = ’left’; 
            textX = textX + padding; 
        } 
        ctx.fillText(text[i],textX,textY-padding/2); 
        /*画直线*/ 
        ctx.beginPath(); 
        ctx.moveTo(x1,y1); 
        //计算文字的宽度 
        var length = ctx.measureText( text[ i ] ).width 
        if(start-step/2 > 90 && start-step/2 < 270){ 
            x1 += -2*padding-length; 
        }else{ 
            x1 += 2*padding + length; 
        } 
        ctx.lineTo(x1,y1); 
        ctx.stroke(); 
        /*画饼形图*/ 
        /*ctx.beginPath(); 
        ctx.fillStyle = colors[i]; 
        ctx.moveTo(x0,y0); 
        ctx.arc(x0,y0,radius,toRadian(start),toRadian(start+=step)); 
        ctx.fill();*/ 
    } 
</script> 
</html>

名称栏目：div里利用canvas进行一个饼形图的绘制
网站URL：https://www.cdcxhl.com/news37/167787.html

成都网站建设公司_创新互联，为您提供网页设计公司、商城网站、全网营销推广、用户体验、网站设计、移动网站建设

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容