使用Canvas实现的人像计数器

Person counter w/ canvas 有一个从下至上的水位填充/电池充电动画，在一个人形容器中。可以用来在游戏中表示人物角色的生命值和魔法值的恢复情况。

canvas, counter

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 2250
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

jQuery(document).ready(function($) {

var $canvas = $("#guycanvas");
    var ctx = $canvas.get(0).getContext("2d");

ctx.scale(0.8, 0.8);

var color_bg = "#a3b5b5";
    var color_fill = "#0098aa";
    var color_stripe = "#008e98";

// CANVAS

var draw_figure = function(is_clip) {
        ctx.beginPath();

// head
        ctx.moveTo(74.2, 56.5);
        ctx.bezierCurveTo(89.8, 56.5, 102.4, 43.9, 102.4, 28.3);
        ctx.bezierCurveTo(102.4, 12.7, 89.8, 0.0, 74.2, 0.0);
        ctx.bezierCurveTo(58.5, 0.0, 45.9, 12.7, 45.9, 28.3);
        ctx.bezierCurveTo(45.9, 43.9, 58.5, 56.5, 74.2, 56.5);

// body
        ctx.moveTo(148.3, 112.0);
        ctx.bezierCurveTo(147.9, 90.1, 136.0, 78.7, 113.7, 78.7);
        ctx.lineTo(34.6, 78.7);
        ctx.bezierCurveTo(12.3, 78.7, 0.4, 90.1, 0.0, 112.0);
        ctx.bezierCurveTo(0.0, 112.3, 0.0, 112.7, 0.0, 113.0);
        ctx.lineTo(0.0, 214.8);
        ctx.bezierCurveTo(0.0, 221.0, 5.9, 226.1, 12.1, 226.1);
        ctx.bezierCurveTo(18.3, 226.1, 24.2, 221.0, 24.2, 214.8);
        ctx.bezierCurveTo(24.2, 214.8, 24.2, 148.3, 24.2, 136.2);
        ctx.bezierCurveTo(24.2, 124.1, 33.3, 124.1, 33.3, 136.2);
        ctx.bezierCurveTo(33.3, 145.3, 33.3, 201.5, 33.3, 231.1);
        ctx.lineTo(33.3, 248.7);
        ctx.lineTo(33.3, 368.0);
        ctx.bezierCurveTo(33.3, 377.0, 41.9, 384.4, 50.9, 384.4);
        ctx.lineTo(52.2, 384.4);
        ctx.bezierCurveTo(61.2, 384.4, 69.6, 377.0, 69.6, 368.0);
        ctx.bezierCurveTo(69.6, 368.0, 69.6, 260.3, 69.6, 248.2);
        ctx.bezierCurveTo(69.6, 236.1, 78.7, 236.1, 78.7, 248.2);
        ctx.bezierCurveTo(78.7, 260.3, 78.7, 368.0, 78.7, 368.0);
        ctx.bezierCurveTo(78.7, 377.0, 87.2, 384.4, 96.1, 384.4);
        ctx.lineTo(97.4, 384.4);
        ctx.bezierCurveTo(106.4, 384.4, 115.0, 377.0, 115.0, 368.0);
        ctx.lineTo(115.0, 248.7);
        ctx.lineTo(115.0, 231.1);
        ctx.bezierCurveTo(115.0, 201.5, 115.0, 145.3, 115.0, 136.2);
        ctx.bezierCurveTo(115.0, 124.1, 124.1, 124.1, 124.1, 136.2);
        ctx.bezierCurveTo(124.1, 148.3, 124.1, 214.8, 124.1, 214.8);
        ctx.bezierCurveTo(124.1, 221.0, 130.0, 226.1, 136.2, 226.1);
        ctx.bezierCurveTo(142.4, 226.1, 148.3, 221.0, 148.3, 214.8);
        ctx.lineTo(148.3, 113.0);
        ctx.bezierCurveTo(148.3, 112.7, 148.3, 112.3, 148.3, 112.0);

if (is_clip)
            ctx.clip();
        else
            ctx.closePath();
    }

var draw_fill = function(fill_percent) {
        fill_percent = typeof fill_percent !== 'undefined' ? fill_percent : 0;

var w = ctx.canvas.width;
        var h = ctx.canvas.height;
        var h_scaled = h / 100;
        var fill_level = h - h_scaled * fill_percent;

ctx.save(); // save current clipping setting as default

ctx.beginPath();
        ctx.rect(0, fill_level, w, h);
        //ctx.rect(0,0,w,fill_level);
        ctx.clip();

// Fill
        ctx.fillStyle = color_fill;
        ctx.fillRect(0, 0, w, h);

// Draw stripe
        ctx.lineWidth = 100;
        ctx.beginPath();
        ctx.strokeStyle = color_stripe;
        ctx.moveTo(-50, h);
        ctx.lineTo(w * 2, 0);
        ctx.stroke();

ctx.restore();
    }

var draw = function(is_initial, fill_percent) {
        fill_percent = typeof fill_percent !== 'undefined' ? fill_percent : 0;

if (is_initial) {
            // Draw background figure
            draw_figure(false);
            ctx.fillStyle = color_bg; // light blue
            ctx.fill();

draw_figure(true); // main clipping mask - figure
        } else {
            draw_fill(fill_percent); // progress clipping mask - rectangle
        }
    }

// ANIMATION

var animate_progress = function(upto, duration_ms) {
        duration_ms = typeof duration_ms !== 'undefined' ? duration_ms : 2000;

var this_counter = 0;

draw(true);

jQuery({
            Counter: this_counter
        }).animate({
            Counter: upto
        }, {
            duration: duration_ms,
            easing: 'swing',
            step: function() {
                this_counter = Math.ceil(this.Counter);

// Percent display
                $("#counter").text(this_counter + "%");

// Progress image
                draw(false, this_counter);
            }
        });
    }

animate_progress($("#counter").data("fill"));

});

编译

CSS

HTML

Person counter w/ canvas 有一个从下至上的水位填充/电池充电动画，在一个人形容器中。可以用来在游戏中表示人物角色的生命值和魔法值的恢复情况。

canvas, counter

编辑器支持Emmet

快捷键

Person counter w/ canvas 有一个从下至上的水位填充/电池充电动画，在一个人形容器中。可以用来在游戏中表示人物角色的生命值和魔法值的恢复情况。

canvas, counter

使用HTML5 Canvas实现的射击打怪类网页游戏

使用Canvas实现的渐变色绕边按钮悬停动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：