HTML5的绝活:巧用Canvas制作会动的时钟


这次我们的目标是画一个会和时间同步的时钟,不过没有美学感觉,样子丑的厉害。 HTML5支持canvas了,可以直接在页面上绘图了,看了下canvas和GDI+的接口差不多,所以我们先了解些...
这次我们的目标是画一个会和时间同步的时钟,不过没有美学感觉,样子丑的厉害。


HTML5支持canvas了,可以直接在页面上绘图了,看了下canvas和GDI+的接口差不多,所以我们先了解些基本的概念和方式,然后来做一个应用吧。


  我们做所有的画之情需要一个画布,html的canvas标签就是帮我们声明了一个画布。


<canvas id="mycanvas">  
canvas>

       这个默认的画布的大小是300*150,接下来的工作大多就是javaScript来做了。

  首先要实例化这个画布

[javascript] view plaincopy
$(  
function() {  
    var canvas = document.getElementById("mycanvas");  
    $.log(canvas.width);  
    $.log(canvas.height);  
    var context = canvas.getContext("2d");  
    $.log(context.canvas);  
    $.log(context.fillStyle); //要填充的区域的颜色  
    $.log(context.strokeStyle); //要绘制的线条的颜色  
    $.log(context.lineCap); //笔帽样式  
    $.log(context.lineJoin); //两条连续线段的连接样式  
    $.log(context.lineWidth); //线段的宽度  
    $.log(context.miterLimit); //斜联接  
    $.log(context.shadowColor); //阴影的颜色,默认为#000000,  
    $.log(context.shadowOffsetX); //阴影在x方向上的偏移量,默认为0,不受坐标转换的影响。  
    $.log(context.shadowOffsetY); //阴影在y方向上的偏移量,默认为0,不受坐标转换的影响。  
    $.log(context.shadowBlur); //阴影的模糊度,默认为0,负数值将会被忽略  
}  
);

 

  上面的结果你可以得到一个大致的想法,就是content可以认为是我们将来作画用的画笔(估计有专业人士对强烈抗议,我直接忽略),canvas就是我们的画布。我们现在的画笔是2D的画笔,换句话说就是画平面几何的画笔。

  接下来,就是我们利用这个画笔来学习怎么画了

  各种线

[javascript] view plaincopy

  $(

  function() {

  var canvas = document.getElementById("mycanvas");

  var context = canvas.getContext("2d");

  context.strokeStyle = "rgb(255, 0, 0)";

  context.beginPath();

  context.lineCap = "butt"; //默认

  context.lineWidth = 10;

  context.moveTo(10, 10);

  context.lineTo(100, 10); //简单的一条线

  context.stroke(); //该方法真正在画布上绘制该线段

  context.beginPath();

  context.lineCap = "round"; //圆形线头

  context.moveTo(10, 30);

  context.lineTo(100, 30);

  context.stroke(); //该方法真正在画布上绘制该线段

  context.beginPath();

  context.lineCap = "square"; //方形线头

  context.moveTo(10, 50);

  context.lineTo(100, 50);

  context.stroke(); //该方法真正在画布上绘制该线段

  }

  );

 

  各种阴影

 [javascript] view plaincopy

  $(

  function() {

  var canvas = document.getElementById("mycanvas");

  var context = canvas.getContext("2d");

  context.strokeStyle = "rgb(255, 0, 0)";

  context.lineWidth = 10;

  context.shadowColor = "#0000FF";

  context.beginPath();

  context.lineCap = "round";

  context.moveTo(10, 10);

  context.lineTo(100, 10);

  context.shadowOffsetX = 10;

  context.shadowBlur = 10;

  context.stroke();

  context.beginPath();

  context.lineCap = "round";

  context.moveTo(10, 30);

  context.lineTo(100, 30);

  context.shadowOffsetY = 10;

  context.shadowBlur = 10;

  context.stroke();
标签: canvashtml5

更多 canvas 相关资讯

HTML5 Canvas标签属性及发展历史

Canvas标签被很多的工程师认为是HTML5最伟大的改进之一,因为它可以让我们在不使用图片的情况下实现网页的图形设计。 Canvas元素是为了客户端点阵图形而设计的。它自己没有行

八大疯狂的HTML5 Canvas及WebGL动画效果

八大疯狂的HTML5 Canvas及WebGL动画效果

HTML5、WebGL和JavaScript改变了长久以来的动画制作行业。在过去的几年中,我们想要制作卓越的网页动画只能使用Flash和Java Applet。而现在,使用脚本语言和渲染器在浏览器中

浅谈如何使用HTML5的Canvas绘图

浅谈如何使用HTML5的Canvas绘图

在HTML5中最重要的就是引入了Canvas,使得我们可以在WEB中绘制各种图形,这有点模糊了WEB应用和桌面程序的感觉。在HTML5之外,WEB也有基于xml的绘图,如:VML、SVG,而Canvas是基于像

开发者值得关注的HTML5新特性Canvas

开发者值得关注的HTML5新特性Canvas

随着IE 10的即将发布正式版,标志者HTML5的时代已经越来离我们越来越近了,尽管HTML 5的最终标准草案还没最终敲定,但象Chrome,Firefox等浏览器对HTML5的标准已经支持的

拉锯战:HTML5对战FLASH

拉锯战:HTML5对战FLASH

  2010年4月30日,乔布斯宣布iOS弃Flash,采用HTML5的消息传出后,微软也力挺乔布斯,称Flash落后。乔布斯封杀Flash的理由是:Flash不适合触摸设备,技术封闭。而HTML5可以通过代码实

更多 html5 相关资讯

未来将基于HTML5 Jolicloud Me Beta推出

未来将基于HTML5 Jolicloud Me Beta推出

最初云服务是基于PC平台上面的,随着移动智能终端配置的增强、数量的增加,云服务的重心也逐渐转向了移动平台,国外有大名鼎鼎的Dropbox,而国内也有类似的服务如酷盘、QQ网盘等等

Visual Studio 11增强HTML5和JS的支持

Mads Kristensen 在 TechDays 2012 海牙站上发表了一场很有趣的演讲,演讲内容是关于在 Visual Studio 11 和 ASP.NET 4.5 中所有的新功能和新选项。   然而,当我们浏览这

3款“核”手机浏览器性能大比拼

3款“核”手机浏览器性能大比拼

随着3G上网的普及和移动设备端性能的大幅提升,用户对手机浏览器提出了越来越高的要求,移动互联网的入口之争也因此愈发激烈。目前国内不少手机浏览器厂商如UC、QQ等都自称推出

英特尔平台开发HTML5移动应用

英特尔平台开发HTML5移动应用

科技总是在进步,我们的视野也总是越来越开放,几年之前谁能想到移动操作系统能够打破微软和英特尔固有的生态链条,萌生更加多样化的生态模式?没有人相信移动互联网领域能够出现

HTML5应用Everything.me重新定义移动搜索

HTML5应用Everything.me重新定义移动搜索

北京时间3月15日消息,据国外媒体报道,科技博客The Next Web撰稿人科特尼·博伊德·梅尔斯(Courtney Boyd Myers)发表文章,称Everything.me是今年SXSW大会上最好的新应用。以下为

HTML5提供的音频播放标准

直到互联网高速发展的今天,WEB中仍然不存在网页上播放音频的标准。 大多数音频是通过插件(比如 Flash)来播放的。然而,并非所有浏览器都拥有同样的插件,所以这似乎是一个非常难统

傲游浏览器HTML5测评得分全球第一

傲游浏览器HTML5测评得分全球第一

中国领先的全球软件服务公司傲游(www.maxthon.com)于3月15日发布的3.3.6.1000正式版浏览器,HTML5测评跑分达到382,远超Chrome、Firefox等浏览器大鳄,位居全球PC浏览器第一

主流网络浏览器HTML5兼容性能大PK

主流网络浏览器HTML5兼容性能大PK

HTML5 兼容性测试   HTML4作为上一代网页标准语言,在上个十年里一直占据着绝对的统治地位,到今天为止,仍有超过99.9%的网站的网页是采用HTML4语言编写的。然而随着Web2.0

格局裂变:国内手机浏览器HTML5之争

格局裂变:国内手机浏览器HTML5之争

从1990年蒂姆·伯纳斯·李(Tim Berners-Lee)发明世界上第一个浏览器之时,高速更迭的互联网就引爆过三次“划时代”的世界大战。而越来越习惯用手机浏览器发微博的你,却正在见证

万众瞩目的HTML5与蓄势待发的WebAPP

万众瞩目的HTML5与蓄势待发的WebAPP

万众瞩目的HTML5与蓄势待发的WebAPP 虽然HTML5至今还是个草案,但是风靡世界的iOS设备以及Android 4.0对flash的不支持,以及HTML 5本身的优良特性,还是使得无数开发者进入