《HTML5 canvas开发详解(第2版)》——第1章 HTML5 Canvas简介1.1 什么是HTML5

简介:

本节书摘来自异步社区《HTML5 canvas开发详解(第2版)》一书中的第1章,第1.1节,作者: 【美】Steve Fulton , Jeff Fulton 更多章节内容可以访问云栖社区“异步社区”公众号查看。

第1章 HTML5 Canvas简介

HTML5是新一代的HTML,即超文本标记语言。HTML从1993年第一次标准化后,便奠定了万维网的基础。HTML通过使用将标签用尖括号(< >)括起来的方式定义Web页面内容。

HTML5 Canvas是屏幕上的一个由JavaScript控制的即时模式位图区域。即时模式是指在画布上呈现像素的方式,HTML Canvas通过JavaScript调用Canvas API,在每一帧中完全重绘屏幕上的位图。作为一名程序员,所要做的就是在每一帧渲染之前设置屏幕的显示内容,这样才能显示正确的像素。

这使得HTML5 Canvas与在保留模式下运行的Flash、Silverlight或SVG有很大的区别。在保留模式下,对象显示列表由图形渲染器保存,通过在代码中设置属性(例如,x坐标、y坐标和对象的alpha透明度)控制展示在屏幕上的对象。这使得程序员可以远离底层操作,但是它弱化了对位图屏幕最终渲染效果的控制。

基本的HTML5 Canvas API包括一个2D环境,允许程序员绘制各种图形和渲染文本,并且将图像直接显示在浏览器窗口定义的区域。读者可以对画布上放置的的图形、文本和图像应用颜色、旋转、渐变色填充、alpha透明度、像素处理等,并且可以使用各种直线、曲线、边框、底纹来增强其效果。

就其本身而言,HTML5 Canvas 2D环境是一个用来在位图区域渲染图形显示的API,但人们很少使用该技术在这个环境中创建应用程序。通过跨浏览器兼容的JavaScript语言可以调用键盘鼠标输入、定时器间隔、事件、对象、类、声音、数学函数等功能,希望读者能够学会并使用HTML5 Canvas创建优质的动画、应用程序和游戏。

本书将深入解读Canvas API。在此过程中,本书将展示如何使用Canvas API来创建应用程序。本书中的很多技术已经被成功应用于其他平台,现在,本书要将它们应用到HTML5 Canvas这个令人兴奋的新技术上来。

支持HTML5 Canvas的浏览器

除了IE 8以外,很多新版本的浏览器都支持HTML5 Canvas。几乎每天都会支持新的特性。支持最好的应该是Google Chrome,紧接着是Safari、Internet Explorer 10、Firefox、Opera。本书将利用名为modernizr.js的JavaScript库来帮助判断各个浏览器支持哪些Canvas特性。

1.1 什么是HTML5

最近HTML5的定义已经发生了转变,当作者在2010年编写本书第一版的时候,W3C的HTML5规范是一个独特的单元,它涵盖了有限的功能集合,其中包括了诸如新的HTML标签(< video >、< audio >和< canvas >)之类的东西。然而,在过去的一年中,这一定义已经发生了改变。

那么,究竟什么是HTML5?在W3C HTML5的常见问题中,关于HTML5是这样说明的:HTML5是一个开放的平台下开发的免费许可条款。

术语HTML5会被人们使用在以下两个方面。

  • 指一组共同构成了未来开放式网络平台的技术。
    这些技术包括HTML5规范、CSS3、SVG、MATHML、地理位置、XmlHttpRequest、Context 2D、Web字体以及其他技术。这一套技术的边界是非正式的,且随时间变化的。
  • 指HTML5规范,当然也是开放式网络平台的一部分。

在过去的几个月里,我们通过交谈和项目工作了解到的是:普通人(或者说那些急着要完成项目的客户)谁也不会严格遵守上述定义,这些都是HTML5。因此,当有人说起“HTML5”的时候,他们实际上指的是“开放式网络平台”。

当人们提及“开放式网络平台”时,有一件可以确定的事是,这份邀请名单中一定不能漏掉Adobe Flash。

HTML5是什么?总之,它不是Flash(也不是其他类似的技术)。HTML5 Canvas是最有能力在网络和移动互联网上取代Flash功能的最好的技术。这本书将带领读者学习如何开始使用HTML5 Canvas。

相关文章
|
4月前
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
194 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
4月前
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
99 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
4月前
|
移动开发 前端开发 HTML5
基于HTML5+Canvas绘制的鼠标跟随三角形碎片光标动画代码
基于HTML5+Canvas绘制的鼠标跟随三角形碎片光标动画特效代码,很有意思,一团三角形碎片跟随鼠标的移动,不冗长、不笨重,反而有一种很轻盈的感觉,非常不错
86 29
|
4月前
|
移动开发 前端开发 HTML5
Html5 Canvas绘制圆形仪表盘动画源码
Html5 Canvas绘制圆形仪表盘动画特效是一款基于HTML5 Canvas绘制的圆形百分比仪表盘动画特效。
42 1
|
5月前
|
Web App开发 移动开发 前端开发
html5 canvas五彩碎纸屑飘落动画特效
h5 canvas飘落纸片动画是一款实现五彩纸屑飘落的背景动画特效,基于canvas绘制的空中飘落的纸屑片动画特效,适用于网页动态背景效果代码。简单使用,欢迎下载!代码适用浏览器:搜狗、360、FireFox(建议)、Chrome、Safari、Opera、傲游、世界之窗,是一款不错的的特效插件,希望大家喜欢!
91 5
|
6月前
|
前端开发
基于canvas实现的彩色纸屑组成文字3d动画HTML源码
基于canvas实现的彩色纸屑组成文字3d动画HTML源码
64 0
基于canvas实现的彩色纸屑组成文字3d动画HTML源码
|
6月前
|
移动开发 前端开发 HTML5
HTML5 Canvas制作的粒子十秒倒计时源码
一段基于HTML5 Canvas制作的粒子爆炸,十秒数字倒计时,全屏倒计时动画效果,给人一种非常大气的视觉感
82 0
HTML5 Canvas制作的粒子十秒倒计时源码
|
6月前
|
前端开发 JavaScript
Canvas三维变化背景动画HTML源码
Canvas三维变化背景动画HTML源码
68 5
|
8月前
|
移动开发 前端开发 数据挖掘
用HTML5中的 画布(Canvas)在“圳品”信息系统网页上绘制显示饼图
用HTML5中的 画布(Canvas)在“圳品”信息系统网页上绘制显示饼图