Canvas的使用

Canvas的使用

1. 创建<canvas>

创建<canvas>元素并声明width、height和
<canvas width="600" height="400"></canvas>

2. JS中获取组件

1. JS获取组件

//querySelector返回值类型为静态NodeList集合，是克隆整个对象，所以速度慢
var mycanvas=document.querySeletor('canvas');

//getElementsByTagName返回值类型为动态HTMLCollection集合，是复制对象的索引，速度快
var mycanvas=document.getElementsByTagName('canvas');

2. 获取上下文
ctx=mycanvas.getContext('2d');

3. 获取画布宽高

<!--DOM方式-->
var canvasHeight=mycanvas.height;

<!--上下文方式-->
var canvasHeight=ctx.canvas.height;

3. 画线条

知识点：
问题：在画一条线条时，描边默认值是1px和黑色，但视觉效果上看是2px和灰色
原因：因为在绘制时是在两个像素点之间开始绘制的，设备像素不支持0.5px，所以用2px和灰色来表示
解决方案：绘制时把位置+/-0.5px

填充原则：非零环绕 
说明：顺时针绘制的线条为1，逆时针为-1。从要判断的区域拉一条线出去，将与其相交的线条相加减，若结果为0则不填充，反之填充。

ctx.beginPath();	//开启新路径，解决多个路径绘制时，样式会覆盖的问题
ctx.closePath();	//关闭路径，解决手动闭合的缺角问题
ctx.moveTo(100,100);	//记录开始位置
ctx.lineTo(100,200);	//画线
ctx.stroke();	//描边
ctx.strokeStyle='blue';	//描边颜色
ctx.lineWidth=10;	//描边宽度
ctx.fill();	//填充
ctx.fillStyle='red';	//填充颜色
ctx.lineCap='round';	//线条头部样式，有butt（默认）、square、round，后两者会长出一部分
ctx.lineJoin='round';	//线条拐点样式，有miter（默认）、round、bevel（平的）
ctx.setLineDash([5,10,15]);	//设置线条为虚线的排列方式，数组的每个数代表[虚线长度，空格长度，虚线长度...]
ctx.getLineDash();	//获取的是不重复排列的数组
ctx.lineDashOffset=-1;	//正值往左（后）偏移

4. 绘制矩形/圆弧

1. 绘制矩形

<!--不是独立路径-->
ctx.rect(x,y,width,height);

<!--独立路径-->
ctx.strokeRect(x,y,width,height);
ctx.fillRect(x,y,width,height);

2. 擦除矩形
ctx.clearRect(x,y,width,height);

3. 创建渐变方案
var linearGradient=ctx.createLinearGradient(x0,y0,x1,y1);	//起始点坐标->终点坐标
linearGradient.addColorStop(0,'pink');	//（位置，颜色）
ctx.fillStyle=linearGradient;	//应用渐变方案

4. 绘制圆弧
知识点：
弧度长度=半径长度
圆的周长=2Πr
一个圆的弧度：2Π
一个角度=Π/180弧度

ctx.arc(圆心坐标x,圆心坐标y,半径,起始位置弧度,结束位置弧度,默认绘制方向顺时针false);

5. 绘制文字

var str='Hello World!';

ctx.font='40px Microsoft HeiTi';	//字号，字体
ctx.textAlign='start';	//left,start,right,end,center（其中start和end与direction属性有关）
ctx.direction='rtl';	//ltr,rtl
ctx.textBaseLine='center';	//top,bottom,center
ctx.strokeText(str,x0,y0);	//字符串，起始坐标（起始坐标默认位于文字左下角）
ctx.fillText(str,x0,y0);
ctx.measureText(str).width;	//获取文字宽度

6. 绘制图片

<!--把图片加载进内存，但不渲染到页面的几种方式-->

1. DOM加载
var image=document.createElement('img');

2. new对象加载
var image=new Image();

3. drawImage()用法
//三个参数
drawImage(image,x0,y0);	//image为图片对象，x0和y0位于图片左上角
//五个参数，用于缩放图片
drawImage(image,x0,y0,width,height);
//九个参数，用于裁剪图片
drawImage(image,x0,y0,w0,h0,x1,y1,w1,h1);	//x和y为在图片/画布上的定位，w和h为在图片画布上的宽高

4. 绘制图片过程
//创建对象
var image=new Image();
//绑定加载完成事件
image.onLoad=function(){
	ctx.drawImage(image,x0,y0,width,height);
}
//设置图片路径
image.src='image/01.jpg';

7. 绘制帧动画

原理：使用setInterval()，每次在绘制前使用clearRect()清除一下画布，然后使用drawImage()把图片绘制出来，实现动画效果

8. 坐标轴的转换

知识点：

1. 坐标轴原点的重定位
ctx.translate(100,100);

2. 坐标轴的缩放
ctx.scale(0.5,1);

3. 坐标轴的旋转
ctx.rotate(Math.PI/2);	//弧度