canvas的一些基础分享

最新推荐文章于 2024-09-24 21:47:11 发布

原创最新推荐文章于 2024-09-24 21:47:11 发布 · 339 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#canvas

代码专栏收录该内容

2 篇文章

订阅专栏

第一次发，就不多说了，直接上代码！

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<canvas id="canvas">
    对不起，你的浏览器不支持,请先升级您的浏览器！
</canvas>
<script>
    (function () {
        //获取canvas节点对象
        var canvas=document.getElementById("canvas");
        canvas.width="600";
        canvas.height="600";
        canvas.style.border="1px solid";

        //获取canvas上下文
        var context=canvas.getContext("2d");

        /*
        * 图形数据集
        * */
        var data = [
        {
            "value": .1,
            "color": "#ccc",
            "title": "老总"
        }{
            "value": .2,
            "color": "red",
            "title": "高级经理"
        },{
            "value": .3,
            "color": "blue",
            "title": "职员1"
        },{
            "value": .4,
            "color": "green",
            "title": "职员2"
        }];

        /*
        * 遍历数据绘制饼状图
        * */
        var tempAngle=-90; //起始度数
        var x0=300,y0=300,r=150;
        for(var i=0;i<data.length;i++){
            var obj=data[i];
            //开启新状态
            context.beginPath();
            //圆心点
            context.moveTo(300,300);
            //设置填充样式
            context.fillStyle=obj.color;
            /*
            * 绘圆：context.art(x,y,r,startAngle,endAngle,counterclockwise);
            * */
            var currentAngle=obj.value*360;  //当前角度
            var startAngle=tempAngle*Math.PI/180;//起始角度
            var endAngle=(currentAngle+tempAngle)*Math.PI/180; //终点角度

            //绘画
            context.arc(x0,y0,r,startAngle,endAngle);

            context.fill();
            context.stroke();

            /*
            绘制文字
            text-x=x0+Mathcos(指定的度数)*（半径+突出的长度）
             text-=y0+Mathsin(指定的度数)*（半径+突出的长度）
            */
            context.beginPath();
            var text=obj.value*100+"%占比";
            var textAngle=tempAngle+1/2*currentAngle;
            var x=x0+Math.cos(textAngle*Math.PI/180)*(r+20);
            var y=y0+Math.sin(textAngle*Math.PI/180)*(r+20);
            context.font="bold 22px '微软雅黑'";
            if(textAngle>90&&tempAngle<270){
                context.textAlign="end"
            }
            context.fillText(text,x,y);
            context.fill();

            tempAngle+=currentAngle;

        }
    })()
</script>
</body>
</html>

这里写图片描述

通过JavaScript 来绘制，因为canvas 元素本身是没有绘图能力的。所有绘制的工作必须在JavaScript内部完成。下面是一些canvas的绘制总结：

<script>
            var c = document.getElementById("canvas");
            var context = c.getContext("2d");
            /*绘制背景*/
            context.fillStyle="#FF0000";
            context.fillRect(0,0,150,75);

            /*绘制三角形*/
            context.moveTo(10,10);//开始的启点
            context.lineTo(150,50);//启点到该点的直线
            context.lineTo(10,50);//上一个点到该点的直线
            context.lineTo(10,10);//收尾连接
            context.stroke();

            /*绘制圆*/
            context.fillStyle="#fff000";
            context.beginPath();
            context.arc(30,30,10,0,Math.PI*2,true);
            context.closePath();
            context.fill();

            /*颜色渐变*/
            var rbg = context.createLinearGradient(0,80,150,75);
            rbg.addColorStop(0,"#ff0000");
            rbg.addColorStop(1,"#00ff00");
            context.fillStyle=rbg;
            context.fillRect(0,80,150,75);

        </script>