canvas用2d渲染出3d的感觉

　　好久没有写博客了，深究动画其实也就是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,0,Math.PI*2);
    panel.closePath()
    panel.fillStyle = color ;
    panel.fill()
}

 

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

var perspective = 1000
// 一个小球的构造函数，可以生产小球
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(300,300,1000,20)
small_ball.render()

 

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

 

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

最简单的透视计算方法。

perspective=0 => scale=0
perspective=1000 => scale=1

 

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

var scale = this.z/perspective ;
var r = this.r*scale ;

 

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

 

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

 

这个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/2)*scale + w/2
        var y = (this.y-h/2)*scale + h/2
        drawBall(x,y,r)
    }
}

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

 

最后贴一个效果图

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

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