目的实现:在使用Canvas画板,画饼图之后,在饼图上显示字体,及一些其他信息;
状态:完成;
参考资料:
html5 w3网站的
http://www.w3school.com.cn/tags/canvas_arc.asp;
安卓实现资料
http://www.kaifazhe.com/mobile/397332.html
现在细谈代码:
画图饼代码和扇形:
<script type="text/javascript">
//获取Canvas对象(画布)
var canvas = document.getElementById("myCanvas");
//简单地检测当前浏览器是否支持Canvas对象,以免在一些不支持html5的浏览器中提示语法错误
if(canvas.getContext){
//获取对应的CanvasRenderingContext2D对象(画笔)
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(width/2,height/2,scaleAnimation * pieRadius,cumulativeAngle,cumulativeAngle + segmentAngle,false);
ctx.lineTo(width/2,height/2);
ctx.closePath();
ctx.fillStyle = data[i].color;
ctx.fill();
}
</script>
填充文字代码:
var addvalue=0;
for(var i=0; i<data.length; i++){
ctx.font='20px 微软雅黑';
ctx.strokeStyle='#000000';
CalcArcEndPointXY(width/2,height/2,pieRadius/2,addvalue+360*(data[i].value/segmentTotal)/2);
ctx. strokeText(data[i].name+":"+data[i].value/segmentTotal*100.00+"%",posX,posY);
addvalue+=360*(data[i].value/segmentTotal);
}
附加一个算位置的函数,这个是必须的
//求扇形的中心坐标
function CalcArcEndPointXY(cirX, cirY, radius, cirAngle){
//将角度转换为弧度
var arcAngle = (cirAngle*Math.PI/ 180.0);
if (cirAngle < 90)
{
//alert(cirX+Math.cos(arcAngle)*radius);
posX= cirX + Math.cos(arcAngle)*radius;
posY= cirY +(Math.sin(arcAngle)) * radius;
}
else if (cirAngle == 90)
{
posX = cirX;
posY = cirY + radius;
}
else if (cirAngle > 90 && cirAngle < 180)
{
arcAngle = (Math.PI * (180 - cirAngle) / 180.0);
posX = cirX - (Math.cos(arcAngle)) * radius;
posY = cirY +(Math.sin(arcAngle)) * radius;
}
else if (cirAngle == 180)
{
posX = cirX - radius;
posY = cirY;
}
else if (cirAngle > 180 && cirAngle < 270)
{
arcAngle = (Math.PI * (cirAngle - 180) / 180.0);
posX = cirX -(Math.cos(arcAngle)) * radius;
posY = cirY -(Math.sin(arcAngle)) * radius;
}
else if (cirAngle == 270)
{
posX = cirX;
posY = cirY - radius;
}
else
{
arcAngle = (Math.PI * (360 - cirAngle) / 180.0);
posX = cirX + (Math.cos(arcAngle)) * radius;
posY = cirY - (Math.sin(arcAngle)) * radius;
}
}
上面几个单独使用的话,都很简单,麻烦的是,一起使用定位的时候,请注意选好画图的起始位置,这是重点,否则字体的位置定位不准确。
分享到:
相关推荐
使用html css canvas js 完成的一个爱心前端页面
这是一个由html5 CSS3 Canvas 技术生成的彩带飞舞动画,很不错的炫丽效果,没使用任何的图片修饰,全部是Canvas生成的彩带效果,再加入动画的控制(由JavaScript来实现),最终形成了十分炫酷的效果。同时本效果也可...
html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的...
Canvas火焰喷射动画效果,CSS3垂直图标菜单 带Tooltip提示框,CSS3多样式小图标按钮 带分享按钮,CSS3可视化网页编辑器 基于tinymce编辑器,CSS3实现一款联系表单 输入框带小图标,HTML5 Canvas模拟衣服撕扯动画 ...
低版本HTML2canvas 前端开发 生成海报 截图等功能 1.该脚本允许您直接在用户浏览器上对网页或其部分进行“截图”。屏幕截图基于 DOM,因此可能不是 100% 准确到真实表示,因为它不会制作实际的屏幕截图,而是根据...
HTML5演示 Canvas_2D_API css3.0API
CSS3+HTML5 文档+HTML5canvas函数查询
html5 canvas绘制管道里跳动小球动画特效
html5 canvas鼠标为圆心任意画圆特效 html5 canvas鼠标为圆心任意画圆特效
HTML5 CSS3 Canvas技术生成很自然流畅的人体运动动画,模拟出了身体碰撞被挤压的动画特效,在实例中有一个大球,用户操作大球任意运动,碰撞到人体的任意部分后,人体会自然的受到挤压和躲避,可看到人的身体某部分...
HTML5 canvas 3D文字云动画基于Modernizr2.6.2制作,3D球形旋转动画,文字云动画。
html5 canvas多层波浪背景动画特效 可按下鼠标左右或上下拖动改变波浪颜色和饱和度哦。
【本书适合的读者】 ①具有html/css/JavaScript基础,并不需要读者有太深的功底 ②对HTML5 Canvas画图功能感兴趣的
HTML5_canvas动态画出视图树,HTML5_canvas绘制动态树视图 类似结构图的形式,点击新增节点即可以自动生成 树状图形,可通过删除节点删除树节点。
平时练习的一些前端动效,基于HTML5,CSS3,Canvas,Svg
好搜 html canvas动态背景css3 实例 好搜 html canvas动态背景css3 实例
HTML5 Canvas透明丝带飘动背景动画特效,一款优雅的流动线条动画效果。
html5 canvas结合css分割图片 引用动画库animal等 播放图片动画 支持三角形 矩形 梯形 横向 竖向 支持火狐浏览器及手机
这是一款基于css3+html5 canvas绘制实现的弧形波动动画特效,可设置正弦波数值改变波动幅度。
代码为博客实例代码http://blog.csdn.net/lmj623565791/article/details/34089553 有问题博客中留言