好久没有写博客了，深究动画其实也就是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》上卷——第1章

    知识点总结 1.什么是作用域? 作用域是根据名称查找变量的一套规则. 2.通常将JavaScript归类为“动态”或“解释执行”语言,但事实上它是一门编译语言. 3.编译 在传统编译语言的流程中,程序 ...

  2. loj2494 [hnoi2018]寻宝游戏

    题意:给你n个元素的数组a.你可以在每个元素之前添加and和or的符号.每次询问最后变成r有多少种添号情况. n<=1000,m<=5000,q<=1000. 标程: #includ ...

  3. leetcode146周赛-1131-绝对值表达式的最大值

    题目描述: class Solution: def maxAbsValExpr(self, arr1, arr2) -> int: def function(s1,s2): result1=[] ...

  4. Js中的onblur和onfocus事件应用介绍

    html页面中,诸如按钮.文本框等可视元素都具有拥有和失去焦点的事件,本文以文本框获得和失去焦点为例简单讲解onfocus和onblur的应用 html页面中,诸如按钮.文本框等可视元素都具有拥有和失 ...

  5. window查看端口信息

    netstat -nao |findstr "2129" 列出所有端口的情况 tasklist|findstr "pid" 查看对应进程信息

  6. java 对接芝麻信用 -用芝麻私钥解密错误

    最近在做芝麻信用认证对接, 按照官方的文档,配置了,appid ,私钥公钥 ,然后把示例文档拷过来, 结果 总是报错, 芝麻私钥解密 ZMOP.decode_private_key_error, 调了 ...

  7. 《DSP using MATLAB》Problem 8.25

    用match-z方法,将模拟低通转换为数字低通 代码: %% --------------------------------------------------------------------- ...

  8. spring容器创建bean对象的方式

    xml文件中有bean的配置,而且这个bean所对应的java类中存在一个无参构造器 那么这个时候spring容器就可以使用反射调用无参构造器来创建实例了(常规的方式) 通过工厂类获得实例(工厂类实现 ...

  9. neo4j 实战、实例、示例 创建电影关系图 -1

    1. 创建关系 因为代码占篇幅太大,创建整个"电源关系图"的代码在文章最下方. 2. 简单分析创建语句 2.1 创建电影节点 CREATE (TheMatrix:Movie {ti ...

  10. HBase Region的定位