HTML5教程:HTML5的基础写法对比一下XHTML 1.0 Transitional的规范，html5基本上没有XHTML 1.0 Transitional严格的要求，并且简化了很多东西。?文档声明更简单了。1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <!--在HTML5中，这样写：--> 3 <!DOCTYPE html>?html标签上不需要声明命名空间。1 <html xmlns="http://www.w3.org/1999/xhtml">...
本篇文章是一个由四个部分构成的系列的第三部分，该文章系列旨在寻找并突出说明HTML5中的变化。其开始先介绍新的标签和页面的组织，接着提供一些网页设计方面的高层面信息，然后是表单的创建，以及API的使用及其价值所在，最后是Canvas提供的一些颇具创意的可能做法。这一第三部分介绍了HTML5的API，使用一个例子页面来说明它们的功能。 那么，什么是API呢？ 应用编程接口（application program interface，API）是访问一个软件应...
本篇将以零基础的视点，来讲解如何开发一款RPG游戏。在游戏的世界里，我们可以看到各种地图，各种游戏人物，看到人物在地图上行走，对话等，无论是地图还是人物，其实都是图片的处理与显示，把不同的图片显示到屏幕上，我们就看到不同的游戏界面，要想让这些图片同时显示到界面上，我们就需要处理好层次，让他们来分层显示，我们可以想象，如果游戏人物显示在地图的下层的话，显然会被地图遮挡住。 一款RPG游戏，我简单把它分为地图...
jQuery中的选择器selecor是大家经常使用的强大功能，事实上jQuery提供给我们非常丰富的手段来使用选择器定位DOM元素。 下面先简单介绍一下用法选择器 实例 选取* $("*") 所有元素#id $("#lastname") id="lastname" 的元素.class $(".intro") 所有 class="intro" 的元素element $("p") ...
上一篇中，已经详细讲解了，如何添加地图，以及添加了一个游戏人物，现在我们来添加控制事件，让这个小英雄走动起来了解上一篇内容请看这里html5游戏开发-零基础开发RPG游戏-开源讲座(一)http://www.html5cn.org/article-1737-1.html我们已经给游戏人物建立了一个Character类，现在先来在类里加入 Character.prototype.changeDir = function (dir){ }; /*** 设定人物坐标* @param x方向坐标，y方向坐标 **/ Character.prototype.se...
本人之前做as的，对html真的是0基础，都是这几天自己摸索的，所以肯定有很多考虑不到，或说的不对的地方。欢迎拍砖 html5离不开js编程，而进行js编程就不得不说Jquery，那么什么是Jquery呢？为什么要用Jquery呢？下面简单介绍一下普通JavaScript的缺点：每种控件的操作方式不统一，不同浏览器下有区别，要编写跨浏览器的程序非常麻烦。因此出现了很多对JavaScript的封装库，比如Prototype、Dojo、ExtJS、JQuery等，这些库对JavaScr...
HTML5规范引进了很多新特性，其中最令人期待的之一就是Canvas元素。HTML5 Canvas提供了通过JavaScript绘制图形的方法，此方法使用简单但功能强大。每一个Canvas元素都有一个“上下文(context)” (想象成绘图板上的一页)，在其中可以绘制任意图形。浏览器支持多个Canvas上下文，并通过不同的API提供图形绘制功能。大部分的浏览器都支持2D Canvas上下文——包括Opera，Firefox，Konqueror和Safari。而且某些版本的Opera还支持3D Canv...
了解上两篇的内容请点击：html5游戏开发-零基础开发RPG游戏-开源讲座(一)http://www.html5cn.org/article-1737-1.htmlhtml5游戏开发-零基础开发RPG游戏-开源讲座(二)-跑起来吧英雄http://www.html5cn.org/article-1738-1.html前两篇，RPG的开发已经实现了添加地图和添加游戏人物，本篇来实现地图的卷轴滚动和人物对话的实现，效果如下本次开发，更新了一下库件至1.3，请点击下面的链接，下载库件1.3版以上版本http://code.google.c...
绘制文本 在HTML5中，我们还可以在Canvas「画布」上绘制我们所需的文本文字，其中所涉及到的CanvasRenderingContext2D对象的主要属性和方法如下： 属性或方法基本描述font设置绘制文字所使用的字体，例如20px 宋体，默认值为10px sans-serif。该属性的用法与css font属性一致，例如italic bold 14px/30px Arial,宋体fillStyle用于设置画笔填充路径内部的颜色、渐变和模式。该属性的值可以是一个表示CSS颜色值的字符串。如果你的绘制...
一、坐标系 其实只要玩过一点点图形编程的人都知道，电脑上的坐标系和数学上的坐标系稍微有点不同，坐标的原点在绘制区域（这里是Canvas）的左上角，X轴正向朝右，Y轴正向朝下，如下图声明：为本文为原创文章，作者保留所有权利！欢迎转载，转载请注明作者左洸和出处博客园二、Stroke 和 Fill HTML5中将图形分为两大类： 第一类称作 Stroke，我的理解就是轮廓、勾勒或者线条，总之，图形是由线条组成的； 第二类称作 Fill，就是填...
HTML5的一些新增属性和功能是让代码变得更简洁，这总归是一件好事，应该值得我们推崇，希望这篇HTML5的文章对你有一些帮助1. 新的Doctype声明 XHTML的声明太长了，我相信很少会有前端开发人员能手写出这个Doctype声明。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">HTML5的Doctype声明很短，看到这个声明相信你马上就能记住，不用浪费脑细胞去记那...
1、 声明的变化 2、 指定字符编码的变化，html5中建议使用utf-8 3、 Html5中允许没有结束符，不算错误 4、 不允许写结束标记的有：area、base、br、col、command、embed、hr、img、input、keygen、link、meta、param、source、track、wbr 5、 可以省略结束标记的元素有：li、dt、dd、p、rt、rp、optgroup、option、colgroup、thead、tbody、tfoot、tr、td、th 6、 可以省略全部标记的元素有：html、head、body、colgroup、tb...
百度百科：SVG可缩放矢量图形（Scalable Vector Graphics）是基于可扩展标记语言（XML），用于描述二维矢量图形的一种图形格式。SVG是W3C制定的一种新的二维矢量图形格式，也是规范中的网络矢量图形标准。SVG严格遵从XML语法，并用文本格式的描述性语言来描述图像内容，因此是一种和图像分辨率无关的矢量图形格式。 什么是SVG？SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用来定义用于网络的基于矢量的图形 SVG 使...
现把canvas的知识点总结如下，以便随时查阅。 1、填充矩形 fillRect(x,y,width,height); 2、绘制矩形边框 strokeRect(x,y,width,height); 3、擦除矩形 clearRect(x,y,width,height); 4、填充样式 fillStyle="red"; 样式可以为颜色、渐变和图像。 5、描边样式 strokeStyle="red"; 6、描边线条的宽度 lineWidth=4; 7、线条末端形状 lineCap="butt"; butt(对接)/round(圆)/square(方)，默认情况下是butt; 8、线条相交样式 lineJoin="m...
基本绘制XML/HTML Code复制内容到剪贴板var canvas = document.getElementById('canvas'); if (canvas.getContext) { var context = canvas.getContext('2d'); // 线宽 context.lineWidth = 4; // 画笔颜色 context.strokeStyle = 'red'; // 填充色 context.fillStyle = "red"; // 线帽类型 context.lineCap = 'butt'; // round, square // 开始路径 context...