canvas:
//简而言之,canvas就是像是画面上的一个遮罩层,画布,我们可以在canvas画布上做样式
-
canvas标签的宽高属性不要在css中设置
-
canvas=document.querySelector(“canvas”);
ctx=canvas.getContext(“2d”);
-
矩形:绘制矩形:ctx.fillRect(10,10,55,50) //参数解释,前两个参数是画布中的位置,后两个参数是所创建矩形的宽高
填充矩形(颜色): ctx.fillStyle=“rgb(200,0,0);”
绘制矩形边框:ctx.strokeRect(50,50,100,100)
清除矩形区域:ctx.clearRext(x,y,width,height)
-
笔触颜色(边框):strokeStyle="#000000";
笔触粗细:ctx.lineWidth=5;
创建笔触框:ctx.strokeRect(50,50,100,100)
填充色:同上改颜色,fillStyle="#000000"
透明度:globalAlpha=0.5
-
createLinearGradient(x1,y1,x2,y2);//返回一个canvasGradient对象,线性渐变 var file=ctx.createLinearGradient(0,0,200,200); file.addColorStop(0,"red"); file.addColorStop(1,"#FFFFFF")// 第一个参数不能超过1 ctx.fillStyle=file; ctx.fillRect(0,0,200,200)
-
createRadialGradient(x1,y1,r1,x2,y2,r2)//此方法要接受六个参数,前三个参数定义一个以(x1,y1)为原点,半径为r1的圆,后三个参数则定义一个以(x2,y2)为原点,半径为r2的圆 var radgrad=ctx.createRadialGradient(45,45,10,52,52,15) radgrad.addColorStop(0,"#A7D30C") radgrad.addColorStop(0.9,"#cccccc") radgrad.addColorStop(1,"#ffffff") ctx.fillStyle="red"; ctx.fillRect(0,0,100,100);
-
图形填充(需要预加载)
createPattern(image,type)//image参数代表图片地址,type参数有:repeat、repeat-x、repeat-y、no-repeat 例: var img=new Image(); img.src="./img/..."; img.addEventListener("load",loadHandler); function loadHandler(e){ var fill=createPattern(img,"no-repeat"); ctx.fillStyle=fill; ctx.fillRect(0,0,200,200); } 阴影: shadowOffsetX //x偏移 shadowOffsetY //y偏移 shadowBlur //模糊 shadowColor //颜色 例: ctx.fillStyle=fill; ctx.shadowOffsetX=2; ctx.shadowOffsetY=2; ctx.shadowBlur=10; ctx.shadowColor="#999999"
-
笔触:
-
ctx.lineCap: 线条线段端点样式: butt 、round、square
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XlGB58Mj-1597935294749)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20200820201929925.png)]
-
ctx.lineJoin:两端连接处所显示的样子:round 、bevel 、miter(默认)[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EotcfiPo-1597935294770)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20200820202111189.png)]
-
ctx.beginPath();//新建一条路径,生成之后,图形绘制命令被指向到路径上生成路径
-
ctx.closePath(); //闭合路径之后图形绘制命令又重新指向上下文,也就是说,闭合路径并不是必须的,这个方法会通过绘制一条从当前点到开始点的直线来闭合图形
-
moveTo(x,y) //移动到开始点
-
lineTo(x,y) //绘制笔触线条到什么位置
-
stroke()//通过线条绘制轮廓
-
fill() //通过填充路径的内容区域生成实心的图形
-
arc(x,y,radius.startAngle,endAngle,s顺时针或者逆时针(默认FALSE顺时针,填true就是逆时针))//这里的是弧度,Math.PI/180*角度。
-
arcTo(x1,y1,x2,y2,radius) //连接弧线
-
二次贝塞尔曲线:ctx.quadraticCurveTo(cp1x,cp1y,x,y) //cp1x,cp1y作为一个控制点,xy为结束点(也就是单点拖拽,控制曲线)
-
三次贝塞尔曲线:ctx.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y) //cp1x,cp1y作为控制点1,cp2x,cp2y作为控制点2,x,y为结束点(也就是两控制点拖拽来控制曲线)
-
path2D:new Path(2D) //用于装在绘制路径
var circle=new Path(2D); //用于装载绘制路径 circle.moveTo(125,35); circle.arc(100,35,25,0,2*Math.PI);
还可用来装载svg
var p = new Path2D(“M10 10 h 80 v 80 h -80 Z”);
这条路径将先移动到点 (M10 10) 然后再水平移动80个单位(h 80),然后下移80个单位 (v 80),接着左移80个单位 (h -80),再回到起点处 (z)。
-
文本:
-
ctx.fillText(text,x,y,[maxWidth])
-
ctx.strokeText(text,x,y,[maxWidth])
-
ctx.font=value;//ctx.font=“48px 宋体”
-
ctx.textAlign=value;// start,end,left,right,center
-
ctx.textBaseline=value;// top,hanging,middle,alphabetic,ideographic,bottom
-
ctx.direction=value;// ltr,trl,inherit
-
measureText(); //将返回一个TextMetrics对象的宽度,所在像素,这些体现文本特性的属性
var text=ctx.measureText("foo");//TextMetrics object text.width;//16
-
图片:
-
绘制图片:drawImage(image,x,y,width,height) //添加图片和图片放置的位置,并且缩放大小
-
drawImage(image,sx,sy,sWidth,sHeight,dx,dy,dWidth,dHeight) //前四个参数 是定义图像源的切片位置和大小, 也就是偏移位置和裁切大小
//后四个参数是定义切片目标的显示位置和大小,也就是切片的坐标和大小,也就是在其他画布显示的位置和大小
-
变形:
-
入栈和出栈:save() 和 restore();
-
translate(x,y) //平移 ,平移的时候会将画布平移
注意:如果不使用translate方法,那么所有的矩形都将被绘制在相同的位置。
-
rotate(angle//弧度) //旋转 旋转要配合偏移使用,因为旋转都是以canvas左上角为顶点来做的,因此要先偏移,然后再旋转,最后才能绘制
-
scale(x,y) //缩放
-
形变矩阵:transform(m11,m12,m21,m22,dx,dy)
setTransform(m11,m12,m21,m22,dx,dy);
-
剪切:clip(橡皮擦案例见案例文档)
应用缓存:
-
HTML5引入了应用程序缓存,这意味这web应用可以进行缓存,并且可以在没有因特网连接时进行访问
-
优势:离线缓存–用户可以在离线时使用它们
速度–已缓存资源加载的更快
减少服务器负载–浏览器将只从服务器下载更新过或更改过的资源
-
一旦应用被缓存,他就会保持缓存知道发生下列情况:-用户清空浏览器缓存、-manifest文件被修改 、 -由程序来更新应用缓存
-
方法:
1、MIME TYPE:text/cache-manifest 服务器配置MIME类型
服务器配置响应头header("content-type: text/cache-manifest");//服务器配置响应头header("content-type: text/cache-manifest");
2、需要由你创建的:NAME.manifest 创建manifest文件
<html lang="en" manifest="main.mainfast">//<html manifest="main.mainfast">
3、给 <html> 标签加 manifest 属性:<html manifest="path/to/NAME.manifest">
CACHE MANIFEST
CACHE:
main.css
NETWORK:
FALLBACK:
./404.html
CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
NETWORK - 在此标题下列出的文件需要与服务器的连接,且不会被缓存
FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面(比如 404 页面)
地理定位:
navigator.geolocation //定位
navigator.geolocation.getCurrentPosition() //获取定位信息
position.coords.latitude //纬度
position.coords.longtitude //经度
全屏操作:
进入全屏:document.documentElement.requestFullScreen(); //兼容模式:mozRequestFullScreen();/webkitRequestFullScreen();
退出全屏:document.exitFullscreen() //mozCancelFullScreen();/webkitCancelFullScreen();
网络:
window.addEventListener("online",onlineHandler); //联网侦听
window.addEventListener("offline",offlineHandler);//断网侦听
多线程:
1、创建多线程: var w=new Worker("./a.js");
2、添加多线程侦听事件message : w.addEventListener("message",messageHandler);
3、添加a.js文件
4、postMessage(数据) //新的线程传输数据给主线程
拖拽:
介绍:拖拽是一种常见的特性,即抓取对象以后拖到另一个位置,在HTML5中,拖放是标准的一部分,任何元素都能够拖放
1、为了使元素可以拖动,将将要拖动的元素的dragable属性设置为true
2、给要拖拽的元素增加dragstart事件 // 设置事件的dataTransfer的setDara值,Text类型/e.dataTransfer.setData("Text",this.id);
3、给拖拽到的目标容器增加dragover事件,并且取消默认事件 //e.preventDefault();
4、给拖拽到目标容器增加drop事件 //获取事件的dataTransfer.getData的值,Text类型/ var
id=e.dataTransfer.getData("Text");
5、增加到目标容器中 //this.appendChild(document.getElementById(id));