`

画布动态背景

阅读更多

HTML5画布游戏动态背景设计效果

使用HTML5画布基础方法arc生成的一个动态背景效果~~

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>画布背景</title>
    <style type="text/css">
        body {
            margin:0px;
            padding:0px;
            text-align:center;
        }

        canvas{
            outline:0;
            margin-left: auto;
            margin-right: auto;
        }
    </style>
</head>
<body>
<canvas id='c'></canvas>
<script>
    /*Javascript代码片段*/

    var width = 1000,
            height = 1000,
            c = document.getElementById('c'),
            ctx = c.getContext('2d');

    c.width = width;
    c.height = height;

    var clear = function(){
        ctx.fillStyle = '#d0e7f9';
        ctx.beginPath();
        ctx.rect(0, 0, width, height);
        ctx.closePath();
        ctx.fill();
    }

    var howManyCircles = 8, circles = [];

    for (var i = 0; i < howManyCircles; i++)
        circles.push([Math.random() * width, Math.random() * height, Math.random() * 100, Math.random() / 2]);

    var DrawCircles = function(){
        for (var i = 0; i < howManyCircles; i++) {
            ctx.fillStyle = 'rgba(255, 255, 255, ' + circles[i][3] + ')';
            ctx.beginPath();
            ctx.arc(circles[i][0], circles[i][1], circles[i][2], 0, Math.PI * 2, true);
            ctx.closePath();
            ctx.fill();
        }
    };

    var MoveCircles = function(deltaY){
        for (var i = 0; i < howManyCircles; i++) {
            if (circles[i][1] - circles[i][2] > height) {
                circles[i][0] = Math.random() * width;
                circles[i][2] = Math.random() * 100;
                circles[i][1] = 0 - circles[i][2];
                circles[i][3] = Math.random() / 2;
            } else {
                circles[i][1] += deltaY;
            }
        }
    };

    var width = 1000,
            height = 1000,
            gLoop;

    var GameLoop = function(){
        clear();
        MoveCircles(3);
        DrawCircles();
        gLoop = setTimeout(GameLoop, 1000 / 50);
    }

    GameLoop();
</script>
</body>
</html>

 

 

 

 

.

分享到:
评论

相关推荐

    canvas背景效果-可用于首页,登录页等动态背景

    在网页设计中,动态背景能够为用户带来独特的视觉体验,增加网站的吸引力。"canvas背景效果-可用于首页,登录页等动态背景"这个资源提供了一系列使用HTML5 Canvas元素实现的背景效果,适用于首页、登录页面以及其他...

    Qt实现背景画布上的图形绘制

    基于QT5.4实现栅格(png格式)的画图板程序,实现多边形,折线,点的画笔,填充颜色的自定义、放大缩小和图形的保存打开等。 基于QT5.4实现栅格(png格式)的画图板程序,实现多边形,折线,点的画笔,填充颜色的...

    canvas_nest:很棒的画布背景

    **canvas_nest: 极致的...总的来说,canvas_nest是一个强大的工具,让开发者能够快速实现动态画布背景,为网页增添活力和吸引力。通过深入理解和熟练运用canvas_nest,你可以在网页设计中创造出令人惊叹的视觉体验。

    Qt QGraphics导入背景图并绘制图形,画布移动、缩放、图形旋转等

    使用Qt QGraphic实现一个应用场景,直接导入背景图,并在背景画布上绘制几何图形,包括矩形、圆形等,支持画布整体移动、放大和缩小,画布恢复,图形item选中、移动、旋转。item移动 会实时显示全局坐标以及相对于...

    Canvas画布全屏雪花背景特效.zip

    总的来说,这个"Canvas画布全屏雪花背景特效"结合了JavaScript的动态特性与Canvas的图形绘制能力,实现了视觉上的美观效果。学习和理解这个特效的实现,对于提升Web前端开发技能,尤其是Canvas和JavaScript的运用,...

    canvas粒子模型-动态背景

    在网页设计中,动态背景是一种吸引用户注意力并增强用户体验的有效方式。"canvas粒子模型-动态背景"就是一个利用HTML5的canvas元素创建出的粒子效果,为网页提供了一种极具视觉吸引力的互动背景。Canvas是HTML5的一...

    Canvas粒子线条连接动态背景特效.zip

    6. 颜色背景:根据标签"JS特效-颜色背景",我们可以给粒子和线条添加动态颜色变化。可以使用随机颜色,或者根据时间、粒子位置等参数生成渐变色。 最后,将这个特效应用到网页引导页,可以设置一个透明度逐渐增加的...

    好搜 html canvas动态背景css3 实例

    在这个实例中,Canvas被用来创建动态背景,可能是通过持续绘制或更新图像来实现运动效果。 CSS3(Cascading Style Sheets Level 3)是CSS的最新版本,提供了许多增强网页外观和行为的新特性。在“好搜 html canvas...

    炫酷科幻粒子动态背景后台登录特效代码

    在IT行业中,前端开发往往需要创造出引人入胜的用户体验,而"炫酷科幻粒子动态背景后台登录特效代码"正是为了实现这一目标而设计的。这个特效代码集成了JavaScript(js)技术,用于构建一种独特且吸引人的登录界面,...

    大海蓝色背景画布cvavas

    【标题】"大海蓝色背景画布cvavas"所涉及的知识点主要集中在HTML5和JavaScript技术上,这两种技术是构建现代网页动态效果的核心工具。HTML(超文本标记语言)负责网页的基本结构,而JavaScript则提供了丰富的功能性...

    JS画布动态实现黑客帝国背景效果

    本文实例为大家分享了JS画布动态实现黑客帝国背景效果的具体代码,供大家参考,具体内容如下 效果图 完整代码 &lt;!DOCTYPE html&gt; &lt;html lang=en&gt; &lt;head&gt; &lt;meta charset=UTF-8&gt; &lt;meta name...

    PowerBI可视化大屏背景图

    "PowerBI可视化大屏背景图"这个主题聚焦于如何利用PowerBI来设计和定制适合大屏幕展示的背景图片,以提升数据仪表盘的视觉吸引力和专业性。以下是对这一主题的详细解读: 1. **PowerBI概述**:PowerBI是微软开发的...

    Android 自定义画布canvas 实现绘制和清空画布功能

    在`onDraw()`方法中,先用背景色填充整个画布,然后再进行其他绘制操作: ```java canvas.drawColor(Color.WHITE); // 假设背景色为白色 // 其他绘制操作... ``` 6. **刷新视图** 要使画布上的更改立即可见,...

    HTML5动态散花背景特效

    在本示例中,“HTML5动态散花背景特效”是一个利用HTML5技术实现的网页装饰元素,旨在为网站或博客增添视觉吸引力。 首先,这个特效的核心在于JavaScript,HTML5的一个重要组成部分。JavaScript允许开发者创建交互...

    html+JS:画布canvas星空背景

    详细介绍见:https://blog.csdn.net/renjingzhaozhao/article/details/105381461

    jquery+css3实现图片动态背景

    【标题】:“jQuery + CSS3 实现图片动态背景”是一个技术主题,主要涉及网页开发中的两种核心技术:jQuery 和 CSS3。jQuery 是一个广泛使用的 JavaScript 库,它简化了JavaScript的DOM操作、事件处理以及动画效果。...

    HTML5 canvas网页背景生成器.zip

    代码可能会动态生成或随机选择颜色,以创建出丰富多彩的背景效果。这可能涉及到色彩理论,如HSV(色相、饱和度、亮度)或RGB(红、绿、蓝)模型。 4. **动画效果**:为了增加动态感,这些多边形可能会随着时间推移...

    jqueryCanvas 动态网页点连接背景

    在这个动态背景中,Canvas被用作画布,开发者通过JavaScript代码在Canvas上绘制点和线,形成点连接的效果。Canvas API允许我们绘制直线、曲线、圆形等各种形状,并且可以通过时间间隔动态改变这些元素的位置,从而...

    html5登录模板(动态星空背景)

    这个模板以其独特的动态星空背景为亮点,能够为用户带来沉浸式的登录体验。在网页设计中,一个吸引人的登录界面对于提升用户体验至关重要,而这款模板就为此目的而设计。 首先,我们要了解HTML5,它是超文本标记...

Global site tag (gtag.js) - Google Analytics