three.js

SVG只是一种 矢量图 形文件格式， 不仅现在的浏览器都支持，很多主流的系统也都支持。 Canvas 是HTML5新增的一个元素对象，名副其实就是一个画布，浏览器 js 配有相应的操作api，可以不再依赖其他的API或组件而直接绘图，相当于 2D的API 。 WebGL 是以 OpenGL ES 2.0 为基础的一套 浏览器 3D图形API （HTML5），在编程概念上与OpenGL ES 2.0 几乎是完全通用的，同样采用可编程渲染管线，也就是每个顶点的处理受到一小段Vertex Shader代码的控制，每个像素的绘制过程也受到一小段Fragment Shader代码的控制。WebGL主要是3D为主， 不过2D的绘图要求也可以变通来实现。 WebGL 无论如何都需要一个显示对象来呈现，这个对象就是 Canvas，仅此而已，WebGL不对Canvas有任何附加的操作API， 那部分属于浏览器js支持的范畴。 WebGL 也继承 OpenGL ES 2.0 的兼容性支持能力， 在不同的设备上做有限的支持，需要运行时查询。 Three.js 、Babylon.js、Blender4Web等是几种知名的 WebGL 开发框架，对 WebGL 基础操作做了大量的封装，可以拿来就用， 即使不了解 WebGL规范的细节。 d3.js 是采用svg的数据驱动Dom ，用来对数据进行可视化

1、安装threejs ： npm install three --save 2、页面引入 ：import * as THREE from "three"; 如果使用到 OrbitControls 和 CSS3DRenderer import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js"; import { CSS3DRenderer,CSS3DObject } from "three/examples/jsm/renderers/CSS3DRenderer.js"; // 注意一定要引入CSS3DObjec 3、图片放在哪儿？ 在public下新建一个文件夹static 里面放入图片（如果图片放到src->assets图片文件夹中渲染时不显示图片） 4、在vue环境中渲染页面时明显比直接引入three.js方式卡 scene和camera等不要放在data里面，要在mounted时初始化，beforeDestroy时定时器清空 完整代码 <template> <div class="wrap"> <div ref="container" id="container"></div> </div> </template> <script> import * as THREE from

今天郭先生说一下用canvas解析图片流，然后制作一个动态二维码的小案例，话不多说先上图，在线案例点击 博客原文 。这是郭先生的微信二维码哦！ 1. 解析图片流 canvas = document.createElement('canvas'); // 创建canvas画布 content = canvas.getContext('2d'); // 获取画布的上下文 canvas.width = 310; // 设置尺寸 canvas.height = 310 ; img = new Image(); // 创建一张图片 img.src = require("../assets/images/base/wechat.png"); // 设置图片地址 img.onload = () => { // 在图片加载后 content.drawImage(img, 0, 0, canvas.width, canvas.height); // 将图片添加到画布，并设置宽高 imgData = content.getImageData(0, 0, canvas.width, canvas.height).data; // 获取画布数据 }; imgData是什么样的呢？如下图 这是一个Uint8ClampedArray的类型化数组，这个数组出现最多的也是在imgData上。它会将负数归入0