使用waterbubble绘制兼容IE8的水球图

  |   0 评论   |   143 浏览

  1. 在head标签中严格按照顺序依次引入jQuery、excanvas、waterbubble的js文件
<script type="text/javascript" src="jquery-1.9.0.min.js"> </script>
<script type="text/javascript" src="excanvas.js"></script>
<script type="text/javascript" src="waterbubble.js"></script>
  1. 在页面中定义一个canvas标签并赋予ID
	<canvas id="blob"></canvas>
  1. js中绘制图形所需代码
jQuery('#blob').waterbubble({
		wave: true,/* 是否显示波纹 */
		txt: '57.96',/* 文本内容 */
		font: 'bold 40px arial', /* 文本样式 */
		textColor: '#10c5c1',/* 文本颜色 */
		waterColor: '#94f6e4',/* 水球颜色 */
		data: 0.57,/* 水球数据 */ 
		lineWidth: 2,/* 边框宽度 */
		radius: radii,/* 水球半径 */
		animation: true/* 是否显示动画 */
	});
  1. 图形如下
    enter description here

评论

发表评论