一 html5 Canvas转换

Canvas元素可以被转换

例如,在坐标(20,40)的画布上写入文本

ctx.font="bold 20px Arial";

ctx.textAlign="Hello World";

ctx.fillText("Hello World",20,40);

translate(x,y)方法用于移动canvas.

x表示水平移动网格的距离,y表示垂直移动网格的距离

ctx.translate(100,500);

ctx.fillText("after translate",20,40)

在此例子中,画布向右移动100像素,向下移动500像素

rotate()方法用于旋转html5画布

下面是设置旋转之前和之后绘制相同矩形的例子:

ctx.fillStyle="#FF0000";

ctx.fillRect(10,10,100,100);

ctx.rotate((Math.PI/180)*25); //rotate 25 degree

ctx.fillStyle="#0000FF";

ctx.fillRect(10,10,100,100);

scale()方法缩放当前绘图至更大或更小.

注意:如果你对绘画进行缩放,所有之后的绘图也会被缩放.定位也会被缩放.如果你设置scale(2,2)那么绘图将定位于距离画布左上角两倍远的位置

实例

绘制一个矩形;放大到2倍,再次绘制矩形;放大到2倍,再次绘制矩形;放大到2倍,再次绘制矩形

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

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

ctx.strokeRect(5,5,25,15);

ctx.scale(2,2);

ctx.stokeRect(5,5,25,15);

ctx.scale(2,2);

ctx.strokeRect(5,5,25,15);

ctx.scale(2,2);

ctx.strokeRect(5,5,25,15);

二 html5表单一

html5位web表单创建带来了很多新特性,添加了多个新属性和输入类型,这些新特性提供了更好的输入控制和验证

html5中的表单创建方式与html一样:

<form>

<input type="text" name="username" />

</form>

placeholder属性

html5添加了一个名为placeholder的新属性.在<input>和<textarea>元素上,此属性提供一种提示,描述输入域所期待的值

简短的提示在用户输入值前,会显示在输入域上

实例

<form>

<input type="text" name="fname" placeholder="First name" />

<input type="text" name="lname" placeholder="Last name" />

<input type="submit" value="提交吧,骚年" />

</form>

运行效果如下:

autofocus属性

当表autofocus属性规定在页面加载时,域自动地获得焦点

实例

让"First name"input输入域在页面载入时自动聚焦:

<form>

First name: <input type="text" name="fname" autofocus ><br/>

Last name:<input type="text" name"lname"><br/>

<input type="submit">

</form>

运行效果如下:

required属性规定必须在提交之前填写输入域(不能为空)

实例

不能为空的input字段:

<form autocomplete="off">

Username:<input type="text" name="username" required />

<input type="submit" />

</form>

运行效果如下:

三 html5 表单2

新的搜索输入类型可用于创建搜索框

<input type="search" name="searchitem" />

<datalist>元素规定输入域的选项列表

<datalist>属性规定form或input域应该拥有自动完成功能.当用户在自动完成域中开始输入时,浏览器应该在该域中显示填写的选项

实例

<input>元素使用<datalist>预定义值

<input list="browsers" />

<datalist id="browsers">

<option value="Internet Exporer">

<option value="Firefox">

<option value="Chrome">

<option value="Opera">

<option value="Safari">

</datalist>

运行效果如下:

html5拥有多个新的输入类型,包括email,tel,url,data,time等

下面是一个例子:

<form>

<input type="email" name="email" placeholder="example@example.com" />

<br/>

<input type="tel" name="usrtel" placeholder="666.666.666" />

<br/>

<input type="url" name="homepage" placeholder="example.com" />

</form>

运行效果如下:

后面的文章还会继续完善html!