canvas如何实现七巧板图案和粒子时钟效果？下面本篇文章就来给大家介绍一下。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。
canvas实现七巧板
<canvas id="canvas" width="800" height="800"></canvas>    <script>        var rangram = [            { p: [{ x: 0, y: 0 }, { x: 800, y: 0 }, { x: 400, y: 400 }], color: #caff67 },            { p: [{ x: 0, y: 0 }, { x: 400, y: 400 }, { x: 0, y: 800 }], color: #67becf },            { p: [{ x: 800, y: 0 }, { x: 800, y: 400 }, { x: 600, y: 600 }, { x: 600, y: 200 }], color: #ef3d61 },            { p: [{ x: 600, y: 200 }, { x: 600, y: 600 }, { x: 400, y: 400 }], color: #f9f51a },            { p: [{ x: 400, y: 400 }, { x: 600, y: 600 }, { x: 400, y: 800 }, { x: 200, y: 600 }], color: #a594c0 },            { p: [{ x: 200, y: 600 }, { x: 400, y: 800 }, { x: 0, y: 800 }], color: #fa8ecc },            { p: [{ x: 800, y: 400 }, { x: 800, y: 800 }, { x: 400, y: 800 }], color: #f6ca29 },        ]        var canvas = document.getelementbyid('canvas');        if (canvas.getcontext) {            var context = canvas.getcontext(2d);            for(var i = 0; i < rangram.length; i++){ draw(rangram[i],context); } } function draw(seat,context){ context.beginpath(); var pointarr = seat.p; context.moveto(pointarr[0].x, pointarr[0].y); for(var i = 1; i < pointarr.length; i++){ context.lineto(pointarr[i].x, pointarr[i].y); } context.closepath(); context.fillstyle=seat.color; context.fill(); context.linewidth=3; context.stroke(); context.shadowcolor='#ddd'; context.shadowblur=30; }
canvas实现粒子时钟
<canvas id="canvas"></canvas>    <script src="./digit.js"></script>    <script>        var screen_width = document.body.clientwidth;          var screen_height = document.body.clientheight;        var currenttime = null;        var margin_left = math.round(screen_width / 10);        var margin_top = math.round(screen_height / 10);        var radius = math.round(screen_width * 4 / 5 / 108) - 1;        var timerarr = [];        var balls = [];        const colors = [#33b5e5, #0099cc, #aa66cc, #9933cc, #99cc00, #669900, #ffbb33, #ff8800, #ff4444, #cc0000]        window.onload = function () {            var canvas = document.getelementbyid('canvas');            var context = canvas.getcontext(2d);            canvas.width = screen_width;            canvas.height = screen_height;            if (canvas.getcontext) {                var context = canvas.getcontext('2d');                setinterval(function () {                    updata();                    rander(context);                }, 50);            }        }        function updata() {            currenttime = new date();            var curhours = currenttime.gethours();            var curminutes = currenttime.getminutes();            var curseconds = currenttime.getseconds();            var hoursone = parseint(curhours / 10);            var hourstwo = parseint(curhours % 10);            var minutesone = parseint(curminutes / 10);            var minutestwo = parseint(curminutes % 10);            var secondsone = parseint(curseconds / 10);            var secondstwo = parseint(curseconds % 10);            if (hoursone != timerarr[0]) {                addballs(margin_left + 0, margin_top, hoursone);            }            if (hourstwo != timerarr[1]) {                addballs(margin_left + 15 * (radius + 1), margin_top, hourstwo);            }            if (minutesone != timerarr[2]) {                addballs(margin_left + 39 * (radius + 1), margin_top, minutesone);            }            if (minutestwo != timerarr[3]) {                addballs(margin_left + 54 * (radius + 1), margin_top, minutestwo);            }            if (secondsone != timerarr[4]) {                addballs(margin_left + 78 * (radius + 1), margin_top, secondsone);            }            if (secondstwo != timerarr[5]) {                addballs(margin_left + 93 * (radius + 1), margin_top, secondstwo);            }            timerarr = [hoursone, hourstwo, minutesone, minutestwo, secondsone, secondstwo];            updataball();        }        function updataball() {            for (var i = 0; i < balls.length; i++) { balls[i].x = balls[i].x + balls[i].vx; balls[i].vy = balls[i].vy + balls[i].g; balls[i].y = balls[i].y + balls[i].vy; if (balls[i].y + radius > screen_height) {                    balls[i].y = screen_height - radius;                    balls[i].vy = - balls[i].vy * 0.8;                }            }            var t = 0;            for (var i = 0; i < balls.length; i++) { if (balls[i].x + radius > 0 && balls[i].x - radius < screen_width) { balls[t++] = balls[i]; } } while(balls.length > t){                balls.pop();            }        }        function addballs(x, y, number) {            for (var i = 0; i < digit[number].length; i++)                for (var j = 0; j < digit[number][i].length; j++)                    if (digit[number][i][j] == 1) {                        var obj = {                            x: x + j * 2 * (radius + 1) + (radius + 1),                            y: y + i * 2 * (radius + 1) + (radius + 1),                            g: 1.5 + math.random(),                            vx: math.pow(-1, math.ceil(math.random() * 100)) * 4,                            vy: -5,                            color: colors[math.floor(math.random() * colors.length)]                        }                        balls.push(obj);                    }        }        function rander(context) {            context.clearrect(0, 0, screen_width, screen_height);            var hours = currenttime.gethours();            var minutes = currenttime.getminutes();            var seconds = currenttime.getseconds();            renderdigit(margin_left, margin_top, parseint(hours / 10), context)            renderdigit(margin_left + 15 * (radius + 1), margin_top, parseint(hours % 10), context)            renderdigit(margin_left + 30 * (radius + 1), margin_top, 10, context)            renderdigit(margin_left + 39 * (radius + 1), margin_top, parseint(minutes / 10), context);            renderdigit(margin_left + 54 * (radius + 1), margin_top, parseint(minutes % 10), context);            renderdigit(margin_left + 69 * (radius + 1), margin_top, 10, context);            renderdigit(margin_left + 78 * (radius + 1), margin_top, parseint(seconds / 10), context);            renderdigit(margin_left + 93 * (radius + 1), margin_top, parseint(seconds % 10), context);            randerball(context);        }        function randerball(context) {            for (var i = 0; i < balls.length; i++) {                context.fillstyle = balls[i].color;                context.beginpath();                context.arc(balls[i].x, balls[i].y, radius, 0, math.pi * 2, 0);                context.closepath();                context.fill();            }        }        function renderdigit(x, y, number, context) {            context.fillstyle = 'rgb(0,102,153)';            for (var i = 0; i < digit[number].length; i++)                for (var j = 0; j < digit[number][i].length; j++)                    if (digit[number][i][j] == 1) {                        context.beginpath();                        context.arc(x + j * 2 * (radius + 1) + (radius + 1), y + i * 2 * (radius + 1) + (radius + 1), radius, 0, 2 * math.pi)                        context.closepath();                        context.fill()                    }        }    </script>
digit =    [        [            [0,0,1,1,1,0,0],            [0,1,1,0,1,1,0],            [1,1,0,0,0,1,1],            [1,1,0,0,0,1,1],            [1,1,0,0,0,1,1],            [1,1,0,0,0,1,1],            [1,1,0,0,0,1,1],            [1,1,0,0,0,1,1],            [0,1,1,0,1,1,0],            [0,0,1,1,1,0,0]        ],//0        [            [0,0,0,1,1,0,0],            [0,1,1,1,1,0,0],            [0,0,0,1,1,0,0],            [0,0,0,1,1,0,0],            [0,0,0,1,1,0,0],            [0,0,0,1,1,0,0],            [0,0,0,1,1,0,0],            [0,0,0,1,1,0,0],            [0,0,0,1,1,0,0],            [1,1,1,1,1,1,1]        ],//1        ......
更多炫酷html5、javascript特效代码，尽在： javascript特效 栏目！！
以上就是canvas如何实现七巧板图案和粒子时钟效果？（代码示例）的详细内容。