入门HTML5 canvas 这一篇文章就够了

最新推荐文章于 2023-05-08 17:35:05 发布

TFboy_lee

最新推荐文章于 2023-05-08 17:35:05 发布

阅读量365

点赞数

文章标签： html html5 css canvas

本文链接：https://blog.youkuaiyun.com/qq_41555473/article/details/108137219

版权

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 lang="en" 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));