好久没有写博客了，深究动画其实也就是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. FingerPrint Fuzzy Vault Matlab实践

    本文实践了指纹识别生物特征识别研究论文A Fuzzy Vault Scheme的算法部分.原文请查看以下链接: Juels, A. & Sudan, M. Des Codes Crypt (2 ...

  2. PCA降维2

    前言 本文为模式识别系列第一篇,主要介绍主成分分析算法(Principal Component Analysis,PCA)的理论,并附上相关代码.全文主要分六个部分展开: 1)简单示例.通过简单的例子 ...

  3. js正则笔记

    //内容 var innerhtml = $('.reading_box_m').html().replace(/ tag="?[一二三四五六七八九十]+"?/ig, " ...

  4. JS 标签页切换(复杂)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...

  5. SpringData_02_JPQL查询、SQL查询和方法命名规则查询

    1.使用JPQL的方式查询 JPQL查询:Hibernate提供的是HQL查询,而JPA提供的是JPQL查询语言 使用Spring Data JPA提供的查询方法已经可以解决大部分的应用场景,但是对于 ...

  6. vue 实现邮戳边缘

    效果: vue: <template> <div class="couponItem"> <div class="itemLeft" ...

  7. JS写一个方法，传入一个数组，返回该数组的层深(维度)

    现在我们有一个多维数组,我们想得到该数组的层深,即最大维度 如:var arr = [1, [4,[5,6,[7]]], [2,3]] = 0:返回4:那么我们该怎么做呢? 核心思想:递归,循环遍历 ...

  8. Js中获取时间 new date()的用法

    Js中获取时间 new date()的用法 获取时间: var myDate = new Date();//获取系统当前时间 myDate.getYear(); //获取当前年份(2位) myDate ...

  9. mysql-connector-java-8.0.12使用时报错

    配置url加 &useSSL=false&serverTimezone=UTC 就可以了

  10. mysql设置密码登录

    参考: https://blog.csdn.net/Light_Breeze/article/details/82070222 https://www.jianshu.com/p/d979df2791 ...