canvas教程

华为项目Tree canvas画图2

字号+ 作者：H5之家 来源：H5之家 2017-07-30 10:00 我要评论( )

华为项目Tree canvas画图2,//添加数组找到box_content ul li 对应的indexct.lineTo($(.box_content ul li).eq(j).position().left+57,($(.box_header ul li).eq(


//添加数组找到box_content ul li 对应的index

ct.lineTo($(".box_content ul li").eq(j).position().left+57,($(".box_header ul li").eq(index).position().top)+106+140);//中点
ct.lineTo($(".box_content ul li").eq(j).position().left+57,($(".box_header ul li").eq(index).position().top)+320);//中点
ct.strokeStyle = "#f95f5b";//线条颜色
ct.lineWidth = 2;//线条的宽度
ct.stroke();//绘制

} 
}
}

box_content_ct(index);
//console.log(($(".box_header ul li").eq(index).position().left) +155 );
}

//box_content ul li画线
function box_content_ct(index){
if( box_content_arr.length<1){
return false;
}
var box_content_max = Math.max.apply(null, box_content_arr);//获取数组最大值
var box_content_min = Math.min.apply(null, box_content_arr);//获取数组最小值

var n1_left = $(".box_content ul li").eq(box_content_max).position().left+60;
var n2_left = $(".box_content ul li").eq(box_content_min).position().left+100;
var n3_left = $(".box_content ul li").eq(box_content_min).position().left+100;
var n4_left = $(".box_content ul li").eq(box_content_max).position().left+60;


var box_header_left = $(".box_header ul li").eq(index).position().left+203;
//alert(box_header_left);
//alert(arr+"--"+max+"--"+min+"--"+index);
//绘制弧形
if(index == 1){
if(box_content_min+1<5&&box_content_max>4){
ct.beginPath(); 
ct.clearRect(n3_left-21-23,244,21,21);
ct.arc(n3_left-23,266,20,1*Math.PI,1.5*Math.PI,false);
ct.stroke();


ct.beginPath();
ct.clearRect(n4_left-23,244,21,21);
ct.arc(n4_left-23,266,20,1.5*Math.PI,2*Math.PI,false);
ct.stroke();
}
if(box_content_min+1<5 &&box_content_arr.length !=1){
ct.beginPath(); 
ct.clearRect(n3_left-21-23,244,21,21);
ct.arc(n3_left-23,266,20,1*Math.PI,1.5*Math.PI,false);
ct.stroke();
}else if(box_content_min>4 &&box_content_arr.length !=1){
ct.beginPath();
ct.clearRect(n4_left-23,244,21,21);
ct.arc(n4_left-23,266,20,1.5*Math.PI,2*Math.PI,false);
ct.stroke();
}else if(box_content_min+1<5){
ct.beginPath(); 
ct.clearRect(n3_left-21-23,244,21,21);
ct.arc(n3_left-23,266,20,1*Math.PI,1.5*Math.PI,false);
ct.stroke();
}else if(box_content_min>4){
ct.beginPath();
ct.clearRect(n4_left-23,244,21,21);
ct.arc(n4_left-23,266,20,1.5*Math.PI,2*Math.PI,false);
ct.stroke();
}else if(box_content_max>4){
ct.beginPath();
ct.clearRect(n4_left-23,244,21,21);
ct.arc(n4_left-23,266,20,1.5*Math.PI,2*Math.PI,false);
ct.stroke();
}
}else if(index == 0){
if(box_content_min+1<2&&box_content_max>1){
ct.beginPath(); 
ct.clearRect(n3_left-21-23,244,21,21);
ct.arc(n3_left-23,266,20,1*Math.PI,1.5*Math.PI,false);
ct.stroke();

ct.beginPath();
ct.clearRect(n4_left-23,244,21,21);
ct.arc(n4_left-23,266,20,1.5*Math.PI,2*Math.PI,false);
ct.stroke();
}
if(box_content_min+1<2 &&box_content_arr.length !=1){
ct.beginPath(); 
ct.clearRect(n3_left-21-23,244,21,21);
ct.arc(n3_left-23,266,20,1*Math.PI,1.5*Math.PI,false);
ct.stroke();
}else if(box_content_min>1 &&box_content_arr.length !=1){
ct.beginPath();
ct.clearRect(n4_left-23,244,21,21);
ct.arc(n4_left-23,266,20,1.5*Math.PI,2*Math.PI,false);
ct.stroke();
}else if(box_content_min+1<2){
ct.beginPath(); 
ct.clearRect(n3_left-21-23,244,21,21);
ct.arc(n3_left-23,266,20,1*Math.PI,1.5*Math.PI,false);
ct.stroke();
}else if(box_content_min>1){
ct.beginPath();
ct.clearRect(n4_left-23,244,21,21);
ct.arc(n4_left-23,266,20,1.5*Math.PI,2*Math.PI,false);
ct.stroke();
}else if(box_content_max>1){
ct.beginPath();
ct.clearRect(n4_left-23,244,21,21);
ct.arc(n4_left-23,266,20,1.5*Math.PI,2*Math.PI,false);
ct.stroke();
}
}else if(index ==3){
if(box_content_min+1<11&&box_content_max>10){
ct.beginPath(); 
ct.clearRect(n3_left-21-23,244,21,21);
ct.arc(n3_left-23,266,20,1*Math.PI,1.5*Math.PI,false);
ct.stroke();

ct.beginPath();
ct.clearRect(n4_left-23,244,21,21);
ct.arc(n4_left-23,266,20,1.5*Math.PI,2*Math.PI,false);
ct.stroke();
}
if(box_content_min+1<11 &&box_content_arr.length !=1){
ct.beginPath(); 
ct.clearRect(n3_left-21-23,244,21,21);
ct.arc(n3_left-23,266,20,1*Math.PI,1.5*Math.PI,false);
ct.stroke();
}else if(box_content_min>10 &&box_content_arr.length !=1){
ct.beginPath();
ct.clearRect(n4_left-23,244,21,21);
ct.arc(n4_left-23,266,20,1.5*Math.PI,2*Math.PI,false);
ct.stroke();
}else if(box_content_min+1<11){
ct.beginPath(); 
ct.clearRect(n3_left-21-23,244,21,21);
ct.arc(n3_left-23,266,20,1*Math.PI,1.5*Math.PI,false);
ct.stroke();
}else if(box_content_min>10){
ct.beginPath();
ct.clearRect(n4_left-23,244,21,21);
ct.arc(n4_left-23,266,20,1.5*Math.PI,2*Math.PI,false);
ct.stroke();
}else if(box_content_max>10){
ct.beginPath();
ct.clearRect(n4_left-23,244,21,21);
ct.arc(n4_left-23,266,20,1.5*Math.PI,2*Math.PI,false);
ct.stroke();
}

}else if(index==2){
if(box_content_min+1<8&&box_content_max>7){
ct.beginPath(); 
ct.clearRect(n3_left-21-23,244,21,21);
ct.arc(n3_left-23,266,20,1*Math.PI,1.5*Math.PI,false);
ct.stroke();

ct.beginPath();
ct.clearRect(n4_left-23,244,21,21);
ct.arc(n4_left-23,266,20,1.5*Math.PI,2*Math.PI,false);
ct.stroke();
}
if(box_content_min+1<8 &&box_content_arr.length !=1){
ct.beginPath(); 
ct.clearRect(n3_left-21-23,244,21,21);
ct.arc(n3_left-23,266,20,1*Math.PI,1.5*Math.PI,false);
ct.stroke();
}else if(box_content_min>7 &&box_content_arr.length !=1){
ct.beginPath();
ct.clearRect(n4_left-23,244,21,21);
ct.arc(n4_left-23,266,20,1.5*Math.PI,2*Math.PI,false);
ct.stroke();
}else if(box_content_min+1<8){
ct.beginPath(); 
ct.clearRect(n3_left-21-23,244,21,21);
ct.arc(n3_left-23,266,20,1*Math.PI,1.5*Math.PI,false);
ct.stroke();
}else if(box_content_min>7){
ct.beginPath();
ct.clearRect(n4_left-23,244,21,21);
ct.arc(n4_left-23,266,20,1.5*Math.PI,2*Math.PI,false);
ct.stroke();
}else if(box_content_max>7){
ct.beginPath();
ct.clearRect(n4_left-23,244,21,21);
ct.arc(n4_left-23,266,20,1.5*Math.PI,2*Math.PI,false);
ct.stroke();
}

}
}



//点击开始画线
$(document).on("click",".box_header ul li",function(){
//alert($(this).index());
var index = $(this).index();
$(this).css("border","2px solid #f95f5b").siblings().css("border","2px solid #fff");

for(var i=0;i<dates.data.saiData[dates.data.saiData.length-1].children.length;i++){
if($(this).find("p").html() == dates.data.saiData[dates.data.saiData.length-1].children[i].name_en){
ctContent(radarLeftRight[dates.data.saiData[dates.data.saiData.length-1].children[i].name_en],index);
}

}
/*
if($(this).find("p").html() == "Constructability"){

ctContent(radarLeftRight.Constructability,index);


}else if($(this).find("p").html() == "Reusability"){

ctContent(radarLeftRight.Reusability,index);

}else if($(this).find("p").html() == "Modifiability"){

ctContent(radarLeftRight.Modifiability,index);

}else if($(this).find("p").html() == "Testability"){

ctContent(radarLeftRight.Testability,index);

}*/
})

//box_con_children ul li添加数据
$(".box_con_children ul li").each(function(e){
if(saiData.dates.children[e].metricDetail){
//$(this).css("height",(saiData.dates.children[e].metricDetail.length)*65);
}else{
$(this).css("height",70);
}

})
//box 高度根据数据动态变化
$(".box").css("height",$(".box_top").height()+$(".box_content").height()+$(".box_con_children").height()+400);

}

　

教程基础教程菜鸟教程编程入门手册在线工具数据库

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 兄弟连PHP视频教程-canvas实例3-在线画图工具-形状工具课件

    兄弟连PHP视频教程-canvas实例3-在线画图工具-形状工具课件

    2017-07-30 16:01

  • 华为项目Tree canvas画图 数据3

    华为项目Tree canvas画图 数据3

    2017-07-30 09:04

  • Android实现图片反转

    Android实现图片反转

    2017-07-28 15:04

  • Git教程 快速上手

    Git教程 快速上手

    2017-07-27 18:00

网友点评
精彩导读
Git教程 快速上手

Git教程 快速上手

struts_20_对Action中所有方法、某一个方法进行输入校验（基于XML配置方式实现输入校验）

struts_20_对Action中所有方法、某一个方法进

小程序实时生成可分享卡片的方案。

小程序实时生成可分享卡片的方案。

unity发布的WebGL问题

unity发布的WebGL问题

HTML5 Canvas 线性几何图案翻转变化特效

HTML5 Canvas 线性几何图案翻转变化特效

热门资讯
Copyright © 2006-2018 www.h5cn.com.H5之家 版权所有 Power by H5CN 备案： 黔ICP备15004751-2
HTML5入门 HTML5技术 canvas教程 专题学习