Webgl.-Canva

前言智能城市是一个系统。也称为网络城市、数字化城市、信息城市。智能城市建设是一个系统工程：首先实现的是城市管理智能化，由智能城市管理系统辅助管理城市，通过管理系统人们可以监视城市的运行，了解城市每天中发生的变化，以及及时的根据这些变化做出相应的管理；其次是包括智能交通、智能电力、智能安全等基础设施的智能化，交通是一个城市的驱动，交通的畅通加速了城市的发展，通过 Web 可视化的交通管理，可以更及时的了解交通情况，做出处理；智能城市也包括智能医疗、智能家庭、智能教育等社会智能化和智能企业、智能银行、智能商店的生产智能化，从而全面提升城市生产、管理、运行的现代化水平。本 demo 使用 HT for Web 产品轻量化 HTML5/WebGL 建模的方案，构建了城市建筑群场景，添加了城市道路，实现了智能城市 Web 可视化，还通过动画模拟了城市的运行。 demo 地址：http://www.hightopo.com/demo/intelligent-city/entry/dest/index.html 预览图：代码实现加载场景首先新建一个场景，并将场景添加到页面中。 let dm = this.dm = new ht.DataModel();let entryG3d = this.entryG3d = new ht.graph3d.Graph3dView(dm);entryG3d.addToDOM(); // 将场景添加到页面中 HT 的组件一般都会嵌入 BorderPane、SplitView 和 TabView 等容器中使用，而最外层的 HT 组件则需要用户手工将 getView() 返回的底层 div 元素添加到页面的 DOM 元素中，这里需要注意的是，当父容器大小变化时，如果父容器是 BorderPane 和 SplitView 等这些 HT 预定义的容器组件，则 HT 的容器会自动递归调用孩子组件 invalidate 函数通知更新。但如果父容器是原生的 html 元素，则 HT 组件无法获知需要更新，因此最外层的 HT 组件一般需要监听 window的窗口大小变化事件，调用最外层组件 invalidate 函数进行更新。 ...

Canvas2D基础什么是Canvas<canvas>是H5中最受欢迎的元素，在页面上划出一片区域，利用JS在上面画出图形，起初由Apple公司提出，各大浏览器厂商也对其做了不同程度上的实现。canvas中规定了了2D context和3D context（WebGL），目前绝大部分浏览器支持2D context。WebGL的发展还比较缓慢。基本使用1、toDataURL() 将画好的图像输出为图片 //get data URI of the imagevar imgURI = drawing.toDataURL("image/png");//display the imagevar image = document.createElement("img");image.src = imgURI;document.body.appendChild(image);2、原点是基于canvas元素左上角3、2D Context的两个基本绘画操作 fill and stroke Rectangles（矩形）1、fillRect() context.fillRect(10, 10, 50, 50);//draw a blue rectangle that’s semi-transparentcontext.fillStyle = "rgba(0,0,255,0.5)";context.fillRect(30, 30, 50, 50);2、strokeRect() //draw a red outlined rectanglecontext.strokeStyle = "#ff0000";context.strokeRect(10, 10, 50, 50);//draw a blue outlined rectangle that’s semi-transparentcontext.strokeStyle = "rgba(0,0,255,0.5)";context.strokeRect(30, 30, 50, 50);3、clearRect() //draw a red rectanglecontext.fillStyle = "#ff0000";context.fillRect(10, 10, 50, 50);//draw a blue rectangle that’s semi-transparentcontext.fillStyle = "rgba(0,0,255,0.5)";context.fillRect(30, 30, 50, 50);//clear a rectangle that overlaps both of the previous rectanglescontext.clearRect(40, 40, 10, 10);Drawing Paths1、如何画一个表盘 ...