使用html5 canvas绘制有趣的曲线时钟

h5 canvas clock

canvas, clock

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

window.onload = function() {
    clockDraw.init();
};

var createClock = function() {
            var clock = new createjs.Container();
            clock.x = self.docW / 2;
            clock.y = self.docH / 2;
            self.stage.addChild(clock);
            var bgSize = (clock.x < clock.y) ? Math.floor(clock.x * 0.90) : Math.floor(clock.y * 0.90);
            var bg = new createjs.Shape();
            fontsize = bgSize / 12;
            bg.graphics
                .setStrokeStyle(2)
                .beginStroke("#a0c238")
                .drawCircle(0, 0, (bgSize / 24))
            clock.addChild(bg);

var colorSet = ["#de9610", "#c93a40", "#fff001", "#d06d8c", "#65ace4", "#a0c238", "#56a764", "#d16b16", "#cc528b", "#9460a0", "#f2cf01", "#0074bf"];
            for (var i = 1; i < 13; i++) {
                var size = fontsize * ((Math.random() * (1.3 - 0.4)) + 0.4);
                font = 'bold ' + size + 'px arial';

var hourCircle = new createjs.Shape();
                hourCircle.graphics
                    .beginFill(colorSet[i - 1])
                    .drawCircle(0, 0, size + 10);
                hourCircle.x = (bgSize * 0.90) * Math.sin((-1 * i - 6) * 360 / 12 * Math.PI / 180);
                hourCircle.y = (bgSize * 0.90) * Math.cos((-1 * i - 6) * 360 / 12 * Math.PI / 180);
                hourCircle.alpha = 0.8;
                clock.addChild(hourCircle);

var hourText = new createjs.Text(i, font, fontcolor);
                hourText.textAlign = "center";
                hourText.textBaseline = "middle";
                hourText.x = hourCircle.x;
                hourText.y = hourCircle.y;
                hourText.shadow = new createjs.Shadow("#555", 0, 1, 1);
                clock.addChild(hourText);
            }

var littleHand = new createjs.Shape();
            littleHand.lineSize = -1 * ((bgSize * 0.6) / 6);
            littleHand.graphics
                .setStrokeStyle(3)
                .beginStroke("#211917")
                .moveTo(0, 0)
                .quadraticCurveTo(5, littleHand.lineSize, 0, littleHand.lineSize * 2)
                .quadraticCurveTo(-5, littleHand.lineSize * 3, 0, littleHand.lineSize * 4)
                .quadraticCurveTo(5, littleHand.lineSize * 5, 0, littleHand.lineSize * 6)
                .endStroke();
            clock.addChild(littleHand);

var bitHand = new createjs.Shape();
            bitHand.lineSize = -1 * (bgSize * 0.75) / 6;
            bitHand.graphics
                .setStrokeStyle(2)
                .beginStroke("#211917")
                .moveTo(0, 0)
                .quadraticCurveTo(-10, bitHand.lineSize, 0, bitHand.lineSize * 2)
                .quadraticCurveTo(10, bitHand.lineSize * 3, 0, bitHand.lineSize * 4)
                .quadraticCurveTo(-8, bitHand.lineSize * 5, 0, bitHand.lineSize * 6)
                .endStroke();
            clock.addChild(bitHand);

var secondHand = new createjs.Shape();
            secondHand.lineSize = -1 * ((bgSize * 0.75) / 6);
            secondHand.graphics
                .setStrokeStyle(1)
                .beginStroke("#211917")
                .moveTo(0, 0)
                .quadraticCurveTo(15, secondHand.lineSize, 0, secondHand.lineSize * 2)
                .quadraticCurveTo(-10, secondHand.lineSize * 3, 0, secondHand.lineSize * 4)
                .quadraticCurveTo(5, secondHand.lineSize * 5, 0, secondHand.lineSize * 6)
                .endStroke();
            clock.addChild(secondHand);

var handleTick = function() {
                var now = new Date(),
                    h = now.getHours(),
                    m = now.getMinutes(),
                    s = now.getSeconds();
                littleHand.rotation = h * (360 / 12);
                bitHand.rotation = m * (360 / 60);
                secondHand.rotation = s * (360 / 60);
                self.stage.update();
            }

createjs.Ticker.addEventListener("tick", handleTick);
        };
        createClock();
    }
};

编译

CSS

HTML

h5 canvas clock

canvas, clock

编辑器支持Emmet

快捷键

h5 canvas clock

canvas, clock

使用html5 canvas绘制丝绸缎带形状飘扬的动画

html5 canvas绘制表格（网格线）

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：