html5+绘制一条龙,JavaScript+html5 canvas制作的百花齐放效果完整实例

本文主要是介绍html5+绘制一条龙,JavaScript+html5 canvas制作的百花齐放效果完整实例,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

本文实例讲述了JavaScript+html5 canvas制作的百花齐放效果。分享给大家供大家参考,具体如下:

运行效果截图如下:

92c96bc1e7b8475aae84745f92ab3322.png

具体代码如下:

demo

body {

margin:0; padding:0;

}

#canvas {

border:5px solid gray; box-shadow:0 0 15px 15px #494949 inset;

margin-top:50px; margin-left:200px;

}

var dyl = {};

dyl.canvas = document.getElementById("canvas");

dyl.ctx = dyl.canvas.getContext("2d");

dyl.runTime = 0;

dyl.colorList = "01234567890ABCDEFabcdef".split("");

dyl.colorListLength = dyl.colorList.length;

dyl.arcList = null;

/**

* 得到16进制随机颜色值

*/

dyl.getColor = function() {

var color = "#";

for(var i=0; i<6; i++) {

color += dyl.colorList[Math.floor(Math.random()*dyl.colorListLength)];

}

return color;

};

/**

* 一个随机角度,随机初始速度的斜抛对象

*/

var Arc = function(i) {

// 设置自有属性

this.v = Math.round(Math.random()*100)+50;

this.angle = Math.round(Math.random()*145) + 45;

this.startTime = +new Date();

this._angle = this.angle/180*Math.PI;

this.v_x = this.v*Math.cos(this._angle);

this.v_y_start = this.v*Math.sin(this._angle);

this.color = dyl.getColor();

this.x = 500;

this.g = 250;

this.y = 490;

this.index = i;

var _self = this;

this.run = function() {

var endTime = +new Date();

var timeSpan = (endTime - _self.startTime)/1000;

var v_y_now = _self.v_y_start - 1/2*_self.g*Math.pow(timeSpan, 2);

_self.x = _self.x +_self.v_x * timeSpan;

_self.y = _self.y - (_self.v_y_start * timeSpan - 1/2*_self.g*Math.pow(timeSpan, 2));

return this;

};

return this;

};

/**

* 全局绘制图像

*/

dyl.draw = function() {

var arcList = dyl.arcList;

var ctx = dyl.ctx;

dyl.runTime++;

for(var i=0, length=arcList.length; i

var arc = arcList[i];

if(!arc) {

continue;

}

arc.run();

ctx.save();

ctx.beginPath();

ctx.fillStyle = arc.color;

ctx.arc(arc.x, arc.y, 2, 0, Math.PI*2);

ctx.fill();

ctx.closePath();

ctx.restore();

}

console.log(dyl.runTime);

if(dyl.runTime >= 25) {

setTimeout(dyl.init, 1050);

} else {

setTimeout(dyl.draw, 20);

}

};

/**

* 初始化整个事件

*/

dyl.init = function() {

dyl.ctx.clearRect(0, 0, 1000, 500);

dyl.arcList = [];

dyl.runTime = 0;

for(var i=0; i<100; i++) {

dyl.arcList.push(new Arc(i));

}

dyl.draw();

};

dyl.init();

更多关于js特效相关内容感兴趣的读者可查看本站专题:《jQuery动画与特效用法总结》及《jQuery常见经典特效汇总》

希望本文所述对大家JavaScript程序设计有所帮助。

这篇关于html5+绘制一条龙,JavaScript+html5 canvas制作的百花齐放效果完整实例的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/167028

相关文章

Spring Boot集成Druid实现数据源管理与监控的详细步骤

《SpringBoot集成Druid实现数据源管理与监控的详细步骤》本文介绍如何在SpringBoot项目中集成Druid数据库连接池,包括环境搭建、Maven依赖配置、SpringBoot配置文件... 目录1. 引言1.1 环境准备1.2 Druid介绍2. 配置Druid连接池3. 查看Druid监控

Java中读取YAML文件配置信息常见问题及解决方法

《Java中读取YAML文件配置信息常见问题及解决方法》:本文主要介绍Java中读取YAML文件配置信息常见问题及解决方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要... 目录1 使用Spring Boot的@ConfigurationProperties2. 使用@Valu

创建Java keystore文件的完整指南及详细步骤

《创建Javakeystore文件的完整指南及详细步骤》本文详解Java中keystore的创建与配置,涵盖私钥管理、自签名与CA证书生成、SSL/TLS应用,强调安全存储及验证机制,确保通信加密和... 目录1. 秘密键(私钥)的理解与管理私钥的定义与重要性私钥的管理策略私钥的生成与存储2. 证书的创建与

浅析Spring如何控制Bean的加载顺序

《浅析Spring如何控制Bean的加载顺序》在大多数情况下,我们不需要手动控制Bean的加载顺序,因为Spring的IoC容器足够智能,但在某些特殊场景下,这种隐式的依赖关系可能不存在,下面我们就来... 目录核心原则:依赖驱动加载手动控制 Bean 加载顺序的方法方法 1:使用@DependsOn(最直

SpringBoot中如何使用Assert进行断言校验

《SpringBoot中如何使用Assert进行断言校验》Java提供了内置的assert机制,而Spring框架也提供了更强大的Assert工具类来帮助开发者进行参数校验和状态检查,下... 目录前言一、Java 原生assert简介1.1 使用方式1.2 示例代码1.3 优缺点分析二、Spring Fr

java使用protobuf-maven-plugin的插件编译proto文件详解

《java使用protobuf-maven-plugin的插件编译proto文件详解》:本文主要介绍java使用protobuf-maven-plugin的插件编译proto文件,具有很好的参考价... 目录protobuf文件作为数据传输和存储的协议主要介绍在Java使用maven编译proto文件的插件

Java中的数组与集合基本用法详解

《Java中的数组与集合基本用法详解》本文介绍了Java数组和集合框架的基础知识,数组部分涵盖了一维、二维及多维数组的声明、初始化、访问与遍历方法,以及Arrays类的常用操作,对Java数组与集合相... 目录一、Java数组基础1.1 数组结构概述1.2 一维数组1.2.1 声明与初始化1.2.2 访问

Javaee多线程之进程和线程之间的区别和联系(最新整理)

《Javaee多线程之进程和线程之间的区别和联系(最新整理)》进程是资源分配单位,线程是调度执行单位,共享资源更高效,创建线程五种方式:继承Thread、Runnable接口、匿名类、lambda,r... 目录进程和线程进程线程进程和线程的区别创建线程的五种写法继承Thread,重写run实现Runnab

Java 方法重载Overload常见误区及注意事项

《Java方法重载Overload常见误区及注意事项》Java方法重载允许同一类中同名方法通过参数类型、数量、顺序差异实现功能扩展,提升代码灵活性,核心条件为参数列表不同,不涉及返回类型、访问修饰符... 目录Java 方法重载(Overload)详解一、方法重载的核心条件二、构成方法重载的具体情况三、不构

Java通过驱动包(jar包)连接MySQL数据库的步骤总结及验证方式

《Java通过驱动包(jar包)连接MySQL数据库的步骤总结及验证方式》本文详细介绍如何使用Java通过JDBC连接MySQL数据库,包括下载驱动、配置Eclipse环境、检测数据库连接等关键步骤,... 目录一、下载驱动包二、放jar包三、检测数据库连接JavaJava 如何使用 JDBC 连接 mys