html5画布画出一个表盘,html5 canvas绘制各种仪表盘动画特效

特效描述：canvas绘制 仪表盘动画 动画特效。html5 canvas仪表盘动画

代码结构

1. 引入CSS

2. 引入JS

3. HTML代码

radial

radial-component

linear-component

issue-63

async

scripted

Animate

Stop animation

data-min-value="0"

data-max-value="360"

data-major-ticks="N,NE,E,SE,S,SW,W,NW,N"

data-minor-ticks="22"

data-ticks-angle="360"

data-start-angle="180"

data-stroke-ticks="false"

data-highlights="false"

data-color-plate="#222"

data-color-major-ticks="#f5f5f5"

data-color-minor-ticks="#ddd"

data-color-numbers="#ccc"

data-color-needle="rgba(240, 128, 128, 1)"

data-color-needle-end="rgba(255, 160, 122, .9)"

data-value-box="false"

data-value-text-shadow="false"

data-color-circle-inner="#fff"

data-color-needle-circle-outer="#ccc"

data-needle-circle-size="15"

data-needle-circle-outer="false"

data-needle-type="line"

data-needle-start="75"

data-needle-end="99"

data-needle-width="3"

data-borders="true"

data-border-inner-width="0"

data-border-middle-width="0"

data-border-outer-width="10"

data-color-border-outer="#ccc"

data-color-border-outer-end="#ccc"

data-color-needle-shadow-down="#222"

data-animation-target="plate"

data-animation-duration="1500"

data-animation-rule="linear"

data-width="300"

data-height="300"

data-units="ᵍ"

data-value="0"

>

data-width="300"

data-height="300"

data-min-value="0"

data-max-value="360"

data-major-ticks="N,NE,E,SE,S,SW,W,NW,N"

data-minor-ticks="22"

data-ticks-angle="360"

data-start-angle="180"

data-stroke-ticks="false"

data-highlights="false"

data-color-plate="#33a"

data-color-major-ticks="#f5f5f5"

data-color-minor-ticks="#ddd"

data-color-numbers="#ccc"

data-color-needle="rgba(240, 128, 128, 1)"

data-color-needle-end="rgba(255, 160, 122, .9)"

data-value-box="false"

data-value-text-shadow="false"

data-color-circle-inner="#fff"

data-color-needle-circle-outer="#ccc"

data-needle-circle-size="15"

data-needle-circle-outer="false"

data-animation-rule="linear"

data-needle-type="line"

data-needle-start="75"

data-needle-end="99"

data-needle-width="3"

data-borders="true"

data-border-inner-width="0"

data-border-middle-width="0"

data-border-outer-width="10"

data-color-border-outer="#ccc"

data-color-border-outer-end="#ccc"

data-color-needle-shadow-down="#222"

data-border-shadow-width="0"

data-animation-target="plate"

data-units="ᵍ"

data-title="DIRECTION"

data-font-title-size="19"

data-color-title="#f5f5f5"

data-animation-duration="1500"

data-value="45"

data-animate-on-init="true"

>

if (!Array.prototype.forEach) {

Array.prototype.forEach = function(cb) {

var i = 0, s = this.length;

for (; i < s; i++) {

cb && cb(this[i], i, this);

}

}

}

document.fonts && document.fonts.forEach(function(font) {

font.loaded.then(function() {

if (font.family.match(/Led/)) {

document.gauges.forEach(function(gauge) {

gauge.update();

});

}

});

});

var timers = [];

function animateGauges() {

document.gauges.forEach(function(gauge) {

timers.push(setInterval(function() {

gauge.value = Math.random() *

(gauge.options.maxValue - gauge.options.minValue) / 4 +

gauge.options.minValue / 4;

}, gauge.animation.duration + 50));

});

}

function stopGaugesAnimation() {

timers.forEach(function(timer) {

clearInterval(timer);

});

}