好久没有写博客了，深究动画其实也就是setTimeout setInterval requestAnimationFrame很多人可能不熟悉requestAnimationFrame但是事实上和setTimeout没有区别，setTImeout是 通过定时然后达到循环执行，后者呢比较优雅，动画帧。。。不说了，我也不知道，自己测试一下，程序员是应该有这种一探究竟的精神。

　　在实际数据中很可能是没有perspeactive 3d，也没有transition-z的。但是三维的东西其实也就是在电脑屏幕上而已，屏幕没有厚多少多少的说法吧，所以呢，事实上在屏幕上看到的其实也不过是画在一张二维屏幕上的视觉效果图而已。

　　先说一个最基本的知识，俗话说的transition3d的3d是关于屏幕的水平方向和竖直方向，还有一个是人和屏幕的垂直距离形成的z轴，这个z轴当然只是伪装的，事实上人和屏幕距离就是那么远，但是为了伪装，我们让离我们近的看起来大点，远的看起来小点。就是传说中的近大远小，也叫作透视。

　　现实生活中我们一般没有仔细体验过一种感觉，就是离一个东西越来越远，看它越来越小，慢慢的就会达到一个极限值，此时看东西会变成一个点。加入过一个半径为1的小球，在向后远离1000个单位时，刚好看不到了，我们就假设有一个透视值perspective = 1000 ； 敲代码之前的废话就这么多了，现在我们开始写我们的三维canvas 。

准备工作：

1. 有一个画布供我们玩耍

<body>

    <canvas width='1000' height='500' id='3d-canvas' ></canvas>

</body>

// 生产一个画布

var canvas = document.getElementById('3d-canvas');

panel = canvas.getContext('2d');

// 一个画布上画小球的工具

function drawBall(x,y,r,color){

    var color = color ? color : '#333' ;

    panel.beginPath()

    panel.arc(x,y,r,,Math.PI*);

    panel.closePath()

    panel.fillStyle = color ;

    panel.fill()

}

2. 然后要有一个透视，让我们产生3d视觉效果，一个生产小球的机器，我们一般情况会已知小球的x, y, z坐标和他的大小就是半径r。根据这些条件我们去画小球。

var perspective =

// 一个小球的构造函数，可以生产小球

function Ball(x,y,z,r){

    this.x = x ;

    this.y = y ;

    this.z = z ;

    this.r = r ;

    this.render = function(){

        // 根据

    }

}

3.最后我们new一个小球，然后渲染出来

// 生产一个小球，然后渲染

var small_ball = new Ball(,,,)

small_ball.render()

好了，现在我们就渲染好了，画出来了。本篇博客到此结束啦

咳咳，好了不开玩笑了，现在我们把任务范围缩小了一下，已知透视值，x,y,z,r画一个小球。就是render方法

最简单的透视计算方法。

perspective= => scale=

perspective= => scale=

这是透视值和比例大小的关系，所以我们就可以得出一个

var scale = this.z/perspective ;

var r = this.r*scale ;

然后我们计算实际视觉上的x和y的坐标

    var x = (this.x-w/)*scale + w/

    var y = (this.y-h/)*scale + h/

这个x, y 是什么意思嘛，就是当scale放大一倍的时候，x会相对原来相对相对中线的位置放大scale倍。

现在我们就可以这样写render函数

function Ball(x,y,z,r){

    this.x = x ;

    this.y = y ;

    this.z = z ;

    this.r = r ;

    this.render = function(){

        var scale = this.z/perspective

        var r = this.r*scale

        var x = (this.x-w/)*scale + w/

        var y = (this.y-h/)*scale + h/

        drawBall(x,y,r)

    }

}

现在完成了所有的配置项。就可以构造一个视觉上的3d小球了。

最后贴一个效果图

https://sowhitesocoll.github.io/text-proticle/drawtext.html

这个demo种运用了tween.js算法和canvas得getImageData方法，和上边所谓得3d效果技巧。喜欢的同志们可以点个小星星

canvas用2d渲染出3d的感觉的更多相关文章

  1. 2D图形如何运动模拟出3D效果

    一.先看看实现效果图 (左边的2d图片如何运动出右边3d的效果)                                      引言: 对于这个题目,真的很尴尬,不知道取啥,就想了这个题目 ...

  2. 2d游戏和 3d游戏的区别

    2D游戏和3D游戏的主要区别 一.总结 一句话总结:2D中的单位就是贴图,3D中的单位还有高 1. 3D 和 2D 游戏的区别主要体现在呈现画面和文件体积上: 2. 借助 3D 引擎可以提升 2D 游 ...

  3. 在DirectX 中进行2D渲染

    http://flcstudio.blog.163.com/blog/static/756035392008115111123672/ 最近,我看到很多关于DirectX8在最新的API中摒弃Dire ...

  4. 2D游戏与3D游戏的区别 原文：https://zhidao.baidu.com/question/588490865.html

    2D和3D间有哪些不同点呢? 让我们来比较一下,共同找出它俩之间的不同点. 对玩家来说,2D技术和3D技术只是显示数据的方式而已,玩家都是通过二 维的平面显示器来观看它们.对制作者来说,二者的不同之处 ...

  5. .NET实时2D渲染入门·动态时钟

    .NET实时2D渲染入门·动态时钟 从小以来"坦克大战"."魂斗罗"等游戏总令我魂牵梦绕.这些游戏的基础就是2D实时渲染,以前没意识,直到后来找到了Direct ...

  6. canvas基础[一]探究出初中数学知识

    何时用SVG何时用canvas SVG 矢量图,视觉清晰,文件小 <svg viewBox="0 0 100 100"> <circle cx="50& ...

  7. CutJS – 用于 HTML5 游戏开发的 2D 渲染引擎

    CutJS 是轻量级的,快速的,基于 Canvas 开发的 HTML5  2D 渲染引擎,可以用于游戏开发.它是开源的,跨平台的,与现代的浏览器和移动设备兼容.CutJS 提供了一个类似 DOM 树的 ...

  8. canvas代替img渲染图片

    移动端用canvas代替img渲染图片,可以提高性能 var oImg = new Image(); oImg.src = url; oImg.onload = function(){ var cvs ...

  9. html5 canvas移动设备渲染测试

    最近项目闲着没什么事,又想起了canvas, 针对移动端设备默认浏览器,做了点渲染方面效率的测试,手头设备不多(有一些低端机型和pc chrome做对比),现将测试数据分享给大家吧,本想和css3 a ...

随机推荐

  1. Android 开发 Camera1_如何使用对焦功能

    前言 Camera1的自动对焦还是有一些坑值得开一个篇幅来讲解,一般对焦Mode有以下几种: Camera.Parameters.FOCUS_MODE_CONTINUOUS_VIDEO 连续自动对焦视 ...

  2. .git文件夹太大问题及解决方法

    最近我们做了自动化构建, 发现文件.git文件夹越来越大, 求后端小伙伴帮忙, 小伙伴指点了一下说周末弄了一下, 忘记命令的.大致的意思就是找到git 提交了哪些大文件. 然后重构git, 先分享给小 ...

  3. 19-11-05-Night

    我就是不行. ZJ: 好像是因为郁闷了才咕掉的…… 33 Miemeng 30 00:01:34 40 00:01:46 0 00:01:22 70 00:01:46 不记得当时怎么想的 T1只会暴力 ...

  4. 深入浅出 Java Concurrency (39): 并发总结 part 3 常见的并发陷阱

    常见的并发陷阱 volatile volatile只能强调数据的可见性,并不能保证原子操作和线程安全,因此volatile不是万能的.参考指令重排序 volatile最常见于下面两种场景. a. 循环 ...

  5. PAT甲级——【牛客练习题100】

    题目描述 Given N rational numbers in the form "numerator/denominator", you are supposed to cal ...

  6. fastjson中List和JSONArray的相互转换

    https://blog.csdn.net/xiaofei__/article/details/89571320 (1)List转换为JSONArray List<T> list = ne ...

  7. 《DSP using MATLAB》Problem 8.30

    10月1日,新中国70周岁生日,上午观看了盛大的庆祝仪式,整齐的方阵,先进的武器,尊敬的先辈英雄,欢乐的人们,愿我们的 国家越来越好,人民生活越来越好. 接着做题. 代码: %% ---------- ...

  8. 《DSP using MATLAB》Problem 8.29

    来汉有一月,往日的高温由于最近几个台风沿海登陆影响,今天终于下雨了,凉爽了几个小时. 接着做题. %% ------------------------------------------------ ...

  9. Activiti的helloworld

    所有语言的第一个程序都叫helloworld,姑且也称这第一个activiti程序为helloworld. 一个工作流想要实现,必定有一个对应的部署文件,利用流程设计器设计一个简单的流程,请假-> ...

  10. 二分判定 覆盖问题 BZOJ 1052

    //二分判定 覆盖问题 BZOJ 1052 // 首先确定一个最小矩阵包围所有点,则最优正方形的一个角一定与矩形一个角重合. // 然后枚举每个角,再解决子问题 #include <bits/s ...