好久没有写博客了，深究动画其实也就是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. JavaScript特效源码(3、菜单特效)

    1.左键点击显示菜单 左键弹出式菜单[推荐][修改显示的文字及链接即可][共2步] ====1.将以下代码加入HEML的<head></head>之间: <style t ...

  2. 网站PC端和移动端，用户通过设备识别

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!--<me ...

  3. LoadRunner添加Weblogic监控的注意事项(非单纯的操作步骤)

    LoadRunner添加Weblogic监控的注意事项(非单纯的操作步骤)   关于LR如何监控Weblogic(JMX方式)的操作就不在这里多说了,帮助文件和网上的介绍已经非常多了,关键是对各操作步 ...

  4. SoapUI测试接口【转】

    下载安装soapUI工具,具体安装按照提示往下走就可以,这里不着重说明,下面是我打开soapUI工具的起始窗口:  在Projects上鼠标右键点击,选择new soap project(新建一个SO ...

  5. csps模拟67神炎皇，降雷皇，幻魔皇题解

    题面:https://www.cnblogs.com/Juve/articles/11648975.html 神炎皇: 打表找规律?和$\phi$有关? 答案就是$\sum\limits_{i=2}^ ...

  6. input判断输入值是否合法

    1.判断input输入的值是否合法有很多办法,我这里使用的是在onchange时进行判断,代码如下:[所有主要浏览器都支持] <input type="text" name= ...

  7. 「BZOJ2391」Cirno的忧郁

    传送门 设p[0] = (-10001,-10001) 把所有点按p[0]极角排序, s[i][j]表示三角形p[0]p[i]p[j]内的总价值,若i到j极角增大则s为正,否则s为负. 那么答案就是按 ...

  8. 查看pip install *.whl 支持的文件版本

    import pip._internalprint(pip._internal.pep425tags.get_supported())[('cp37', 'cp37m', 'manylinux2010 ...

  9. css3之背景background-origin,background-clip,background-size

    background-origin属性指定了背景图像的位置区域. content-box, padding-box,和 border-box区域内可以放置背景图像. background-clip用来 ...

  10. UOJ#449 喂鸽子

    题意:有n个鸽子,你每秒随机喂一只鸽子,每只鸽子吃k次就饱了.求期望多少秒之后全饱了.n <= 50, k <= 1000. 解:有两种做法.一种直接DP的n2k做法在这.我用的是Min- ...