起始点 的 x 和 y 坐标 都小于 结束点，（ 起始点x < 结束点x；起始点y < 结束点y ） ：
手机和数码相机拍的照片里除了我们能看到的RGB像元数据，还包含了拍摄时间、图像分辨率、感光值、GPS坐标等属性，记录在Exif(Exchangeable image file format)模块里。
前言 上周六有个群友@我说Gitee的反馈模块新增了截图功能，我就去体验了下，发现他们用的就是我的插件😁，本文就跟大家分享下这个插件，欢迎各位感兴趣的开发者阅读本文。 插件地址与实现原理 本插件采用原生js实现，可以集成在任意一个web项目中，插件npm地址与GitHub地址请移步： js-screen-shot（npm）[1] js-screen-shot（GitHub）[2] 插件的实现原理请移步： 实现Web端自定义截屏[3] 实现Web端自定义截屏(JS版)[4] 在线体验本插件，可移步我的开源项目
在日常开发和学习中，坐标轴能粗略的帮我们定位元素位置和关系。所以我使用 Three.js 学习和开发时基本都会打开坐标轴。
本文将会带你了解到我是如何创建一个动态树图的，该图使用 SVG（可缩放矢量图形）绘制三次贝塞尔曲线（Cubic Bezier）路径并通过 Vue.js 以实现数据响应。
Canvas是常见的前端技术，但是由于API众多，使用复杂，且对程序员的数学功底、空间想象能力乃至审美都有一定要求，所以真正擅长canvas的前端并不多，但并不代表大家就学不好canvas。我在此将常用的canvas使用场景罗列出来希望能帮助到大家。
下面通过css实现动画效果，可以使用脚本化的css实现滑入，轮廓伸缩的列表，即动态的HTML，一个过时的说法DHTML
在Three.js中，三维空间指的是具有三个独立轴的空间，通常称为X、Y和Z轴。这种空间用于描述和定位3D对象的位置、旋转和缩放。
Turf.js是JavaScript 空间分析库，由Mapbox 提供，Turf 实现了
在简单的图形和动画轨迹上，我们可以换一种实现思维，例如通过函数来实现。
作为一个前端，说到可视化除了听过 D3.js 的大名，常见的可视化库还有 ECharts、Chart.js，这两个库功能也很强大，但是有一个共同特点是封装层次高，留给开发者可设计和控制的部分太少。和 EChart、Chart.js 等相比，D3.js** 的相对来说自由度会高很多，得益于 D3.js 中的 SVG 画图对事件处理器的支持**，D3.js 可将任意数据绑定到文档对象模型（DOM）上，也可以直接操作对象模型（DOM）完成 W3C DOM API 相关操作，对于想要展示自己设计图形的开发者，D3.js 绝对是一个不错的选择。
clip path，话说这个东西是css3中的新特性，它可以遮罩许多形状，圆的、方的、扁的都可以，还有多边形(polygon)，这个polygon最是有趣。 因为clip path的前身是svg，所以
通读完上一篇博文中提及的教程，觉得应该搞个大作业巩固一下所学的知识，想起刚上映的漫威宇宙第三阶段收官之作《蜘蛛侠·英雄远征》，于是决定仿一个MARVEL的片头动画作为three.js的课后练习，使用的版本是R104版本。本节先来解决视频贴图的问题。
地址和经纬度互相转换的功能也经常用到，比如上次的路线方案查询的功能，之前官网是提供了直接输入出发地点和目的地的中文汉字，就可以查询到最优的路线，后面只支持输入出发地点和目的地的经纬度坐标了，这个就有点绕了，让用户输入什么经纬度坐标，那是个什么鬼？没有几个用户搞得懂的，所以就需要先将用户输入的出发地点和目的地的中文汉字先查询到对应的经纬度坐标，然后再传入路线查询的JS函数中查询结果即可，为什么突然关闭了这个地址经纬度自动转换的功能呢？我去后台看了下，原来这项功能变成收费模块了。
第一次使用腾讯位置服务也算是挺早的，当时是在web端使用。后来，个人慢慢接触到小程序，有一次的需求是能够展示附近的各类店铺，方便自己快速定位周围有什么好吃好逛的地方。再后来每次到一个地方旅游，我们必不可少的一个需求就是需要上WC，当时就在想如何通过一个地图来实现快速定位周边WC的位置以及步行路线，现在好了，有腾讯位置服务功能可以直接在小程序上面直接使用，借助巨人的力量可以好好发挥去实现需求功能了。
国内提供地图服务的厂家基本上是五家，百度地图、高德地图、腾讯地图、搜狗地图、天地图，国外的一般还有谷歌地图、微软地图（BING地图），这几家的地图服务的api接口都大同小异，甚至很多函数的名字都一模一样，毕竟叫的很通俗，这样也很容易理解，除了引入的地图服务JS文件不同，对象名称不同，其他大多数都类似，这就给了程序员很方便的统一的思路，整体上的流程都如下：
简单来说，如果你需要用 canvas 做特效或者做交互，那不妨试试 Fabric.js 这个库，它会使开发更加简单和直观。
本文从绘图基础开始讲起，详细介绍了如何使用 Three.js开发一个功能齐全的全景插件。
| 导语 手Q终端原生的图片预览器支持图片翻页和各种手势，这些用H5怎样实现？基于alloyFinger，本文将介绍在手Q动漫上的图片预览组件是如何做到媲美原生体验的手势效果，同时也介绍一下关于图片手势效果里隐含的一些细节。希望对要实现手势交互和动画的前端同学有所启发。 作者：朱晓华--腾讯web前端工程师 @IMWeb前端社区 一、实现效果 先来看实现效果。目前已经上线的图片预览组件的路径如下：手Q动态——动漫——社区——点击图片。 类比手Q的AIO里的图片预览器，支持的手势和功能分别如下： 手Q动漫
最近从北京搬到了上海，开始了一段新的生活，算是人生中一个比较大的事件，于是特地用 Three.js 做了下可视化。
Paper.js 中的项目对象通常被称为文档：它是顶级对象，包含场景图中的所有项目。由于文档一词在浏览器上下文中已被使用，因此它被称为 Project。
持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第2天，点击查看活动详情
在Three.js中，一个可见的物体是由几何体和材料构成的。在这个教程中，我们将学习如何从头开始创建新的网格几何体，研究Three.js为处理几何对象和材质所提供的相关支持。
关于日本排放核污水，在B站看了很多UP主各路跟踪报道和整活儿，有制作末日视频的，有写末日小说的，有奇怪图片创作的，当时的一个想法是难道就只有B友整活没有掘友用技术整活是吗？
不得不说现在三维图形渲染技术更新换代实在是太快,OpenGL很多资料还没来得及学习就已经有点落伍了。NeHe的学习教程还有之前用的《OpenGL编程指南》第七版（也就是红宝书）都非常好，可惜它们都是从固定管线开始讲起的;而现在可编程管线的技术已经是非常常见的基础技术了。后来我还看过《OpenGL编程指南》第八版（白皮书），这本教程是从可编程管线（着色器）开始讲起的，看的时候就觉得没有前面的基础打底，显得非常的晦涩，远不如红宝书易懂。羞愧的说，我已经多次入门失败了。
睁开您的眼睛，看看你的周围，它是一个多么美妙的3D世界啊。3D世界由什么组成，除了上帝，还有谁能够回答呢？
每个游戏都会包含场景和角色。要实现一个游戏角色，就要清楚角色在场景中的位置，以及它的运动规律，并能通过数学表达式表现出来。 场景坐标 canvas 2d的场景坐标系采用平面笛卡尔坐标系统，左上角为原点(0,0)，向右为x轴正方向，向下为y轴正方向，坐标系统的1个单位相当于屏幕的1个像素。这对我们进行角色定位至关重要。 Enemy粒子 游戏中的敌人为无数的红色粒子，往同一个方向做匀速运动，每个粒子具有不同的大小。 入口处通过一个循环来创建Enemy粒子，随机生成粒子的位置x, y。并保证每个粒子都位于上图坐标
最近断断续续地写出了这么个东西：http://ucren.com/demos/d3d/index.html。
在 ArcGIS Maps SDK for JavaScript 中，Map 和 MapView 是两个重要的概念，用于创建和展示地图应用程序。
本文主要介绍了WebGL和Three.js的渲染流程，从加载模型到生成纹理和片元着色器，再到进行矩阵计算和坐标转换，最终完成3D渲染。
最近公司项目需求，要做一个百度地图电子围栏的功能，在网上查了一下资料，看了很多博客，大多数都写的不是很详细，我看的云里雾里的，最后终于集合所有的几篇资料，自己做出了一个简单的demo，下面将过程记录和分享一下，希望给予有需要同学一些帮助，我这个人说话比较啰嗦，所以写的一定会很详细的，哈哈！闲言少叙，开始了。
这篇文章中，我们将介绍小程序地图组件的使用，官方文档已经比较详细的介绍了map组件的使用，但是对于刚开始接触地图组件的同学，难免有些难以下手。本文将以Hello World为例对地图组件的使用列出一些demo，以方便后续开发。
叮叮当，叮叮当，吊儿个郎当，一年一度的圣诞节到咯，我不由的回想起了前两年票圈被圣诞帽支配的恐惧。打开票圈全是各种@官方求帽子的：
上篇简要介绍了svg.js的基本信息和基本用法，这篇开始详细讲解svg.js的用法。
地图应用非常广泛，目前地图服务，都提供地图操作、标注、地点搜索、出行规划、地址解析、街景等接口，功能非常丰富。在实际开发过程中，各有优劣。本次基于需求，使用腾讯位置服务作为一个公用厕所位置标注的H5页面开发。
本文的目标是和各位工友一起有序的快速上手 p5.js ，会讲解 p5.js 的基础用法。
获取页面中元素到文档区域document的横向、纵向坐标的两种方法及其比较 在js控制元素运动的过程中，对于页面元素坐标位置的获取是经常用到的，这里主要总结下两种方法：
Three.js是一个流行的JavaScript库，用于在浏览器中创建和显示3D图形。它基于WebGL，一个浏览器支持的3D图形API，使得开发者能够在网页上创建复杂的3D场景和交互体验。
上面的代码使用了 Fabric.js 绑定了页面上的画布，并创造了一个粉红色的矩形。
loadBaiduMap.js export default function loadBaiduMap(ak) { return new Promise(function (resolve, reject) { // window.onload = function () { // resolve(BMapGL) // } window.init = function(){ resolve(BMapG
上几篇说了three.js的曲线，这篇来郭先生来说说three.js曲线，在线案例点击three.js曲线
当今的Web开发中，图形和动画已经成为了吸引用户注意力的重要手段之一。而 Pixi.js 作为一款高效、易用的2D渲染引擎，已经成为了许多开发者的首选（我吹的）。本文将为工友们介绍PixiJS的基础知识和使用方法，希望可以和工友们**快速光速入门**，掌握 Pixi.js 的用法。
Web 全景在以前带宽有限的条件下常常用来作为街景和 360° 全景图片的查看。它可以给用户一种 self-immersive 的体验，通过简单的操作，自由的查看周围的物体。随着一些运营商推出大王卡等
他们或者单个出现在着色器中，或者组团出现在着色器中，是着色器的灵魂。下面来分别说一说他们的意义和用法。
前面一节我们初步了解了BufferGeometry，它可以自定义任何几何形状，它的数据存储在BufferAttribute中。我们也使用BufferGeometry创建了一个自定义的mesh物体，但是，如果你跟着步骤创建了这个物体，用鼠标反转你会发现，这个物体只有一个面可以看到，反转后是看不到任何物体的，这是因为在Threejs中，空间中一个三角形是有正反两面的，在Three.js中规则你的眼睛(相机)对着三角形的一个面，如果三个顶点的顺序是逆时针方向，该面视为正面，如果三个顶点的顺序是顺时针方向，该面视为反面。 我们可以在创建材质的时候配置side属性来设置物体的正反面是否可见。 1. 三角面的正反面 Three.js的材质默认正面可见，反面不可见。
view组件可用作父容器，也可以用来展示一段文本，text组件也可以用来展示文本，区别在于view中的文本不能选中。 {{}}是小程序中数据绑定的语法。在小程序中没有dom和bom，所以不能根据id等属性获取控件，只能通过数据绑定的方式。 在index.js中未变量addresss赋值，然后index.wxml中就可以自动更新，这与angular很像，但是，小程序中是单项绑定。 tap是一个触摸事件，小程序中使用bind或者catch方式绑定事件，其属性值是一个函数名称，这个函数在index.js中定义，当用户触摸此view时就会执行对应的函数
在上一节中，我们讨论了普通组件的开发与使用，其实相比较 vue 2.0 来说，差别并不大。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM
