canvas是HTML6新增的专门用来绘制图形的元素,通过canvas技术,用户可以在web中绘制各种图形。canvas元素它是一块无色透明地区域,它只是一个容器,开发者通过JavaScript脚本可以轻松地在区域上实现任意绘图。
canvas绘制步骤:
1.在html5页面中添加canvas元素,定义id属性值以便接下来调用
2.使用id寻找页面中的canvas元素
var c=document.getElementById(“myCanvas”);
3.通过canvas元素的getContext方法来获取其上下文(Context),即创建Context对象,以获取允许进行绘制的2d环境
var content=c.getContext(“2d”);
4.使用JavaScript脚本来进行绘制
context.fillStyle=’#ff0000’;
context.fillRect(50,25,100,50)
canvas绘制简单图形
beginPath()定义了一个新的路径绘制动作的开始
moveTo() 为指定点创建一个新的子路径 这个点就变成新的上下文点
lineTo() 以上下文为起点 到方法参数中指定的点之间画一条直线
stroke() 为所画的线赋予颜色 并使其可见 如果没有特别指定颜色默认为黑色直线
相关属性:
lineWidth:直线的宽度
strokeStyle:直线的颜色
直线端点样式:HTML5 canvas支持三种直线的端点样式,包括:butt,round,和square。设定端点样式是用lineCap属性设定。缺省情况下,将使用butt样式
线性渐变:
1.create lineargradient()方法创建canvasgradient对象,语法如下:var grad = context.creatlineargradient(x1,y1,x2,y2);其中第一个坐标为渐变的起点,第二个为渐变的终点。
2.使用grab.addcolor(position,color)。
绘制径向渐变:
同样为createradialgradient和和addcolorstop
绘制阴影:
shadwoecolor shadowblur(模糊度) shadowoffsetx 设置或者返回阴影与形状的水平距离
shadowoffsety 设置或者返回阴影与形状的垂直距离
绘制透明度:
globalalpha:属性设置或返回绘图的当前透明值。属性是介于(0-1)。
<pre>
保留文本格式的排版效果
nobr:取消文本换行
code:等宽文字标记
<ruby>
文字
<rt>文字标记</rt>
</ruby>
hspace:图像水平间距
vspace:图像垂直间距
滚动文字
marquee 属性:
direction:up,down,left,right
behavior:scroll循环滚动 slide只滚动一次就停止 alternate来回交替进行滚动
scrollamount=3滚动速度
scrolldelay=1000;滚动时间间隔(毫秒)
loop=10;循环滚动10次
-->添加背景音乐
自动播放
新增表单元素
input输入类型:
email:定义用于email地址的字段
url:定义用于输入URL的字段
number:定义用于输入数字的字段
range:定义用于精确值不重要的输入数字的控件
Data Pickers:data:定义data控件。mouth:定义mouth和year控件(不带时区)。
week:定义week和year控件。time:定义用于输入时间的控件。datetime:定义data和time控件,基于UTC时区。
search:定义用于输入搜索字符串的文本字段
tel:定义用于输入电话号码的字段
color:定义拾色器
autocomplete:规定元素输入字段是否应该启用自动完成功能 例子:弹出先前输过的内容供选择
加个“off”就是关闭
autofocus:规定当页面加载时元素应该自动获得焦点
form:规定元素所属的一个或多个表单 可以放在form标签的外面
formaction:规定党表单提交时处理输入空间的文件的URL
formenctype:规定当表单数据提交到服务器时如何编码
formmethod:定义发送表单数据到action URL的HTTP方法
formnovalidate:formnovaliate属性覆盖元素的novaliate属性
formtarget:规定表示提交表单后在哪里显示接收到响应的名称或关键词
除了formnovalidate属性,其它属性都是只针对type=“submit”和type=“image”
新增的height和width属性:规定元素的高度和宽度(只针对type=“image”)。
list 属性引用元素,其中包含元素的预定义选项
新增的min max和step属性 step:为输入框规定合法的数字间隔
multiple:属性规定允许用户输入到元素的多个值
pattern:规定用于验证元素的值的正则表达式
placecholder:规定可描述输入字段预期值的简短的提示信息
required:规定必须在提交表单的之前输入字段
新增input属性:
autocomplete:自动补全
autofocus:自动获得焦点
form:指明该input所属表单,运用该属性可将input标签放到表单之外
list:datalist
min,max,step:最小值,最大值,数据间隔
multiple:多文件上传和file一起使用
pattern:验证正则表达式pattern=“[A-Za-z]{3}”
placeholder:文本框内的提示信息
required:
formaction:修改form标签内的action属性值
formtype:修改enctype
formmethod:修改提交方式
formnovalidate:不验证表单
formtarget:提交数据后是否开启新的页面
新增的form元素:
datalist:为输入提供一个可选的列表
<input type="text" list="mylist">
<datalist id="mylist">
</datalist>
Keygen:秘钥对生成器(浏览器支持度不高)
output:显示计算结果或脚本输出text
1.新增结构元素
section 定义文档中的节,如章节 页眉 页脚 文档其它部分××××
article 独立 完整的内容块 可独立页面使用
footer 页脚 定义的section*****
header 页眉 导航 LOGO可以是网页其他位置*****
nav 标签代表页面的一个部分 导航连接部分*****
aside 非正文 单独部分可删除 辅助内容 侧边栏****
hgroup 对网页或区段section的标题元素(h1–h6)进行组合****
figure 元素的组合 多用于图片与图片描述的组合*****
Div+CSS的布局方式
<div id="结构元素名称"> 容器
<header>
<nav> 导航
<article> <aside>侧边栏
<section>块
<footer>页脚
常用的语义性元素
mark 定义带有记号的文本
progress 定义运行中的任务进度 (进程)
time 表示时间日期值
details 规定用户可见或者隐藏的需求的补充细节
datallist 定义选项列表 与input元素配合使用,选择框
ruty 定义ruby注释 与和标签配合使用
menu 菜单列表
command 定义用户可调用的命令
废除的元素 能用CSS代替 不支持frame 支持iframe
编解码器:有损压缩
视频编解码器:H.246 VP8 Ogg Theora
音频编解码器:AAC MP3 Ogg Vorbis
HTML5中播放音频:1.audio元素 src属性和controls属性
2.source元素中src和type属性
HTML5中播放视频:1.video元素 src属性和controls属性
2.同音频上
音视频相关方法:
canplaytype()
load()
pause()
play()
HTML5语法变化:
1、标签不区分大小写
2、元素可以省略结束标签
3、允许省略属性的属性值
4、允许属性不使用引号
CSS3边框总结
border-image:url(.jpg) 30px round;
30px:上右下左30px
round平铺
border-image-repeat 图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。
背景属性
background-origin:padding-box|border-box|content-box
padding-box:背景图像填充框的相对位置
border-box:背景图像边界框的相对位置
content-box:背景图像的相对位置的内容框
background-clip:padding-box|border-box|content-box
padding-box:默认值。从边框区域向外裁剪背景
border-box:从补白区域向外裁剪背景
content-box:从内容区域向外裁剪背景
text-shadow—>与box-shadow用法相似
text-overflow:用来定义省略文本的处理方式
clip:修剪文本
ellipsis:显示省略号来代表被修剪的文本
String
word-wrap:normal|break-work
break-work:在长单词或url地址内部进行换行
@font-face{
font-family:;
src:url(sansation_bold.ttf);
font-weight:;
}