`

canvas画布模拟生成3D舰队飞行效果

阅读更多

HTML5画布模拟生成3D的舰队飞行效果

这个代码将使用2D的绘制来模拟3D的飞行效果,使用3D坐标转换2D坐标,并且定时清除图形并且绘制非常图片生成最后效果

<!-- 画布元素 -->

<canvas id="gbcanvas" width="600" height="300">不支持HTML5画布</canvas>

 

/*CSS样式*/

body {
  overflow: hidden;
}

canvas {
  width: 100%;
  height: 100%;
}
    
    

 

/*画布JS*/

var fov = 100, //定义3D坐标转2D坐标比率
  SCREEN_WIDTH = 600,
  SCREEN_HEIGHT = 300,
  HALF_WIDTH = SCREEN_WIDTH/2,
  HALF_HEIGHT = SCREEN_HEIGHT/2,
  numSpaceship = 100;
  
//飞船图片
var anim_img = new Image();

anim_img.src = '03.png';

//获取画布上下文
var canvas = document.getElementById('gbcanvas');
var c = canvas.getContext('2d');

/* 绘制画布飞船图形方法,参数为3D坐标:数据格式为一个数组 */
function draw3Din2D(point3d){
  x3d = point3d[0],
  y3d = point3d[1],
  z3d = point3d[2];
  
  //定义缩放比率
  var scale = fov/(fov+z3d);
  
  //获取对应2d画布中坐标
  var x2d = (x3d*scale) + HALF_WIDTH;
  var y2d = (y3d * scale)  + HALF_HEIGHT;
  
  //绘制图片
  c.drawImage(anim_img, x2d, y2d, 5*scale, 5*scale);
  
}


var points = [];
//生成随机的飞船
function generateSpaceship(){
  for (i=0; i<numSpaceship; i++){
    var point = [(Math.random()*400)-200, (Math.random()*400)-200 , (Math.random()*400)-200 ];
    points.push(point);
  }
}

//清除并且绘制飞船
function render(){
  //清除画布上所有的图形
  c.fillStyle="rgb(0,0,0)";
  c.fillRect(0,0, SCREEN_WIDTH, SCREEN_HEIGHT);
  
  for (var i=0;i<numSpaceship;i++){
    point3d = points[i];
    
    z3d = point3d[2];
    
    z3d -=2 ; //每次缩减,生成新的z轴坐标位置
    
    if(z3d<-fov) z3d += 200; //超过一定数量,则生成反向坐标
    
    point3d[2] = z3d;
    
    //调用绘制方法
    draw3Din2D(point3d); 
  }

}

//生成飞船
generateSpaceship();

//隔一定时间生成页面图形

setInterval(function(){render();}, 15);


 

 

.

分享到:
评论

相关推荐

    网页动画素材 WebGL基于canvas画布绘制3D噪音线条酷炫动画特效。(抖音资料)

    网页动画素材 WebGL基于canvas画布绘制3D噪音线条酷炫动画特效。(抖音资料)网页动画素材 WebGL基于canvas画布绘制3D噪音线条酷炫动画特效。(抖音资料)网页动画素材 WebGL基于canvas画布绘制3D噪音线条酷炫动画...

    canvas3d_qml3d效果_qt3d效果_canvas3d_qt3d_qtgui_

    在本主题中,我们将深入探讨如何在Qt框架中利用Canvas3D和QML3D以及Qt3D来创建丰富的3D图形效果。Qt是一个强大的跨平台应用开发框架,支持多种编程语言,包括C++和QML。Canvas3D是Qt中的一个模块,它允许开发者在...

    Canvas绘制3D烟花动画特效,js高质量源代码,网页必加点缀!

    Canvas绘制3D烟花动画特效,js高质量源代码,网页必加点缀! Canvas绘制3D烟花动画特效,js高质量源代码,网页必加点缀! Canvas绘制3D烟花动画特效,js高质量源代码,网页必加点缀! Canvas绘制3D烟花动画特效,js...

    Canvas画布图片文字拼接合成,生成图片

    Canvas不仅提供了强大的图形处理能力,还支持动画效果,使得网页中的视觉表现力得以显著提升。在实际项目中,我们还需要注意性能优化,如分批绘制、利用CSS3加速等策略,确保在大量数据或复杂操作时仍能保持良好的...

    canvas拼图游戏,基于html + canvas画布实现

    canvas拼图游戏,基于html + canvas画布实现

    canvas画布3D的万花筒动画特效.zip

    在本项目"canvas画布3D的万花筒动画特效"中,开发者利用JavaScript和canvas结合,创建了一个令人惊叹的3D万花筒效果,为网页增添了一份视觉魅力。 首先,我们要理解3D万花筒动画的核心概念。万花筒是由多个镜片组成...

    HTML5 Canvas模拟翻滚动画 3D视觉效果

    HTML5作为最先进的浏览器技术,可以创造出很多不同凡响的特效应用,尤其是3D动画更是轻而易举,大家可以在之前我们分享...今天要分享的这款HTML5 Canvas模拟翻滚动画特效给你呈现了不一样的3D视觉特效,一起来欣赏吧。

    Canvas 鼠标点击生成小圆点

    在网页开发中,Canvas 是一个非常重要的元素,它允许开发者在网页上绘制图形,实现动态交互效果。"Canvas 鼠标点击生成小圆点"这个功能是利用HTML5的Canvas API来实现在画布上根据用户的鼠标点击位置动态生成小圆点...

    canvas画布3D的万花筒动画特效.rar

    1. **3D坐标系统**:Canvas 2D API本身并不支持真正的3D绘图,但可以通过一些技巧模拟3D效果。例如,通过对每个像素进行透视变换,可以在2D平面上呈现3D视觉效果。 2. **矩阵运算**:在3D绘图中,矩阵运算起着关键...

    html5 canvas画布实现液体波浪动画效果

    此外,为了模拟液体的流动感,还可以添加阴影效果。Canvas提供了`shadowColor`、`shadowBlur`和`shadowOffsetX/Y`属性,通过调整这些属性,可以让波浪边缘看起来更加柔和,增加真实感。 在实现过程中,可能还需要...

    使用canvas画布基于蝴蝶曲线方程实现飞行中的蝴蝶

    数学中,有很多优美的曲线,如心形曲线、科赫曲线、蝴蝶曲线、阿基米德螺线、三叶玫瑰线等等,通过对这些曲线进行离散取值,然后进行可视化,再辅助于...本文介绍基于蝴蝶曲线方程,使用canvas画布模拟一只飞行的蝴蝶

    html5 canvas碎片3D环绕地球天体运动动画特效

    1. **3D坐标系**:为了创建3D效果,开发者需要建立一个笛卡尔坐标系,其中X、Y和Z轴分别代表平面的宽度、高度和深度。通过改变物体在这些轴上的位置,可以模拟出三维空间中的移动和旋转。 2. **矩阵变换**:使用`...

    html5 canvas绚丽3d星空飞行穿梭动画特效

    然而,这个特效可能没有直接使用WebGL,而是通过2D Canvas API模拟了3D效果。开发者可能使用了复杂的数学算法来计算星星的位置、运动轨迹和深度感,以创造出3D的错觉。 在“css”文件夹中,我们可以期待找到样式表...

    HTML5 canvas网页背景生成器.zip

    这个"HTML5 canvas网页背景生成器"项目利用canvas API创建出多边形立体效果的网页背景,为用户提供了独特的视觉体验。在这个压缩包中,有两个主要文件:`说明.htm`和`HTML5 canvas网页背景生成器`。 `说明.htm`可能...

    html5 canvas画布绘制圆形时钟代码

    这个技术为网页带来了丰富的交互性和视觉效果。在这个“html5 canvas画布绘制圆形时钟代码”示例中,我们将深入探讨如何利用Canvas API来创建一个功能完备的圆形时钟。 首先,你需要在HTML文件中创建一个`&lt;canvas&gt;`...

    HTML5 canvas画布实现的千纸鹤飞行动画特效源码.zip

    本资源“HTML5 canvas画布实现的千纸鹤飞行动画特效源码.zip”便是一个利用`&lt;canvas&gt;`元素制作的千纸鹤飞行动画效果的实例。 `&lt;canvas&gt;`元素在HTML5中扮演了图形渲染的舞台,通过JavaScript与canvas API的结合,...

    html5 canvas制作3D飞行的飞机动画特效

    在Canvas上创建3D效果通常需要理解投影、视图变换、模型变换等概念。飞机的3D位置可以用三个坐标(x, y, z)表示,通过矩阵运算实现平移、旋转和缩放。 5. Web Animations API或requestAnimationFrame: 这两个都...

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

    在Android开发中,自定义画布Canvas是实现图形绘制的核心工具。...总之,自定义画布Canvas是Android图形界面开发中不可或缺的一部分,通过熟练掌握其用法,可以实现各种复杂而富有创意的视觉效果。

    WPF Canvas 效果 3D 立体发光效果 DNA 卷动

    这使得`Canvas`成为创建自定义图形和动画的理想选择,如我们的DNA卷动3D效果。 要创建3D效果,我们需要使用WPF的`Viewport3D`和`Model3DGroup`。`Viewport3D`是一个可以嵌入2D布局中的3D视图容器,而`Model3DGroup`...

    HTML5 canvas画布实现3D森林中瀑布动画特效源码.zip

    1. **3D坐标系统**:在WebGL中,开发者需要理解XYZ轴的3D坐标系统,以及如何将3D对象投影到2D的canvas画布上。 2. **几何形状建模**:森林中的树木和瀑布需要被建模为3D几何形状,如多边形或顶点数组。这包括理解...

Global site tag (gtag.js) - Google Analytics