Gauge实现canvas仪表盘转动动画效果-html代码-BFW代码库

Gauge实现canvas仪表盘转动动画效果

代码语言：html

所属分类：动画

代码描述：Gauge实现canvas仪表盘转动动画效果

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta charset="utf-8" />
<style>
html, body, div, canvas, a {
	margin: 0px;
	padding: 0px;
}

#clockBoard {
	width: 550px;
	height: 760px;
	margin: 0px auto;
	margin-bottom: 0px;
}

#pointer {
	position: relative;
	top: -560px;
}
</style>
</head>
<body>

<div id="clockBoard">

	<canvas id="gauge1" width="310" height="310"></canvas>
	<canvas id="gauge" width="310" height="310"></canvas>

</div>


<script type="text/javascript">
(function (window) {
	var PIDEG = Math.PI / 180;
	function Gauge(options) {
		//set defaults
		var properties = {
			tick_length: 80,
			large_tick_length: 110,
			tick_thickness: 6,
			tick_group_length: 9,
			ticks_groups_begin: 0,
			total_degrees: 240,
			tick_color: "#555962",
			tick_on_color: "#527d98",
			on_color_gradient: null,
			bg_color: null,
			gauge_scale: 1,
			animation_duration: 550,
			total_tick: 101,
			show_num: true,
			show_center_num: true,
			center_font_size: 200,
			center_font_color: '#555962',
			cur_score_circle_color: '#555962',
			center_offset: {
				x: 0,
				y: 0
			},
			center_num_font_family: 'HanHei SC, PingFang SC, Helvetica Neue Thin, Helvetica, STHeitiSC-Light, Arial, sans-serif',
			num_gap: 1,
			num_begin: 0,
			num_font_size: 16,.........完整代码请登录后点击上方下载按钮下载查看