有些时候，我们需要清除部分或者全部的屏幕，类似于j2me的setcilp函数，在htmlcanvas中有两种方法可以清除屏幕，一种是clearRect和整个屏幕宽度高度技巧。不同的是clearRect可以实现部分的屏幕的清除也可以实现清除全屏的方法，而重设屏幕宽高只能清除部分的屏幕。如下代码就把整个圆清除了四分之一的圆：首先画一个整个的圆，然后清除一个正方形。效果如下：如果使用如下语句，就会清除屏幕：context.clearRect(0,0,canvas.width,...
在之前的文章中，提到过一些绘图的状态值，比如线宽，和颜色。在Html5的Canvas中，绘图状态指的就是2d渲染上下文外观的整套属性，包括绘制轮廓颜色，填充颜色，线宽，变换矩阵，裁减区域等。我会在之后的文章中介绍更多的状态值。本篇文章就主要讲解保存状态和恢复状态的例子，讲解这个栈的结构。首先来看下面这个例子： 就是简单的实例一下绘制状态的存取过程，代码如下：...
canvas元素是Html5相对于之前的Html的一个新增特性，本部分的博客文章就将研究这个组件的应用，尤其是在网页游戏开发上的应用。canvas组件和之前的table和p等组件类似，都是不需要任何外部插件就可以运行的。只需使用html并且使用2D渲染上下文API（2Drender context API）类似于我们j2me开发中的Grapics和android中的canvas画笔，只要得到这个上下文就可以调用它自带的方法来绘制。我们可以通过如下的方法定义一个canvas：<canvas ...
上一篇基本的介绍了Html5 canvas的基本概念，对于大多数学习使用过j2me和android的画布进行绘图的程序员来说，理解Html5的Canvas并不是难事。本篇就继续上一篇的内容，讲解绘制直线，圆弧等方法。首先讲解绘制直线，请见如下代码：这里使用了beginPath和closePath这两个方法，分别表示开始路径和结束路径，中间是路径的各个节点，moveTo的参数是起点坐标，lineTo的参数时所画线段的终点。这样我们完成了一段路径，但注意，我们并没...
在html5中，可以实现多种的图形变换包括平移，缩放和旋转。可以通过两种方式，分别是矩阵法和函数法，以下分别介绍平移，缩放和旋转用这两种方法实现。1.平移： context.fillRect(50,50,50,50);context.translate(100,100);context.fillRect(50,50,50,50); 如果没有中间这句你看到的效果会是只有一个矩形，因为第一个矩形和第二个矩形重合了，现在的效果是进行了平移，效果如下：首先，本篇介绍的方法都是状态值，也就是说他的作用...
本篇介绍另外两个绘制的状态值，分别是全局阿尔法值和合成操作，首先来看全局阿拉法值全局阿拉法值很简单，就是我们的argb值里面的“a”值，不同的是全局阿拉法值必须在0.0（全透明）到1.0（全部透明）之间，对应之前提到的“a”值的0到255，默认值是1.0。如下的代码将实现下面的效果：context.fillStyle = "red"; context.save(); context.globalAlpha = 0.5; context.fillRect(50,50,100,100); context.restore(); context.fillR...
通过设置2d渲染上下文的fillStyle和strokeStyle的属性，就可以改变填充颜色或者绘制颜色。分别可以通过以下三种方式来修改颜色：Rgb式：context.fillStyle = rgb(255,0,0);//设置绘制颜色 context.strokeStyle = rgb(255,0,0);//设置绘制颜色十六进制码式：context.fillStyle = #FF0000;//设置绘制颜色 context.strokeStyle = #FF0000;//设置绘制颜色单词式：context.fillStyle = red;//设置绘制颜色 context.strokeStyle = red;//...
本篇继续介绍html5的一些状态值，html5的绘制上下文提供了丰富的效果，本篇介绍阴影的效果，阴影有四个状态值控制，分别是shadowBlur，shadowOffsetX，shadowOffsetY和shadowColor。其中shadowBlur为阴影的像素模糊值，shadowOffsetX和shadowOffsetY为阴影在x轴和y轴上的偏移值，shadowColor为阴影颜色值，其中默认的值是前三个值都为0，最后一个值设置为透明黑色。只需修改其中的两个值就可以显现出来阴影效果，如下面的例子所示，...
本篇继续介绍html5的绘制效果，和之前介绍的不同，本篇介绍的渐变并不是一个状态值，他是之前介绍的fillStyle的一个值。首先来看一个例子：代码如下：var gradient = context.createLinearGradient(50,50,150,150); gradient.addColorStop(0,"rgb(0,0,0)"); gradient.addColorStop(1,"rgb(0,255,0)"); context.fillStyle = gradient; context.fillRect(50,50,100,100);这是一个线性渐变，首先通过createLinearGradient创建线性渐变...
dirname属性input 和 textarea 元素有了一个新元素 dirname，用于用户所设置的提交的方向性的控制(译注，即书写的方向性，ltr或rtl)。<form action="addcomment.cgi" method=post><p><label>Comment: <input type=text name="comment" dirname="comment.dir" required></label></p><p><button name="mode" type=submit value="add">Post Comment</button></p> </form>用户提交的时候，浏览器会接收到3个参数，分别是：comment, com...
contenteditable属性任何元素使用contenteditable属性的话，代表该元素是一个可编辑的区域。用户可以改变元素的内容以及操作标记。例如：<p contenteditable="true">这是一段可编辑的段落。请试着编辑该文本。</p>该属于有3种值可选：true, false和空字符，空字符代表true。而对<iframe id="editor"></iframe>框架页面可以通过JS程序代码来实现：editor.document.designMode="on" 。contextmenu属性contextmenu属性用来指向一个作者...
HTML5介绍HTML5是继HTML4以后的下一代HTML标准规范，它提供了一些新的元素和属性（例如<nav>网站导航块和<footer>）。新型的标签有利于搜索引擎和语义分析，同时更好地帮助小屏幕装置和视障人士使用，除此之外，也提供了一些新的功能，比如视频音频用的<video>和<audio>，总结而言，有如下几大特点：取消了一些HTML4里过时的元素和属性标记其中包括纯粹显示效果的标记，如<font>和<center>，它们已经被CSS取代。HTML5 吸取了XHTML2...
sectionsection元素描绘的是一个文档或者程序里的普通的section节，一般来说一个section包含一个head和一个content内容块。section可以表示成一个小节，或者tab页面里的一个tab下的box块。一个页面里可以拆分成多个section，分别代表introduction, news items和contact information。如果元素的内容集中到一起显示可以表达相应的意思的话，那就可以定义成article元素，而没必要使用section元素。section元素不是一般的容器元素，所...
hgroup<hgroup> 标签用于对网页或区段（section）的标题进行组合。<hgroup><h1>Welcome to my WWF</h1><h2>For a living planet</h2> </hgroup><p>The rest of the content...</p>headerheader元素是一种具有引导和导航作用的辅助元素。通常，header元素可以包含一个区块的标题(如h1至h6，或者hgroup元素标签)，但也可以包含其他内容，例如数据表格、搜索表单或相关的logo图片。我们可以使用该元素来写整个页面的标题部分：<header...
video通过<video>标签，我们可以抛弃最近不怎么讨好的Flash，直接在页面中播放视频文件。视频文件自然是最符合语义化的文件格式，但该元素标签同样支持音频与图片。过去(及目前)，我们通常要使用类似下面这样繁冗丑陋的代码来将视频放置在页面中，但这种方式要求浏览器安装有Flash插件，并支持JavaScript：<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="425" height="344" codebase="http://download.macr...