HTML5之canves绘图

<canvas id="" width="" height=""></canvas>

<canvas>只是一个图像的容器，相当于画布。本身没有绘图能力。所有的绘制工作必须在JS中完成。

<script>

// 找到定义的canvas元素。

var c=document.getElementById("ID");

//创建 context对象

//getContext("2d") 对象是内建的

//HTML5对象

//拥有多种绘制路径。

var ctx=c.getContext("2d");

// fillStyle 属性可以是css颜色，渐变

//或图案。 默认值为黑色。

ctx.fillStyle="#FF0000";

// 定义填充方式

//fillRect( x , y , width , height)

ctx.fillRect(0,0,150,75);

</script>

画线：

moveTo( x ,y ) --定

想读更多 ->

HTML5 全局属性和其他

一、实体

HTML 实体就是将有特殊意义的字符通过实体代码显示出来。

<meta> 元素可以定义文档中的各种元数据，而且一个 HTML 页面可以包含多个 <meta> 元素。

1、指定名 / 值元素句

2、声明字符编码

想读更多 ->

HTML5前景展望

HTML5，被传为Flash 的杀手，是一种用于web 应用程序开发、具有变革意义的网络技术。HTML 5提供了一些新的元素和属性，其中有些是技术上类似<div>和<span>标签，但有一定含义，例如<nav>和<footer>。这种标签将有利于搜索引擎的索引整理、小屏幕设备和视障人士使用。同时为其他浏览要素提供了新的功能，通过一个标准接口，如<audio>和<video>标记。

除了原先的DOM接口，HTML5增加了更多样化的API：

实时二维绘图

Canvas API：有关动态产出与渲染图形、图表、图像和动画的API。

定时媒体播放

HTML5 音频与视频：HTML5里新增的元素，它们为开发者提供了一套通用的、集成的、脚本式的处理音频与视频的API，而无需安装任何插件。

离线存储数据库（离线网络应用程序）

编辑

拖放

跨文档通信

通信／网络

想读更多 ->

HTML5 游戏开发基础的教程

在游戏的视觉效果定义其整体外观、感觉和游戏玩法本身。玩家被好的视觉体验所吸引，从而可达到产生更多的流量。这是创建成功的游戏和为玩家提供很多乐趣的关键。

在这篇文章中，我们基于 HTML5 游戏的不同视觉效果实现，提出几个构思方案。这些示例将依据我们自己的游戏《Skytte 》所实现的效果。我会解释支持他们的基本思想, ，并提供应用于我们项目中的效果。

你会学到什么

在我们开始之前, 我想列出一些我希望你能从本文中学习的知识:

基本的游戏设计

我们来看看通常用于制造游戏和游戏效果的模式: 游戏循环、精灵、碰撞和粒子系统。

视觉效果的基本实现

我们还将探讨支持这些模式的理论和一些代码示例。

常见的模式

让我们从游戏开发中常用的大一些模式和元素开始

精灵

这些只是在游戏中代表一个对象的二维图像。精灵可以用于静态对象, 也可以用于动画对象, 当每个精灵代表一个帧序列动画。它们也可用于制作用户界面元素。

通常游戏包含从几十到几百精灵图片。为了减少内存的使用和处理这些映像所需的能力, 许多游戏使用精灵表。

精灵表

这些都用来在一个图像中合成一套单个精灵。这减少了在游戏中文件的数量，从而减少内存和处理电源使用。精灵表包含许多

想读更多 ->

HTML5的本地存储

phill

Web Storage和本地数据库是HTML5本地存储中两个重要的内容。Web Storage包含sessionStorage和localStorage，是对HTML4中cookie机制的改良；本地数据库是HTML5新增的功能，它可以在本地建立一个数据库，这样原来需要在服务器端存储的数据，就可以存储在本地，大大减轻了服务器的压力，我们可以使用SQLLite和IndexedDB两种方式完成本地数据库的存储，本篇文章只介绍SQLLite。

Web Storage

1.概念：

usessionStorage

将数据保存在session对象中，一旦关闭浏览器，该对象自动销毁，保存的数据也将随之清除。

ulocalStorage

将数据保存在本地硬件中，故而当浏览器关闭，所保存的数据不会被清除。

2.用法：

两者在用法和使用上差不多，如下：

想读更多 ->

html5的一些基础

H5

一、html新增标签

1)header -------头部引导或导航的部分

2)Nav ----------导航部分，一般可以嵌套在header里面

3)Section ---------代表一个独立区块，包括内容和标题

4)Article ----------特殊的section ，一般放置文章或标题

5)Aside ---------页面补充说明的区块

6)Footer --------脚部版权说明的区块

注意点：虽然标签很语义化，但是目前只能兼容IE9+

二、添加对flash的替换

.swf（flash的格式）

对视频的标签

Video支持的mp4格式,ogg,webM

属性：autoplay: 页面加载进来就开始播放

Src 视屏文件的路径

Controls 是否显示播放器的控件（播放，暂停，快进，全屏，音量）

Preload 预加载

Poster 视频播放前的海报

在h5之前视频是如何播放的（网页中是如何插入视频）

<embed>

<iframe>

音频的标签

Audio

想读更多 ->

HTML5 是什么鬼？

当我还在南方小岛上玩儿的时候，一个朋友给我发了条语音信息（早上发的，我晚上才听，我让你发语音）大概是说，能不能帮忙联系一个会 HTML5 的团队，领导要求做一个 HTML5 的活动页面。

看来 HTML5 的浪潮又要让我们的广告客户浑身湿透了。他们想要华丽的页面，想要让用户觉得他们很酷。事实上，即使他们只做了一张很廉价的“活动邀请函”页面，用户也觉得好棒好厉害。真相是，大部分用户并不知道其中的奥秘。

HTML5是针对超文本语言HTML的第五次修订。具体HTML是什么？我们先笼统地认为它是一种用来创建网页的手段就好。不过你不是科技从业者，也不是什么都要懂一点的极客。你会想：什么html、Input type=date、js线程、socket、标准扩展embed、css3……这些都是什么鬼我根本不想

想读更多 ->

HTML5开发培训知识点

近几年来，HTML5移动开发技术如此火爆，学习HTML5开发技术的人员也是越来越多。那么我们在培训学习HTML5技术时，应该了解哪些呢?今天华清远见HTML5培训专家就来为大家指点迷津。

首先，明确HTML5是什么?

HTML5是HTML经过第五次重大修改，用于取代1999年所制定的HTML4.01和XHTML1.0标准的HTML标准版本。HTML5的具体定义为：“万维网的核心语言，标准通用标记语言下的一个应用超文本标记语言的第五次重大修改。”

其次，明确HTML5技术特点

NO1.语义特性

HTML5赋予网页更好的意义和结构，更加丰富的标签将随着对RDFa的，微数据与微格式等方面的支持，构建对程序、对用户都更有价值的数据驱动的Web。

NO2.本地存储特性

基于HTML5开发的网页app拥有更短的启动时间，更快的联网速度，这些全得益于HTML5 app Cache，以及本地存储功能。

NO3.设备兼容特性

从Geolocation功能的API文档公开以来，HTML5为网页应用开发者们提供了更多功能上的优化选择，带来了更多体验功能的优势。HTML5提供了前所未有的数据与应用接入开放接口。使外部应用可以直接与浏览器内部的数据直接相连，例如视频影音可直接与microphon

想读更多 ->

HTML5培训哪个好？千锋长沙校区怎么样？

很多人都听别人说过做程序员搞IT有多累，但是进入到这个行业的从业人员却是越来越多，高薪的诱惑这是最主要的原因，但是学了编程可不一定就能拿到高薪，行业内人员水平的参差不齐现象也是越来越严重，很多人为了省钱选择自学，真的能学到东西吗？能通过企业的面试吗？这些都是每个人都应该考虑的问题！千锋长沙和大家分析一下在培训班学习的几点优势:

第一、可以系统的学习。别小看了这一个步骤，好多的初学者的时间都浪费在了这里,不用费心到网上去寻找和下载资料是多么幸福的一件事情,就像千锋长沙校区培训的课程都是—套完整的HTML5前端开发培训课程。

第二、遇到问题可以及时达到解答。不用到网上去搜索寻找答案,在培训班有老师和同学,可以帮忙解答,但是自学的能力还是需要培养的,在公司工作以后,遇到疑难问题和新技术的学习都是要靠自己的。

想读更多 ->

挚爱HTML5 7款华丽的HTML5应用和游戏引擎，有你中意的么

新的一周开始了，小编继续为大家分享一些不错的HTML5应用，也感谢各位前端爱好者这么久的支持。今天我们要分享7款华丽的HTML5/CSS3应用，这些HTML5应用都是最新收集的，欢迎各位收藏。

1、Construct 2

Construct 2是一个运行于Windows平台的游戏制作工具，它可以让没有任何编程基础的用户在短时间内不写一行代码快速开发出一款可运行于所有平台（Windows、Mac、Linux、Android、iOS等）的游戏。免费版可以将游戏导出成HTML5。收费版本分为个人版（79英镑）和企业版（259英镑），可以导出所有平台的版本，同时提供了更多的特效和音乐。如果使用该工具盈利超过5000美元，需要升级到企业版。

加群623966806免费领取前端学习资料，群里还有大神解答问题和交流

特点：

简单直观，入门容易，无需编程也能做游戏，长处是开发射击及动作类的平面

想读更多 ->