Canvas getContext("3d")?

本文介绍了如何在不使用WebGL的情况下,通过Canvas 2D API实现简单的3D效果。作者通过回顾中学物理的透视原理,探讨了如何将三维坐标转换为二维屏幕坐标,并给出了一些实例代码,展示如何在canvas上绘制3D图形。同时,还分享了一个名为F3.js的组件,用于在canvas上模拟3D场景。

前言

不好意思,标题其实是开了个玩笑。大家都知道,Canvas 获取绘画上下文的 api 是 getContext("2d")。我第一次看到这个 api 定义的时候,就很自然的认为,既然有 2d 那一定是有 3d 的咯? 但是我接着我看到了 api 介绍的这句话

提示:在未来,如果 canvas 标签扩展到支持 3D 绘图,getContext() 方法可能允许传递一个 "3d" 字符串参数。

what? 我有一句妈卖批不知当讲不当讲... 从接触 canvas 之后我就一直等这个未来,等到后来我学习 three.js... 再等到现在,这个 getContext("3d") 还是没有出来。可能是因为越来越多浏览器都已经支持 webGL 的原因把,这个 getContext("3d") 有可能再也不会来了。

clipboard.png

webGL 就是浏览器端的 3D 绘图标准,它直接借助系统显卡来渲染 3D 场景,它能制作的 3D 应用,是普通 canvas 无法相比的。所以,你有复杂的 3D 前端项目,且不考虑 IE 的兼容性的话。不用说,直接使用 webGL 吧。

不使用 webGL 制作简单的 3D 效果

然而,有的时候我们只需要实现简单的 3D 效果。在没有学习 webGL 或这方面的框架的情况下,我们其实也可以在普通的 canvas api 基础上制作出来。而且,我们可以兼容 IE 9。先来看看,我们都能做些什么效果。

https://www.meizu.com/products/pro6/summary.html
clipboard.png

https://www.meizu.com/products/pro6/performance.html
clipboard.png

这的两个效果都是工作时简单的 3D 效果需求,没有必要使用 webGL。然而当时我并没有使用今天介绍的办法,因为没有扩展到 3D 坐标去实现所以只能很繁琐的转换成 2D 平面图形分析出来。

clipboard.png


js代码 [removed] ;(function() { &#39;use strict&#39;; var c = document.getElementById(&#39;c&#39;); var ctx = c.getContext(&#39;2d&#39;); var w = c.width = window.innerWidth; var h = c.height = window.innerHeight; var cx = w / 2; var cy = h / 2; var fl = 1000; function prj(obj) { var cz = obj.z fl; if(cz === 0) return; var scl = fl / cz; obj.p.x = cx obj.x * scl; obj.p.y = cy obj.y * scl; obj.s = scl; } var P = function(x, y, z) { this.x = x; this.y = y; this.z = z; this.s = 1; this.cl = 0; this.p = { x: 0, y: 0 }; }; P.prototype = { constructor: P, update: function() { this.z -= 30; }, render: function(ctx) { if(this.z <= -fl) return; ctx.save(); ctx.translate(this.p.x, this.p.y); ctx.scale(this.s, this.s); ctx.fillStyle = &#39;hsla(&#39; this.cl &#39;, 100%, 50%, 0.5)&#39;; ctx.beginPath(); ctx.arc(0, 0, 2, 0, Math.PI * 2); ctx.fill(); ctx.restore(); } }; var M = function(x, y, z) { this.list = []; this.max = 100; this.x = x; this.y = y; this.z = z; this.s = 1; this.p = { x: 0, y: 0 }; this.ax = Math.random() * (Math.PI * 2); this.ay = Math.random() * (Math.PI * 2); this.rx = Math.random() * 100; this.ry = Math.random() * 100; this.cl = Math.random() * 360; this.cls = Math.random(); }; M.prototype = { constructor: M, update: function() { this.cl = this.cls; this.ax = Math.random() * 0.1 - 0.02; this.ay = Math.random() * 0.1 - 0.02; this.x = Math.cos(this.ax) * 100; this.y = Math.sin(this.ay) * 100; this.z = 10; if(this.z > fl) this.z = fl; if(this.list.length < this.max) { if(Math.random() * 100 < 50) { var pp = new P(this.x, this.y, this.z); pp.cl = this.cl; this.list.push(pp); } } else { var pp = this.list.shift(); pp.x = this.x; pp.y = this.y; pp.z = this.z; pp.cl = this.cl; this.list.push(pp); } }, render: function(ctx) { if(this.z <= -fl) return; ctx.save(); ctx.translate(this.p.x, this.p.y); ctx.fillStyle = &#39;green&#39;; ctx.beginPath(); ctx.arc(0, 0, 2, 0, Math.PI * 2); ctx.fill(); ctx.restore(); } }; function update(mv, list) { for(var i = 0; i < list.length; i ) { var p = list[i]; p.update(); prj(p); p.render(ctx); } for(var i = list.length-1; i >= 0; i--) { var p = list[i]; if(p.z <= -fl) continue; if(i === list.length - 1) { ctx.lineWidth = Math.random(); ctx.strokeStyle = &#39;hsl(&#39; mv.cl &#39;, 100%, 50%)&#39;; ctx.beginPath(); ctx.moveTo(p.p.x, p.p.y); } else { ctx.lineTo(p.p.x, p.p.y); } } ctx.stroke(); } var ms = []; for(var i = 0; i < 10; i ) { ms.push(new M( Math.random() * 400 - 200, Math.random() * 400 - 200, Math.random() * 400 - 200)); } requestAnimationFrame(function loop() { requestAnimationFrame(loop); ctx.clearRect(0, 0, w, h); for(var i = 0; i < ms.length; i ) { var m = ms[i]; m.update(); prj(m); update(m, m.list); } }); })(); [removed] 这是一款基于HTML5 Canvas绘制的炫酷3D线条延伸动画特效,多彩颜色变幻,非常漂亮!
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值