使用着色器在WebGL3D场景中呈现行星表面地形

实验目的:按照一定规律生成类地行星地表地形区块,并用合理的方式将地形块显示出来 涉及知识:Babylon.js引擎应用、着色器编程、正态分布、数据处理、canvas像素操作 github地址:https://github.com/ljzc002/ljzc002.github.io/tree/mast ... »

canvas学习笔记(一)

canvas是HTML5的新元素之一。使用canvas可以直接在HTML上进行图形操作,所以它具有极大的应用价值。canvas元素本身不具有绘图能力,它需要借助JavaScript来实现绘图功能。 canvas的限制: canvas绘制的图形是静态的,如果要让所画的图形动起来,则需要画出每一帧的图形 ... »

原生js之canvas时钟组件

canvas一直是前端开发中不可或缺的一种用来绘制图形的标签元素,比如压缩上传的图片、比如刮刮卡、比如制作海报、图表插件等,很多人在面试的过程中也会被问到有没有接触过canvas图形绘制。 定义:canvas元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成,canvas标签只是图形... ... »

粒子系统(二):Canvas绘制精美图案

准备 IDE:Visual Studio Code Language:JavaScript / ECMAScript 6+ GitHub:Natural2D.JS 本文主要讲述 Particles - Walker 示例的实现步骤,不涉及具体的代码细节。 第一节 粒子概述 粒子是粒子系统最基本的组成 ... »

使用JavaScript实现一个俄罗斯方块

清明假期期间,闲的无聊,就做了一个小游戏玩玩,目前游戏逻辑上暂未发现bug,只不过样子稍微丑了一些-.-项目地址:https://github.com/Jiasm/tetris在线Demo:http://blog.jiasm.org/tetris/?width=16&height=40 (修改URL ... »

基于 HTML5 Canvas 实现的文字动画特效

文字是网页中最基本的元素,一般我们在网页上都是展示的静态文字,但是就效果来说,还是比较枯燥的。文字淡入淡出的动画效果在项目中非常实用,如果有某些关键的文字,可以通过这种动态的效果来提醒用户阅读。 ... »

canvas填充样式

填充样式主要针对fillStyle。fillStyle除了可以赋值为color,还可以赋值渐变色,包括线性渐变色和径向渐变色,还是和css3里的内容类似。 一、线性渐变 1、设置线性渐变的填充样式 设置线性渐变的填充样式需要2步骤 1、设置渐变线段 通过2个坐标确定渐变线段,来定义渐变的方向和尺度。 ... »

WEB烟花效果——Canvas实现

本文主要介绍一种WEB形式的烟花(fireworks)效果,该效果基于Canvas实现,巧妙地运用了canvas绘图的特性,并加入了物理力作用的模拟,使整体效果非常绚丽、逼真。本文从本质上介绍了其实现原理,便于其他可视化爱好者能快速上手。本文从视觉渲染和运动轨迹模拟两个方面详细描述了该效果的实现原理... ... »

canvas 星空和图形变换

图形变换。 一、画一片星空 先画一片canvas.width宽canvas.height高的黑色星空,再画200个随机位置,随机大小,随机旋转角度的星星。 window.onload=function(){ var canvas=document.getElementById("canvas"); ... »

canvas线条的属性

一、线条的帽子lineCap 取值:butt(默认值),round圆头,square方头 var canvas=document.getElementById("canvas"); canvas.width=800; canvas.height=800; var context=canvas.get ... »

盖楼游戏 一个基于 Canvas 的盖楼游戏 Demo 预览 在线预览地址 (Demo Link) 手机设备可以扫描下方二维码 github "https://github.com/bmqb/tower_game" 喜欢的朋友 给个star 支持一下哦 Game Rule 游戏规则 以下为默认游戏规 ... »

快速创建 HTML5 Canvas 电信网络拓扑图

电信网络图的应用还是相当广泛的,因为这种网络结构相对简单,而且线路也少,基本建设和维护费用少;中心通信点增加了汇接交换功能,集中了业务量,提高了电路利用率;而且只经一次转接。所以现在电信行业人员广泛都采用这种网络结构。学会了这种绘制方法,以后绘制电信网络拓扑图都是分分钟的事~ ... »

canvas实现水波纹效果

本文将会从水波的基本原理开始,详细讲解在canvas中模拟水波扩散,分析并计算水波的能量分布,并通过振幅模拟水波对图像的折射效果,最后实现水波特效。 水波基本原理 首先复习一波高中物理知识。 波是指振动的传播。波的传播方向与质点振动方向垂直的为横波,相同则为纵波,水波是横波和纵波的叠加。 对于水波这 ... »

快速开发 HTML5 交互式地铁线路图

感觉目前地铁上的地铁线路图也不是很人性化,很多交互方面没有考虑到用户的需求?感觉总是有各种容易看串的信息,利用 html5 canvas 完成的这个交互式地铁线路图 Demo,如果地铁上的展示信息稍微有点交互会怎么样?不用忙着上车下车,轻轻一点,就能省去很多时间。 ... »

基于 HTML5 Canvas 的交互式地铁线路图

感觉目前地铁上的地铁线路图也不是很人性化,很多交互方面没有考虑到用户的需求?感觉总是有各种容易看串的信息,利用 html5 canvas 完成的这个交互式地铁线路图 Demo,如果地铁上的展示信息稍微有点交互会怎么样?不用忙着上车下车,轻轻一点,就能省去很多时间。 ... »

js压缩上传图片

初学有不当之处,请多多指点, <body> <div class="cc"> <input type="file" id="file" onchange="imgChange()" accept="image/*"> </div> <img src="" id="showImage" alt=""> ... »

基于 HTML5 Canvas 绘制的电信网络拓扑图

电信网结构(telecommunication network structure)是指电信网各种网路单元按技术要求和经济原则进行组合配置的组合逻辑和配置形式。组合逻辑描述网路功能的体系结构,配置形式描述网路单元的邻接关系,即以交换中心(或节点)和传输链路所组成的拓扑结构。常见的网络拓扑结构有星型结... ... »

那些年下过的大雨

想了解一下用纯CSS和JS怎么实现一段下雨的动画,于是去 "CodePen" 上面搜了一下,发现了很多很有意思的东西。有空可以常去上面逛逛,在对技术产生敬畏的同时也能学到好多好多东西。以下是自己理解的几个代码实现过程,所有源码均出自于 "CodePen" 。 代码: "github" 效果: "ht ... »