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,
			tickmask_offset: 0,
			num_font_family: 'HanHei SC, PingFang SC, Helvetica Neue Thin, Helvetica, STHeitiSC-Light, Arial, sans-serif',
			circle_radius: 5,
			circle_offset: 0,
			center_text_unit: '分',
			center_text_offset: {
				x: 16,
				y: 8
			}
		};
		this.mergeOptions(properties, options)
		this._canvas = options.canvas;
		this.canvas = document.createElement('canvas');
		this.canvas.width = this._canvas.width;
		this.canvas.height = this._canvas.height;
		this.delatLength = this.large_tick_length - this.tick_length;
		this.context = this.canvas.getContext('2d');
		this._context = this._canvas.getContext('2d');
		this._percent = options.percent || 0;
		this._target_percent = this._percent;
		this.tickmask_offset = this.getTickMarkOffset(this.tickmask_offset)
		this._halfCanvasWidth = this.canvas.width / 2;
		this._halfCanvasHeight = this.canvas.height / 2;
		this._rotation_deg = this.getRotationDeg()
		return this;
	}
	Gauge.prototype.mergeOptions = function (defaultOpt, options) {
		var _this = this;
		this.........完整代码请登录后点击上方下载按钮下载查看