canvas

最新推荐文章于 2024-07-02 22:34:09 发布

转载最新推荐文章于 2024-07-02 22:34:09 发布 · 61 阅读

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/59c3f3fff265da06456d7655

canvas从ie9开始支持，

![var colors=["aqua","black","blue","fuchsia","gray","green","lime",
"red","silver","yellow"];
//var nums[];
//得到canvas
var canvas=document.getElementById("cvs");
if(canvas.getContext){
var canvas_context=canvas.getContext("2d");//得到画笔
var end=0;
//画弧线
for(var i=0;i<colors.length;i++){
var start=end,
end=Math.PI2/10(i+1);

                //绘制弧线
                canvas_context.beginPath();
                canvas_context.arc(280,180,130,start,end,false); //圆心的坐标，半径，起始的弧度，结束的弧度，是否逆时针
                canvas_context.lineTo(280,180);
                canvas_context.fillStyle=colors[i];
                canvas_context.fill();
            }

            //    canvas_context.fillRect(10,30,20,10);
                //文字横坐标不变，纵坐标
            //    canvas_context.fillText("黄色:20%",35,40);
            //画百分数
            //画左上角,color_content绘制左上角的内容
            var color_content=["aqua","black","blue","fuchsia","gray","green","lime",
                        "red","silver","yellow"]; 
            for(var j=0;j<colors.length;j++){
                //矩形的横坐标不变，纵坐标加20
                canvas_context.fillStyle=colors[j];
                canvas_context.fillRect(10,10+20*j,20,10); //画矩形
                canvas_context.fillText(color_content[j]+"20%",35,20+20*j);
                //填充文字
            }



        }复制代码