[HTML5]如何在 Canvas 中绘制扇形

蓝飞 蓝飞 | 时间:2014-12-02, Tue | 26,524 views
前端开发 

HTML5 Canvas 中,我们可以通过 arc 方法来绘制圆形:

// context.arc(x, y, r, sAngle, eAngle, counterclockwise);
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.arc(100, 100, 50, 0, 2 * Math.PI);
ctx.fill();

但如何绘制一个扇形呢?是不是简单地修改结束角度 2 * Math.PI 就可以了呢?<!--more-->

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.arc(100, 100, 50, 0, 1.5 * Math.PI);
ctx.fill();

然而,我们会看到一个不符合我们预期的图形:

如何在 Canvas 中绘制扇形

因为在 arc 方法是用来创建一条弧线的,而如果直接将弧线的起点和终点闭合,再进行填充,自然绘制出的是上面的图形了。

知道了原因,要解决就很简单了,只要让这条弧线与圆心进行闭合,就刚好形成了一个扇形:

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
// 开始一条新路径
ctx.beginPath();
// 位移到圆心,方便绘制
ctx.translate(100, 100);
// 移动到圆心
ctx.moveTo(0, 0);
// 绘制圆弧
ctx.arc(0, 0, 50, 0, Math.PI * 1.5);
// 闭合路径
ctx.closePath();
ctx.fill();

如何在 Canvas 中绘制扇形

这里的重点在于 moveToclosePath,将路径的起点设置在圆心,而最后闭合路径,正好就成为了一个扇形。

代码也可以抽取为通用的方法,如下:

CanvasRenderingContext2D.prototype.sector = function(x, y, radius, sAngle, eAngle, counterclockwise) {
    this.beginPath();
    this.translate(x, y);
    this.moveTo(0, 0);
    this.arc(0, 0, radius, sAngle, eAngle, counterclockwise);
    this.closePath();
    return this;
};

(阅读全文…)

[转载]闲聊CSS之关于clearfix--清除浮动

蓝飞 蓝飞 | 时间:2014-06-03, Tue | 7,845 views
前端开发 

一,什么是.clearfix

你只要到Google或者Baidu随便一搜"css清除浮动",就会发现很多网站都讲到"盒子清除内部浮动时可以用到.clearfix"。

.clearfix:after {
    content: " ";
    display: block;
    clear: both;
    height: 0;
}
.clearfix {
    zoom: 1;
}

<div class="clearfix">
    <div class="floated"></div>
</div>

上面的代码就是.clearfix的定义和应用,简单的说下.clearfix的原理:

1、在IE6, 7下zoom: 1会触发hasLayout,从而使元素闭合内部的浮动。

2、在标准浏览器下,.clearfix:after这个伪类会在应用到.clearfix的元素后面插入一个clear: both的块级元素,从而达到清除浮动的作用。

<div>
    <div class="floated"></div>
</div>
<div style="clear: both"></div>

(阅读全文…)

互联网常见Open API文档资源

蓝飞 蓝飞 | 时间:2014-04-30, Wed | 27,159 views
前端开发 

所谓的开放API(OpenAPI)是服务型网站常见的一种应用,网站的服务商将自己的网站服务封装成一系列API(Application Programming Interface,应用编程接口)开放出去,供第三方开发者使用,这种行为就叫做开放网站的API,所开放的API就被称作OpenAPI(开放API)。

网站提供开放平台的API后,可以吸引一些第三方的开发人员在该平台上开发商业应用,平台提供商可以获得更多的流量与市场份额,第三方开发者不需要庞大的硬件与技术投资就可以轻松快捷的创业,从而达到双赢的目的,开放API是大平台发展、共享的途径,让开发者开发一个有价值应用,付出的成本更少,成功的机会更多。今天,OpenAPI作为互联网在线服务的发展基础,已经成为越来越多互联网企业发展服务的必然选择。下面我就列举一些常见网站服务的Open API文档资源索引。<!--more-->

SNS类网站API

Facebook - http://developers.facebook.com/

人人网开放平台 - http://dev.renren.com/

51.com开放平台 - http://developers.51.com/

MySpace开发者平台 - http://developer.myspace.cn/

Opensocial - http://wiki.opensocial.org/

Google Gadgets 小工具 API 开发人员指南 - http://www.google.com/intl/zh-TW/apis/gadgets/docs-home.html

Gadgets API 开发人员指南 - http://code.google.com/intl/zh-CN/apis/gadgets/docs/dev_guide.html

Gadgets API - http://code.google.com/intl/zh-CN/apis/gadgets/

电子商务类

Amazon API - http://aws.amazon.com/

eBay API - http://developer.ebay.com/

淘宝开放平台 - http://www.taobao.com/theme/tao_source/

微博API

Twitter API - http://apiwiki.twitter.com/Twitter-API-Documentation

Status.Net(Laconica) API - http://status.net/wiki/Twitter-compatible_API

新浪微博开发者平台 - http://open.t.sina.com.cn

注:需要授权的开发者才能访问,其API调用格式类似Twitter,但需要一个API Key用于认证管理。

搜狐博客开放平台 - http://ow.blog.sohu.com/

Follow5 API - http://www.follow5.com/f5/jsp/other/api/api.jsp

嘀咕API - http://code.google.com/p/digu-api/wiki/DiguApi

做啥API - http://code.google.com/p/zuosa-api/wiki/ZuosaApiDoc

人间网API - http://renjian.com/api.html

9911微博API - http://www.9911.com/api.php

Google Maps API

Google Maps API Developer Guide - http://code.google.com/intl/en/apis/maps/documentation/

Google Maps API Tutorial - http://econym.org.uk/gmap/extensions.htm

GMaps Utility Library - http://code.google.com/p/gmaps-utility-library-dev/wiki/Libraries

GMaps Utility Examples - http://gmaps-utility-library.googlecode.com/svn/trunk/labeledmarker/release/examples/

Saving User-Added Form Data - http://code.google.com/intl/zh-CN/apis/maps/articles/phpsqlinfo.html

Firefox类

Mozilla 开发者中心的扩展开发专题 - https://developer.mozilla.org/en/Extensions

XUL 1.0 规范 - http://www-archive.mozilla.org/projects/xul/xul.html

更多地了解这种基于 XML 的用户界面语言,它可以构建各种富跨平台应用程序。

Mozilla Development Center 的 XUL 教程 - http://developer.mozilla.org/en/docs/XUL_Tutorial

Getting started with extension development 编写一个最简单的Firefox扩展 - http://kb.mozillazine.org/Getting_started_with_extension_development

Setting up extension development environment - http://developer.mozilla.org/en/docs/Setting_up_extension_development_environment

实战 Firefox 扩展开发 - http://www.ibm.com/developerworks/cn/web/wa-lo-firefox-ext/

使用 XUL 实现浏览器扩展 (1) - http://www.ibm.com/developerworks/cn/web/wa-xul1/

使用 XUL 实现浏览器扩展 (2) - http://www.ibm.com/developerworks/cn/web/wa-xul2/

应用类

豆瓣API - http://www.douban.com/service/apidoc/

Flickr API - http://www.flickr.com/services/api/

Last.fm API - http://www.last.fm/api

Box.net API - http://developers.box.net/

Delicious API - http://delicious.com/help/api

API统计 - http://www.programmableweb.com/apis

(阅读全文…)

[HTML5]前端开发攻城师绝对不可忽视的五个HTML5新特性

蓝飞 蓝飞 | 时间:2014-03-25, Tue | 7,397 views
前端开发 

HTML5已经火了一段时间了,相信作为web相关开发工程师,肯定或多或少的了解和尝试过一些HTML5的特性和编程。还记得以前我们介绍过的HTML5新标签。 作为未来前端开发技术的潮流和风向标,HTML5绝对不容忽视。

在今天这篇技术分享文章中,我们将介绍几个HTML5的重要特性,能够帮助你提高整个web应用的使用体验和开发效率,相信大家会感兴趣的!

特性一:正则表达式

相信大家都会非常喜欢这个特性,无须服务器端的检测,使用浏览器的本地功能就可以帮助你判断电子邮件的格式,URL,或者是电话格式,防止用户输入错误的信息,通过使用HTML5的pattern属性,我们可以很方便的整合这个功能,代码如下:

<input type="email" pattern="[^ @]*@[^ @]*" value="">

特性二:数据列表元素

在没有HTML5的日子里,我们会选择使用一些JS或者知名的jQuery UI来实现自动补齐的功能,而在HTML5中,我们可以直接使用datalist元素,如下:

<form action="/server" method="post">
    <input list="jslib" name="jslib" >
    <datalist id="jslib">
        <option value="jQuery">
        <option value="Dojo">
        <option value="Prototype">
        <option value="Augular">
    </datalist>
    <input type="submit" value="完成" />
</form>

特性三:下载属性

HTML5的下载属性可以允许开发者强制下载一个页面,而非加载那个页面,这样的话,你不需要实现服务器端的一些功能来达到同样的效果,是不是非常贴心?

<a href="download_pdf.php" download="somefile.pdf">下载PDF文件</a> 

特性四:DNS的预先加载处理

要知道DNS的的解析成本很高滴,往往导致了网站加载速度慢。现在浏览器针对这个问题开发了更智能的处理方式,它将域名缓存后,当用户点击其它页面地址后自动的获取。

如果你希望预先获取NDS,你可以控制你的浏览器来解析域名,例如:

<link rel="dns-prefetch" href="//www.gbtags.com">
<link rel="dns-prefetch" href="//www.gbin1.com">
<link rel="dns-prefetch" href="//m.gbin1.com">
<link rel="dns-prefetch" href="//s.gbin1.com">

特性五:链接网页的预先加载处理

要知道链接能够在也页面中帮助用户导航,但是页面加载的速度快慢决定了用户体验的好与坏,使用如下HTML5的prefetch属性可以帮助你针对指定的地址预加载页面或者页面中的特定资源,这样用户点击的时候,会发现页面加载速度提高了。

<link rel="prefetch" href="http://www.gbtags.com/gb/users.htm" />
<link rel="prefetch" href="http://www.gbtags.com/gb/networks/themes/img/logo_small.jpg" />

或者可以使用prerender属性,这个属性能够帮助你提前加载整个页面,如下:

<link rel="prerender" href="http://www.gbtags.com/gb/search.htm" />

通过设置这个属性,登录极客社区后,极客搜索页面已经加载了,这样如果你需要搜索,页面会立刻加载,相信你的用户肯定喜欢访问这样的网站!

以上就是我们今天分享的五个实用的HTML5特性,希望大家喜欢。

转自:极客社区

新浪微博表情插件——jQuery Sina Emotion 2.0发布

蓝飞 蓝飞 | 时间:2014-01-09, Thu | 17,113 views
前端开发 

jQuery Sina Emotion

重要说明:已更新,请通过 GitHub 获取最新版本。

这是什么?

一个用来方便快速地创建新浪微博表情选择对话框的jQuery插件。

有何特点

  • 使用简单,一行代码即可创创建出表情选择对话框
  • 自带智能表情解析方法(但还是建议表情解析在服务端进行)
  • 兼容IE6+、Chrome、Firefox、Opera等各种浏览器

(阅读全文…)