好久没有写博客了，深究动画其实也就是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. csp-s模拟测试55 联，赛，题题解

    题面:https://www.cnblogs.com/Juve/articles/11610969.html 联: 用线段树维护区间和,要修改成1或0就线段树修改区间和 如果是异或,那么新的区间和就是 ...

  2. CPU的load和使用率傻傻分不清(转）

    转自: https://www.cnblogs.com/yunxizhujing/p/9382396.html 1. 什么是Cpu的Load 使用uptime.top或者查看/proc/loadavg ...

  3. swoole是如何实现任务定时自动化调度的？

    https://www.muzilong.cn/article/117 开发环境 环境:lnmp下进行试验. 框架:laravel5 问题描述 这几天做银行对帐接口时,踩了一个坑,具体需求大致描述一下 ...

  4. PAT甲级——A1066 Root of AVL Tree

    An AVL tree is a self-balancing binary search tree. In an AVL tree, the heights of the two child sub ...

  5. Ln- Linux必学的60个命令

    1.作用 ln命令用来在文件之间创建链接,它的使用权限是所有用户. 2.格式 ln [options] 源文件 [链接名] 3.参数 -f:链结时先将源文件删除. -d:允许系统管理者硬链结自己的目录 ...

  6. 记录：vue结合springboot进行分页查询和按条件进行查询

    界面: 主要代码: 搜索框: <el-form ref="searchForm" :inline="true" :model="searchMa ...

  7. Lua程序设计之数值

    (摘自Lua程序设计) 数值常量 从Lua5.3版本开始Lua语言为数值格式提供了两种选择:被称为integer的64位整形和被称为float的双精度浮点类型(注意,"float" ...

  8. 实现一个koa-logger中间件

    //koa-logger.js module.exports = async(ctx,next)=>{ const start = new Date().getTime() // 中间件异步处理 ...

  9. SQL的特点

    1.综合统一 2.高度非过程化 3.面向集合的操作方式 4.一同一种语法结构提供两种使用5.语言简洁易学易用

  10. Django WSGI响应过程之WSGIHandler

    class WSGIHandler(base.BaseHandler): request_class = WSGIRequest def __init__(self, *args, **kwargs) ...