搜尋
首頁web前端js教程canvas如何達到七巧板圖案和粒子時鐘效果？ （程式碼範例）
canvas如何達到七巧板圖案和粒子時鐘效果？ （程式碼範例）
青灯夜游
青灯夜游
Nov 30, 2019 pm 04:44 PM
canvashtml5javascript

canvas如何達到七巧板圖案和粒子時鐘效果？下面本篇文章就來跟大家介紹一下。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。

canvas如何達到七巧板圖案和粒子時鐘效果？ （程式碼範例）

canvas實作七巧板


<canvas></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(&#39;canvas&#39;);
        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=&#39;#ddd&#39;;
            context.shadowBlur=30;
            
        }</script>

canvas實作粒子時鐘 


<canvas></canvas>
    <script></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(&#39;canvas&#39;);
            var context = canvas.getContext("2d");
            canvas.width = SCREEN_WIDTH;
            canvas.height = SCREEN_HEIGHT;
            if (canvas.getContext) {
                var context = canvas.getContext(&#39;2d&#39;);
                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 = &#39;rgb(0,102,153)&#39;;
            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如何達到七巧板圖案和粒子時鐘效果？ （程式碼範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述
本文轉載於：cnblogs。如有侵權，請聯絡admin@php.cn刪除
相關文章
Vue和Canvas：如何实现手写签名和手势识别功能Vue和Canvas：如何实现手写签名和手势识别功能Jul 18, 2023 am 08:49 AM

Vue和Canvas：如何实现手写签名和手势识别功能引言：手写签名和手势识别功能在现代应用程序中越来越常见，它们可以为用户提供更加直观和自然的交互方式。Vue.js作为一款流行的前端框架，搭配Canvas元素可以实现这两个功能。本文将介绍如何使用Vue.js和Canvas元素来实现手写签名和手势识别功能，并给出相应的代码示例。一、手写签名功能实现要实现手写签

如何利用Vue和Canvas创建逼真的天气动态背景如何利用Vue和Canvas创建逼真的天气动态背景Jul 17, 2023 am 08:33 AM

如何利用Vue和Canvas创建逼真的天气动态背景引言：在现代网页设计中，动态背景效果是吸引用户眼球的重要元素之一。本文将介绍如何利用Vue和Canvas技术来创建一个逼真的天气动态背景效果。通过代码示例，你将学习如何编写Vue组件和利用Canvas绘制不同天气场景，从而实现一个独特而吸引人的背景效果。步骤一：创建Vue项目首先，我们需要创建一个Vue项目。

Canvas的优势有哪些Canvas的优势有哪些Aug 17, 2023 pm 04:52 PM

canvas的优势有强大的绘图功能、高性能、跨平台兼容性、支持多种图形格式、可以与其他Web技术集成、可以实现动态效果和可以实现复杂的图像处理。详细介绍：1、Canvas提供了丰富的绘图功能，可以绘制各种形状、线条、文本、图像等；2、Canvas在浏览器中直接操作像素，因此具有很高的性能；3、Canvas是基于HTML5标准的一部分，可以在各种现代浏览器上运行等等。

canvas特效有哪些canvas特效有哪些Aug 18, 2023 pm 04:12 PM

canvas特效有粒子效果、线条动画、图片处理、文字动画、音频可视化、3D效果、游戏开发等。详细介绍：1、粒子效果，通过控制粒子的位置、速度和颜色等属性来实现各种效果，如烟花、雨滴、星空等；2、线条动画，通过在画布上绘制连续的线条，创建出各种动态的线条效果；3、图片处理，通过对图片进行处理，可以实现各种炫酷的效果，如图片切换、图片特效等；4、文字动画等等特性。

canvas插件有哪些canvas插件有哪些Aug 17, 2023 pm 05:00 PM

canvas插件有Fabric.js、EaselJS、Konva.js、Three.js、Paper.js、Chart.js和Phaser。详细介绍：1、Fabric.js 是一个基于Canvas的开源 JavaScript 库，它提供了一些强大的功能；2、EaselJS是CreateJS库中的一个模块，它提供了一套简化了Canvas编程的API；3、Konva.js等等。

Vue和Canvas：如何实现视频播放器的定制化界面Vue和Canvas：如何实现视频播放器的定制化界面Jul 18, 2023 pm 02:49 PM

Vue和Canvas：如何实现视频播放器的定制化界面引言：在现代互联网时代，视频已经成为人们生活中必不可少的一部分。为了提供良好的用户体验，许多网站和应用程序都提供了自定义的视频播放器界面。本文将介绍如何使用Vue和Canvas技术实现一个定制化的视频播放器界面。一、前期准备在开始之前，您需要确保您已经安装了Vue和Canvas，并且熟悉这两种技术的基本用法

Vue和Canvas：如何实现图片的马赛克效果Vue和Canvas：如何实现图片的马赛克效果Jul 16, 2023 pm 10:17 PM

Vue和Canvas：如何实现图片的马赛克效果引言：随着Web技术的不断发展，越来越多的人开始使用Vue框架来构建交互式的前端应用。而在前端开发中，常常需要为用户提供图片处理的功能。本文将介绍如何利用Vue和Canvas实现图片的马赛克效果，为用户带来更好的视觉体验。一、马赛克效果概述马赛克效果是一种将图像的细节部分进行像素化处理，使得整个图像变得模糊和抽象

如何使用Vue和Canvas开发网页截图工具如何使用Vue和Canvas开发网页截图工具Jul 19, 2023 am 08:36 AM

如何使用Vue和Canvas开发网页截图工具简介：随着互联网的发展，网页截图工具在我们的日常生活中扮演着越来越重要的角色。它们可以用来捕捉网页上的信息、制作教程或者分享你的见解。本文将介绍如何使用Vue和Canvas来开发一个简单的网页截图工具，以帮助读者了解如何实现这个常见但又有趣的功能。准备工作：在开始之前，我们需要准备好以下的开发环境和工具：安装Nod

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

顯示更多

熱門文章

R.E.P.O.能量晶體解釋及其做什麼（黃色晶體）
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
3 週前By尊渡假赌尊渡假赌尊渡假赌
刺客信條陰影：貝殼謎語解決方案
1 週前ByDDD
R.E.P.O.如果您聽不到任何人，如何修復音頻
3 週前By尊渡假赌尊渡假赌尊渡假赌
在哪裡可以找到原子中的起重機控制鑰匙卡
1 週前ByDDD
顯示更多

熱工具

VSCode Windows 64位元 下載

VSCode Windows 64位元 下載

微軟推出的免費、功能強大的一款IDE編輯器

MantisBT

MantisBT

Mantis是一個易於部署的基於Web的缺陷追蹤工具，用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。

mPDF

mPDF

mPDF是一個PHP庫，可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件，並處理不同的語言。與原始腳本如HTML2FPDF相比，它的速度較慢，並且在使用Unicode字體時產生的檔案較大，但支援CSS樣式等，並進行了大量增強。支援幾乎所有語言，包括RTL（阿拉伯語和希伯來語）和CJK（中日韓）。支援嵌套的區塊級元素（如P、DIV），

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

顯示更多

熱門話題

gmail信箱登陸入口在哪裡
7441
15
CakePHP 教程
1370
52
steam的賬戶名稱是什麼格式
76
11
win11激活密鑰永久
33
19
顯示更多