学习D3.js的旅途中看到的风景十分美妙, 壮丽 有时甚至有些崎岖. 你可能会被d3.js文档长长的function列表所吓到(d3’s API documentation ), 或者被成堆的教程弄的疲惫不堪( dozens of tutorials). 这里有超过两万个例子你…

这周接到一个这样的坑爹需求，小程序需要实现一个图片分享的功能。让用户可以把图片发送到朋友圈或者其他渠道。 刚开始拿到这个需求，觉得还好，没有太大的感觉, 第一个感觉想把锅甩给后端，调用一个接口让后端传回来一个URL，前端只负责显示就好。^_^  当然这么天真的想法基本上不…

我的场景是一个匀速直线运动的小姐姐。 在这个 Demo 中，小姐姐是按照 x 轴 10px/s，y 轴 30 px/s 进行移动的，不过她的移动是明显伴随着抖动的。 我索性把小姐姐的移动速度调快，调成 100px/s，发现，还是会抖动，以为高高兴兴能解决了这个问题，发现还是没那…

文字是网页中最基本的元素，一般我们在网页上都是展示的静态文字，但是就效果来说，还是比较枯燥的。文字淡入淡出的动画效果在项目中非常实用，如果有某些关键的文字，可以通过这种动态的效果来提醒用户阅读。 这个 Demo 是不断重复地设置文字的大小和透明度，这些英文字母也是我自己利用 H…

前几天有很多人问到了如何绘制高德地图那样的导航箭头线效果，当时想了想并不难就先用canvas 做了，然后集成到mapbox 上，迁移到其他map lib 也只需要应用相应的地理转屏幕坐标函数。 在canvas 的应用中我们经常会遇到各种线样式的绘制，比如虚线，渐变线，带patt…

现代浏览器支持通过<video>元素播放视频。大多数浏览器也可以通过MediaDevices.getUserMedia() API访问摄像头。但即使这两件事结合起来，我们也无法直接访问和操纵这些像素。 幸运的是，浏览器有一个Canvas API，允许我们使用JavaScript…

作为新手，比如我，探索canvas是在页面上加个canvas元素开始的。 刷新页面后，页面上就能看到一个虚线框，这个就是默认大小的canvas元素了。 把canvas宽度和高度设置大些，在css里定义好宽度和高度后，事实上并没有效果。解决的办法直接在html属性中定义。 can…

低碳工业园区的建设与推广是我国推进工业低碳转型的重要举措，低碳工业园区能源与碳排放管控平台是低碳工业园区建设的关键环节。如何对园区内的企业的能源量进行采集、计量、碳排放核算，如何对能源消耗和碳排放进行实时动态监测等问题，涉及多个技术领域，专业性强。其数据不仅要求准确，更要求真实…

这篇是学习和回顾canvas系列笔记的第四篇，完整笔记详见：canvas核心技术。 在前面几篇中，我们回顾了在canvas中绘制线段，图形，图片等基本功能，当在制作2d游戏或者更为丰富的图表库时，必须提供强大的动画功能。canvas本身不提供像css中animation属性专门…