1.html5开发前准备。
为什么学习html5
新的web时代到来;
跨平台运行;
硬件要求低;
flash之外的选择(代替flash);
软硬件环境
硬件:双核,2g内存;
软件:window,linux,mac
介绍html5
html:是用来描述的网页的一种语言;指超文本标记语言;不是编程语言,是一种标记语言。
html5新特性:
用于绘画的canvas标签;
用于媒介回放的video和audio的元素;
对本地的离线储存的刚好支持;
新的特殊内容元素eg:article,footer,header,nav,section
新的表单的控件eg:calender,date,time,email,url,search
浏览器的支持:Safari,Chrome,Firefox以及Opera,>=IE9
环境搭建
开发工具:
常用:WebStorm、notepad++、Eclipse、text sublime、 dreamweaver
推荐:Intellij IDEA
常见问题解决
1.寻求问题的根源;
2.查看参考文档;w3c
3.参考示例;
4.常见问题通过搜索引擎搜索
5.问题反馈。
掌握技能需求
1.需要掌握的技能:
html5;xhtml;css3;Js;Jquery:Jquery-ui;Jquery-mobile;
快捷键:
IDEA->file->settings->KeyMap->选择Eclipse模式的快捷键。
2.html5特性简介;
html版本:
html->html+->html2.0->html3.2->html4.01->xhtml 1.0->html5(2012年)->xhtml5(2013);
3.html学习
html5基础:
声明:<!DOCTYPE html>
<html class="no-js" lang="en">
<html lang="en">代表这是英文的网站。
字符集声明(<meta charset="utf-8">):
兼容模式的元标签(<meta http-equiv="x-ua-compatible" content="ie=edge">):
移动端视图<meta name="viewport" content="width=device-width, initial-scale=1">
标签部分1:
a.html基础标签:head、body
b.html标题:<h1>...<h6>
c.html段落:<p>
d.html的链接:<a>
href:代表另一个文档的链接
name:代表文档内的链接
<a href="url网址" >click me</a>
<a href="url网址" ><img src=""></a>
<a href="#tips">click me to name='tips'</a>
<br><br>
<a name=tips ></a>
e.html图像:<img>
src:“***.png”
alt=”defaultlogo“
width:
height:
标签部分2:
表单:
<form> --表单
新的 form 属性:
autocomplete
novalidate
<input> --输入域
<input type="email">
<input type="url">
<input type="number">
<input type="text">
<input type="password">
<input type="range">
<input type="Date">
<input type="month">
<input type="week">
<input type="time">
<input type="datetime">
<input type="datetime-local">
<input type="search">
<input type="color">
新的 input 属性:
autocomplete
autofocus
form
form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)
height 和 width
list
min, max 和 step
multiple
pattern (regexp)
placeholder
required
<textarea> --文本域
<label> --控制标签
<fieldset> --定义域
<legend> --域的标题
<select> --选择列表
<optgroup> --选项组
<option> --下拉列表中的选项
<button> --按钮
<form action="" method="get" autocomplete="on">
<label >username</label>
<input type="text" title="username" placeholder="username" pattern="[A-z]{3}" >
<label>password</label>
<input type="password">
<label>apple</label><input type="checkbox" checked="checked">
<label>apple2</label><input type="checkbox" checked="checked">
<label>apple1</label><input type="checkbox" checked="checked">
<labe>sex</labe>
<input type="radio" name="sex"><input type="radio" name="sex" checked="checked" >
<textarea cols="2" rows="3"></textarea>
<input type="button" value="button" οnclick="btn()">
<input type="submit" value="submit">
<select>
<optgroup label="oppt">
<option>d</option>
</optgroup>
<optgroup label="opt2">
<option>3</option>
</optgroup>
</select>
<input type="email">
<input type="url">
<input type="number">
<input type="text">
<input type="password">
<input type="range" name="points" min="1" max="10" step="2"/>
<input type="Date" id="date">
<input type="month" id="month">
<input type="week" id="week">
<input type="time">
<input type="datetime">
<input type="datetime-local">
<input type="search" id="search">
<input type="color" id="color">
</form>
<script type="text/javascript">
function btn(){
alert("");
console.log(document.getElementById("date").value);
console.log(document.getElementById("month").value);
console.log(document.getElementById("week").value);
console.log(document.getElementById("search").value);
console.log(document.getElementById("color").value);
/* 2016-05-11
2016-05
2016-W19
dd
#80ff00*/
}
</script>
标签部分3:
样式:
标签:1.<style>:样式定义
2.<link>.资源引用
属性:rel=“stylesheet":外部样式表声明
type=“text/css”:引入文档类型
插入方式:
外部样式表:
<link rel="stylesheet" type="text/css" href="....css">
内部样式表;
<style type="text/css">
.p{
}
</style>
内联样式表:
<p style="padding:0px">
标签部分4:
表格:
种类:
没有边框的表格
表格中的表头:th
空单元格:
带有标题的表格:caption
表格内的标签:
跨行,跨列的表格:colpsan=”“ rowspan=”“
单元格填充:cellpadding:
单元格间距:cellaspacing:
想表格添加背景和背景图像:bgcolor ;background
单元中内容排列格式 align
框架属性:frame="box";frame="above";frame="below";frame="hsides";rame="vsides":
标签部分5:
框架:
frame,frameset,noresize,cols,rows,
现在都用它的iframe框架:
背景:
Background,bgcolor
实体:> , < ,<,>, ,&
标签部分6:
列表:
ul------无序列表 li
属性:disc,circle,quare,
ol------有序列表 li
属性:A,a,I,i,start
dl------自定义列表 dt dd
li------列表
dt------列表项
dd------描述
标签部分7:
块元素:eg:div,h1,内联元素:span
标签部分8:
布局:table布局和div布局
标签部分9:
音频、视频
1.audio(音频),video(视频)
html5提供了播放音频,视频文件的标准
2.control(控制器)
control属性供添加播放、暂停和音量控件
3.<audio> 定义声音
<source>规定多媒体资源、可以是多个。
4.属性:width,height。
标签部分10:
拖放、拖放本地数据。
1.html5拖放:
拖放(Drag和drop)是html5标准的组成部分。
2.拖动开始:
ondragstart:调用了一个函数,drag(event),它规定了被拖动的数据。
3.设置拖动数据
setData():设置被拖数据的数据类型和值 e.dataTransfer.setData("","")
4.放入位置;
ondragover:事件规定在何处放置被拖动的数据。
5.放置:
ondrop:当放置被拖数据时,会发生drop事件。e.dataTransfer.getData("")
var imgContainer;
window.οnlοad=function(){
imgContainer=document.getElementById('imgContainer');
imgContainer.οndragοver=function(e){
e.preventDefault();
}
imgContainer.οndrοp=function(e){
e.preventDefault();
var f=e.dataTransfer.files[0];
var filereader=new FileReader();
filereader.οnlοad=function (e) {
imgContainer.innerHTML="<img src="+filereader.result+">"
}
filereader.readAsDataURL(f);
}
}
var boxDiv;
var box1Div;
var msgDiv;
var imgObj;
window.onload = function () {
boxDiv = document.getElementById("box");
msgDiv = document.getElementById("msg");
box1Div = document.getElementById("box1");
imgObj = document.getElementById("img1");
/* boxDiv.ondragenter = function (e) {
showObj(e);
}*/
/* imgObj=document.getElementById("imgId")*/
box1Div.οndragοver=function (e) {
e.preventDefault();
}
boxDiv.οndragοver=function(e){
e.preventDefault();
}
imgObj.οndragstart=function(e){
e.dataTransfer.setData("imgId","img1");
}
box1Div.οndrοp=dropImgHandler;
boxDiv.οndrοp=dropImgHandler;
}
function dropImgHandler(e){
e.preventDefault();
var img=document.getElementById(e.dataTransfer.getData("imgId"));
e.target.appendChild(img);
}
function showObj(obj) {
var s = "";
for (var k in obj) {
s += k + ":" + obj[k] + "<br>"
}
msgDiv.innerHTML = s;
}
标签部分11:
canvas标签;
canvas用于图形绘制,通过脚本(eg:js)来完成<canvas>标签只是图形容器,我们必须用脚本来绘制图形。
context重新定义:
他不是简单的上下文,context封装了很多绘图功能的对象,获取对象的方式是:
var context=canvas.getContext("2d");
1.canvas元素绘制图像有两种方法:
a.context.fill();//填充
b.context.stroke();//绘制边框
2.style:在进行图形绘制前,要设置好绘图的样式;
记住:绘制图形前需要先填充样式。
context.fillStyle//填充样式
默认是:fillStyle=black
context.strokeStyle//边框样式
默认是:strokeStyle=black
context.lineWidth///图形边框宽度
颜色表示方式:
fillStyle
strokeStyle
a.red,green,blue;
b.#eeefd8;
c.rgb(2,233,252)
d.rgba(23,32,22,透明度)
阴影:
ctx.shadowBlur=20;
ctx.shadowColor="black";
shadowColor:设置或返回用于阴影的颜色,
shodowBlur:设置或返回用于阴影的模糊级别
shadowOffsetX:设置或返回与形状的水平距离
shadowOffsetY:设置或返回与姓张的垂直距离
方法:
createLinearGradient()创建线性渐变(用在画布内容上)。
createPattern()在指定方向上重复指定的元素。
createRaiialGradient()创建放射状/环状的渐变(用在画布内容上)
addColorStop()规定渐变对象中颜色和停止位置。
线条样式:
lineCap:设置或返回线条的结束端点样式
lineJoin:设置或返回两线条相交是,所创建的拐角类型
lineWidth:设置或返回当前的线条宽度
miterLimit:设置或返回最大斜度接长度
矩形:
rect():创建矩形
fillRect();绘制一个填充矩形
srokeRect();绘制矩形无填充
clearRect();清除矩形内像素
路径:
fill();填充当前绘图
stroke();绘制已定义的路径
bgeinBath();起始一条路径,或充值当前路径
moveTo();把路径移动到画布中的指定点,不创建线条。
clostPath();创建从当前当前点回到起始点的路径
lineTo();添加一个新点,然后在画布中创建从该点到最后指定点线条
clip();从原始画布剪切任意形状和尺寸的区域
guadraticCurveTo();创建二次贝塞尔曲线
bezierCurveTo();创建三次方贝塞尔曲线
arc();创建弧/曲线(用于创建圆形或部分圆
arcTo();创建两切线之间的弧/曲线
isPointInPath();如果指定的点位于当前路径中,则返回 true,否则返回 false
转换
scale();缩放当前绘图至更大或更小
rotate();旋转当前绘图
translate();重新映射画布上的 (0,0) 位置
tarnsform();替换绘图的当前转换矩阵
setTransform();将当前转换重置为单位矩阵。然后运行 transform()
文本:
font:设置或返回文本内容的当前字体属性
textAlign:设置或返回文本内容的当前对齐方式
textBaseline:设置或返回在绘制文本时使用的当前文本基线
fillText():在画布上绘制“被填充的”文本
strokeText():在画布上绘制文本(无填充)
measureText():返回包含指定文本宽度的对象
图像绘制:
方法:drawImage();向画布上绘制图像、画布或视频
属性:width,返回 ImageData 对象的宽度
height,返回 ImageData 对象的高度
data,返回一个对象,其包含指定的 ImageData 对象的图像数据
createImageData() 创建新的、空白的 ImageData 对象
getImageData() 返回 ImageData 对象,该对象为画布上指定的矩形复制像素数据
putImageData() 把图像数据(从指定的 ImageData 对象)放回画布上
合成:globalAlpha, 设置或返回绘图的当前 alpha 或透明值
globalCompositeOperation 设置或返回新图像如何绘制到已有的图像上
其他:save();保存当前环境的状态
restore();返回之前保存过的路径状态信息。
createEvent();
getContext();
toDataURL();
3.绘制矩形
context.fillRect(x,y,width,height);填充
context.strokeRect(x,y.width,height);边框
context.clearRect(x,y,widhth,height);清除
4.绘制圆弧
context.arc(x,y,radius,starAngle,endAngle,anticlokwise);
x:圆心的x坐标
y:圆心的y坐标
starAngle:开始角度
endAngle:结束角度
anticlockwise:是否逆时针(true)为逆时针,(false)为顺时针。
ps:经过验证,true为顺时针,false为逆时针。
5.绘制扇形代码:
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
context.beginPath();
context.translate(100,100);
context.moveTo(0,0);
context.arc(0,0,50,0,Math.PI*1.5);
context.closePath();
context.fill();
标签部分12:
svg:
标签部分13:
MathML:
mrow
msup
msub
mi
web存储:sessionStorage,声明周期,一次绘画里的。
localStorage, 本地永久的。数据存储非常有用。
两个对象塞值,都是异步的。
web worker:
Worker对象使用。
//安全机制登陆,设定登陆事件,银行系统用到。
var w;
//W用户创建Worker对象,对其进行监听。
function startWorker(){
if(typeof(Worker)!=="undefined"){
if(w)=="undefined"){
w=new Worker("demo.js");
}
w.onmessage=function(event){
document.getElementById("result").innerHTML=event;
}
}
else{
document.getElementById("result").innerHTML="SORRY!";
}
}
function stopWorker()[
w.terminate();
]
demo.js
需要每隔固定的时间想服务器发送数据,然后返回我的程序,得到数据更新。
服务器发送事件:随时获取服务数据的更新。
用到的对象是EventSource对象,
var e=new EventSource("href");
e.onmessage=function(e){}
地理位置:window.navigator.geolocaltion
为什么学习html5
新的web时代到来;
跨平台运行;
硬件要求低;
flash之外的选择(代替flash);
软硬件环境
硬件:双核,2g内存;
软件:window,linux,mac
介绍html5
html:是用来描述的网页的一种语言;指超文本标记语言;不是编程语言,是一种标记语言。
html5新特性:
用于绘画的canvas标签;
用于媒介回放的video和audio的元素;
对本地的离线储存的刚好支持;
新的特殊内容元素eg:article,footer,header,nav,section
新的表单的控件eg:calender,date,time,email,url,search
浏览器的支持:Safari,Chrome,Firefox以及Opera,>=IE9
环境搭建
开发工具:
常用:WebStorm、notepad++、Eclipse、text sublime、 dreamweaver
推荐:Intellij IDEA
常见问题解决
1.寻求问题的根源;
2.查看参考文档;w3c
3.参考示例;
4.常见问题通过搜索引擎搜索
5.问题反馈。
掌握技能需求
1.需要掌握的技能:
html5;xhtml;css3;Js;Jquery:Jquery-ui;Jquery-mobile;
快捷键:
IDEA->file->settings->KeyMap->选择Eclipse模式的快捷键。
2.html5特性简介;
html版本:
html->html+->html2.0->html3.2->html4.01->xhtml 1.0->html5(2012年)->xhtml5(2013);
3.html学习
html5基础:
声明:<!DOCTYPE html>
<html class="no-js" lang="en">
<html lang="en">代表这是英文的网站。
字符集声明(<meta charset="utf-8">):
兼容模式的元标签(<meta http-equiv="x-ua-compatible" content="ie=edge">):
移动端视图<meta name="viewport" content="width=device-width, initial-scale=1">
标签部分1:
a.html基础标签:head、body
b.html标题:<h1>...<h6>
c.html段落:<p>
d.html的链接:<a>
href:代表另一个文档的链接
name:代表文档内的链接
<a href="url网址" >click me</a>
<a href="url网址" ><img src=""></a>
<a href="#tips">click me to name='tips'</a>
<br><br>
<a name=tips ></a>
e.html图像:<img>
src:“***.png”
alt=”defaultlogo“
width:
height:
标签部分2:
表单:
<form> --表单
新的 form 属性:
autocomplete
novalidate
<input> --输入域
<input type="email">
<input type="url">
<input type="number">
<input type="text">
<input type="password">
<input type="range">
<input type="Date">
<input type="month">
<input type="week">
<input type="time">
<input type="datetime">
<input type="datetime-local">
<input type="search">
<input type="color">
新的 input 属性:
autocomplete
autofocus
form
form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)
height 和 width
list
min, max 和 step
multiple
pattern (regexp)
placeholder
required
<textarea> --文本域
<label> --控制标签
<fieldset> --定义域
<legend> --域的标题
<select> --选择列表
<optgroup> --选项组
<option> --下拉列表中的选项
<button> --按钮
<form action="" method="get" autocomplete="on">
<label >username</label>
<input type="text" title="username" placeholder="username" pattern="[A-z]{3}" >
<label>password</label>
<input type="password">
<label>apple</label><input type="checkbox" checked="checked">
<label>apple2</label><input type="checkbox" checked="checked">
<label>apple1</label><input type="checkbox" checked="checked">
<labe>sex</labe>
<input type="radio" name="sex"><input type="radio" name="sex" checked="checked" >
<textarea cols="2" rows="3"></textarea>
<input type="button" value="button" οnclick="btn()">
<input type="submit" value="submit">
<select>
<optgroup label="oppt">
<option>d</option>
</optgroup>
<optgroup label="opt2">
<option>3</option>
</optgroup>
</select>
<input type="email">
<input type="url">
<input type="number">
<input type="text">
<input type="password">
<input type="range" name="points" min="1" max="10" step="2"/>
<input type="Date" id="date">
<input type="month" id="month">
<input type="week" id="week">
<input type="time">
<input type="datetime">
<input type="datetime-local">
<input type="search" id="search">
<input type="color" id="color">
</form>
<script type="text/javascript">
function btn(){
alert("");
console.log(document.getElementById("date").value);
console.log(document.getElementById("month").value);
console.log(document.getElementById("week").value);
console.log(document.getElementById("search").value);
console.log(document.getElementById("color").value);
/* 2016-05-11
2016-05
2016-W19
dd
#80ff00*/
}
</script>
标签部分3:
样式:
标签:1.<style>:样式定义
2.<link>.资源引用
属性:rel=“stylesheet":外部样式表声明
type=“text/css”:引入文档类型
插入方式:
外部样式表:
<link rel="stylesheet" type="text/css" href="....css">
内部样式表;
<style type="text/css">
.p{
}
</style>
内联样式表:
<p style="padding:0px">
标签部分4:
表格:
种类:
没有边框的表格
表格中的表头:th
空单元格:
带有标题的表格:caption
表格内的标签:
跨行,跨列的表格:colpsan=”“ rowspan=”“
单元格填充:cellpadding:
单元格间距:cellaspacing:
想表格添加背景和背景图像:bgcolor ;background
单元中内容排列格式 align
框架属性:frame="box";frame="above";frame="below";frame="hsides";rame="vsides":
标签部分5:
框架:
frame,frameset,noresize,cols,rows,
现在都用它的iframe框架:
背景:
Background,bgcolor
实体:> , < ,<,>, ,&
标签部分6:
列表:
ul------无序列表 li
属性:disc,circle,quare,
ol------有序列表 li
属性:A,a,I,i,start
dl------自定义列表 dt dd
li------列表
dt------列表项
dd------描述
标签部分7:
块元素:eg:div,h1,内联元素:span
标签部分8:
布局:table布局和div布局
标签部分9:
音频、视频
1.audio(音频),video(视频)
html5提供了播放音频,视频文件的标准
2.control(控制器)
control属性供添加播放、暂停和音量控件
3.<audio> 定义声音
<source>规定多媒体资源、可以是多个。
4.属性:width,height。
标签部分10:
拖放、拖放本地数据。
1.html5拖放:
拖放(Drag和drop)是html5标准的组成部分。
2.拖动开始:
ondragstart:调用了一个函数,drag(event),它规定了被拖动的数据。
3.设置拖动数据
setData():设置被拖数据的数据类型和值 e.dataTransfer.setData("","")
4.放入位置;
ondragover:事件规定在何处放置被拖动的数据。
5.放置:
ondrop:当放置被拖数据时,会发生drop事件。e.dataTransfer.getData("")
var imgContainer;
window.οnlοad=function(){
imgContainer=document.getElementById('imgContainer');
imgContainer.οndragοver=function(e){
e.preventDefault();
}
imgContainer.οndrοp=function(e){
e.preventDefault();
var f=e.dataTransfer.files[0];
var filereader=new FileReader();
filereader.οnlοad=function (e) {
imgContainer.innerHTML="<img src="+filereader.result+">"
}
filereader.readAsDataURL(f);
}
}
var boxDiv;
var box1Div;
var msgDiv;
var imgObj;
window.onload = function () {
boxDiv = document.getElementById("box");
msgDiv = document.getElementById("msg");
box1Div = document.getElementById("box1");
imgObj = document.getElementById("img1");
/* boxDiv.ondragenter = function (e) {
showObj(e);
}*/
/* imgObj=document.getElementById("imgId")*/
box1Div.οndragοver=function (e) {
e.preventDefault();
}
boxDiv.οndragοver=function(e){
e.preventDefault();
}
imgObj.οndragstart=function(e){
e.dataTransfer.setData("imgId","img1");
}
box1Div.οndrοp=dropImgHandler;
boxDiv.οndrοp=dropImgHandler;
}
function dropImgHandler(e){
e.preventDefault();
var img=document.getElementById(e.dataTransfer.getData("imgId"));
e.target.appendChild(img);
}
function showObj(obj) {
var s = "";
for (var k in obj) {
s += k + ":" + obj[k] + "<br>"
}
msgDiv.innerHTML = s;
}
标签部分11:
canvas标签;
canvas用于图形绘制,通过脚本(eg:js)来完成<canvas>标签只是图形容器,我们必须用脚本来绘制图形。
context重新定义:
他不是简单的上下文,context封装了很多绘图功能的对象,获取对象的方式是:
var context=canvas.getContext("2d");
1.canvas元素绘制图像有两种方法:
a.context.fill();//填充
b.context.stroke();//绘制边框
2.style:在进行图形绘制前,要设置好绘图的样式;
记住:绘制图形前需要先填充样式。
context.fillStyle//填充样式
默认是:fillStyle=black
context.strokeStyle//边框样式
默认是:strokeStyle=black
context.lineWidth///图形边框宽度
颜色表示方式:
fillStyle
strokeStyle
a.red,green,blue;
b.#eeefd8;
c.rgb(2,233,252)
d.rgba(23,32,22,透明度)
阴影:
ctx.shadowBlur=20;
ctx.shadowColor="black";
shadowColor:设置或返回用于阴影的颜色,
shodowBlur:设置或返回用于阴影的模糊级别
shadowOffsetX:设置或返回与形状的水平距离
shadowOffsetY:设置或返回与姓张的垂直距离
方法:
createLinearGradient()创建线性渐变(用在画布内容上)。
createPattern()在指定方向上重复指定的元素。
createRaiialGradient()创建放射状/环状的渐变(用在画布内容上)
addColorStop()规定渐变对象中颜色和停止位置。
线条样式:
lineCap:设置或返回线条的结束端点样式
lineJoin:设置或返回两线条相交是,所创建的拐角类型
lineWidth:设置或返回当前的线条宽度
miterLimit:设置或返回最大斜度接长度
矩形:
rect():创建矩形
fillRect();绘制一个填充矩形
srokeRect();绘制矩形无填充
clearRect();清除矩形内像素
路径:
fill();填充当前绘图
stroke();绘制已定义的路径
bgeinBath();起始一条路径,或充值当前路径
moveTo();把路径移动到画布中的指定点,不创建线条。
clostPath();创建从当前当前点回到起始点的路径
lineTo();添加一个新点,然后在画布中创建从该点到最后指定点线条
clip();从原始画布剪切任意形状和尺寸的区域
guadraticCurveTo();创建二次贝塞尔曲线
bezierCurveTo();创建三次方贝塞尔曲线
arc();创建弧/曲线(用于创建圆形或部分圆
arcTo();创建两切线之间的弧/曲线
isPointInPath();如果指定的点位于当前路径中,则返回 true,否则返回 false
转换
scale();缩放当前绘图至更大或更小
rotate();旋转当前绘图
translate();重新映射画布上的 (0,0) 位置
tarnsform();替换绘图的当前转换矩阵
setTransform();将当前转换重置为单位矩阵。然后运行 transform()
文本:
font:设置或返回文本内容的当前字体属性
textAlign:设置或返回文本内容的当前对齐方式
textBaseline:设置或返回在绘制文本时使用的当前文本基线
fillText():在画布上绘制“被填充的”文本
strokeText():在画布上绘制文本(无填充)
measureText():返回包含指定文本宽度的对象
图像绘制:
方法:drawImage();向画布上绘制图像、画布或视频
属性:width,返回 ImageData 对象的宽度
height,返回 ImageData 对象的高度
data,返回一个对象,其包含指定的 ImageData 对象的图像数据
createImageData() 创建新的、空白的 ImageData 对象
getImageData() 返回 ImageData 对象,该对象为画布上指定的矩形复制像素数据
putImageData() 把图像数据(从指定的 ImageData 对象)放回画布上
合成:globalAlpha, 设置或返回绘图的当前 alpha 或透明值
globalCompositeOperation 设置或返回新图像如何绘制到已有的图像上
其他:save();保存当前环境的状态
restore();返回之前保存过的路径状态信息。
createEvent();
getContext();
toDataURL();
3.绘制矩形
context.fillRect(x,y,width,height);填充
context.strokeRect(x,y.width,height);边框
context.clearRect(x,y,widhth,height);清除
4.绘制圆弧
context.arc(x,y,radius,starAngle,endAngle,anticlokwise);
x:圆心的x坐标
y:圆心的y坐标
starAngle:开始角度
endAngle:结束角度
anticlockwise:是否逆时针(true)为逆时针,(false)为顺时针。
ps:经过验证,true为顺时针,false为逆时针。
5.绘制扇形代码:
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
context.beginPath();
context.translate(100,100);
context.moveTo(0,0);
context.arc(0,0,50,0,Math.PI*1.5);
context.closePath();
context.fill();
标签部分12:
svg:
标签部分13:
MathML:
mrow
msup
msub
mi
web存储:sessionStorage,声明周期,一次绘画里的。
localStorage, 本地永久的。数据存储非常有用。
两个对象塞值,都是异步的。
web worker:
Worker对象使用。
//安全机制登陆,设定登陆事件,银行系统用到。
var w;
//W用户创建Worker对象,对其进行监听。
function startWorker(){
if(typeof(Worker)!=="undefined"){
if(w)=="undefined"){
w=new Worker("demo.js");
}
w.onmessage=function(event){
document.getElementById("result").innerHTML=event;
}
}
else{
document.getElementById("result").innerHTML="SORRY!";
}
}
function stopWorker()[
w.terminate();
]
demo.js
需要每隔固定的时间想服务器发送数据,然后返回我的程序,得到数据更新。
服务器发送事件:随时获取服务数据的更新。
用到的对象是EventSource对象,
var e=new EventSource("href");
e.onmessage=function(e){}
地理位置:window.navigator.geolocaltion