一款基于jQuery的地图插件–jvectormap

jvectormap是一款基于jquery的地图插件,它的官网 http://jvectormap.com/

首先来看个例子。中国每个省份的称呼,然后,开始使用jvectormap来开发一款地图吧。

创建地图

地图的创建,主要包括js文件的下载和文件的引入,如下操作:

1. 下载jvectormap文件

需要下载的文件包括处理地图功能的jvectormap工具库、美化地图控件的css,和每个区域地图的js库:

工具库和css 继续阅读

发表在 前端技术 | 标签为 , , | 留下评论

理解canvas的rotate中心点

如你所知,在canvas中也有像css3里变形处理的功能,比如移动translate、旋转rotate以及缩放scale等。虽然这些应用在两者看来差不多。但是有一点是必须明确的,即css3中所有的变形处理中心点都是针对DOM元素本身,而在canvas里没有元素之说,因为它是由各种线条和图形组成的一个整体,类似一个画板。

默认情况下,canvas中心点是左上角,即坐标(0,0)。我们可以通过transform-origin来改变css3的中心点,而canvas也可以改变默认中心点,只不过需要通过translate平移内部的2d绘图环境。必须明确的是,对于变形处理的中心点而言,css3是针对变形元素的本身,而canvas是针对整个canvas绘图环境。

首先,我们来看下在不改变中心点情况下,canvas旋转前后的变化 继续阅读

发表在 前端技术 | 标签为 , | 留下评论

创建可视化音乐–web audio

在文章的开头,我们先来看下什么是音乐可视化:

音乐可视化–web audio

没错!这个类似音频解调器的东西就是音乐可视化。我们通过某种手段抓取音频数据,然后根据这些数据及时绘制到画布。要将数据绘制在画布中,我们需要准备一个canvas,有:

var canvas = document.getElementById("canvas");
    canvasCtx = canvas.getContext("2d"),
    canvasWidth = canvas.width,
    canvasHeight = canvas.height;

而音频的播放,你必须需要一个audio音频 继续阅读

发表在 前端技术 | 标签为 , | 留下评论

FIS前端构建工具之初体验

在今年一月份的时候我在博文中介绍了自动化构建工具Grunt,工作开发期间也一直结合Grunt来开发。直到最近因为换了新工作,结果被告知项目中是通过FIS进行前端构建,为了尽快融入工作中,学吧!

FIS是专为解决前端开发中自动化工具、性能优化、模块化框架、开发规范、代码部署开发流程等问题的前端工程化构建工具,FIS是由百度FEX团队开发一款开源项目,github地址为https://github.com/fex-team/fis 。

本篇文章是FIS的初体验,即介绍FIS的安装与常用功能,这些功能包含使用它来进行资源压缩、添加文件版本,资源合并等。如果你掌握了它,那么开发效率会极大提升,事实上,有时真觉得它比Grunt好用。好吧!不扯了,我们开始进入 继续阅读

发表在 前端技术 | 标签为 , | 留下评论

使用postMessage进行跨域通信

我们知道两个域名不同,或同一域名中协议、子域名、端口号其中一个不同时都属于跨域,无论是在平时的开发中,还是在面试里,我们会经常遇见跨域的问题。而针对跨域的解决方案,我们可以使用jsonp,也可以设置window.name,还可以通过iframe等,但这些都不是本篇重点,本篇的重点是postMessage。

window.postMessage方法提供了一套规避跨域的控制机制。当 window.postMessage 被调用时,会给目标页面发送消息,然后在目标页面触发message事件,目标页面再获取消息,然后进行相应的DOM或其他操作,当然我们也可以反向操作。好了,我们先看下他们的语法。

对于发送消息的方法有:

otherWindow.postMessage(message, targetOrigin, [transfer]);

继续阅读

发表在 前端技术 | 标签为 , , | 留下评论