canvas的一些基础分享

来源：互联网发布：数据切片编辑：程序博客网时间：2024/06/02 05:44

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

<!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>

这里直接汇总在一起了，如下图所示：
这里写图片描述

阅读全文

0 0