canvas 图形的基本绘制

图形的基本绘制

canvas中除了矩形 以外 其他所有的基本图形 都是由路径构成的 canvas提供了三种操纵路径的方法。

线（canvas中的路径）

• beginPath 开启一条路径
• moveTo 设置起点
• lineTo 执行到指定点
• stroke 添加颜色
  • closePath方法创建从当前点到开始点的路径。(关闭一条路径 可以理解为抬笔动作)

let graphDom = document.getElementById('graph'); 
let graph = graphDom.getContext('2d'); 

graph.beginPath()
graph.moveTo(0,0)
graph.lineTo(100,100)
graph.strokeStyle = '#f40'
graph.stroke()

graph.beginPath();
graph.lineWidth="5";
graph.strokeStyle="purple"; // Purple path
graph.moveTo(0,30);
graph.lineTo(150,130);
graph.stroke(); 

beginPath() 方法开始一条路径，或重置当前的路径。

strokeStyle()属性设置或返回用于笔触的颜色、渐变或模式。也就是我们常说的描边。

lineWidth 属性设置或返回当前线条的宽度，以像素计。

strokeStyle 和 lineWidth 属性是公共的会影响全局的设置。因为canvas 是基于状态在画值。
closePath() 关闭路径 不是 结束路径 只是把起点和终点连接起来闭合图形 只有连接起来才能进行填充。

面(矩形、圆、圆弧)

矩形

在canvas绘制矩形除了通过点和线连接这种方式外 canvas还为我们提供了一下快捷绘制矩形点方法。下面代码中fillRect方法通过填充绘制了一个矩形 rect() 可以直接绘制一个矩形。

let graphDom = document.getElementById('graph'); 
let graph = graphDom.getContext('2d'); 
// 通过路径绘制矩形 也可以绘制任意多边形
graph.beginPath();
graph.moveTo(200,80);
graph.lineTo(200,160);
graph.lineTo(130,160);
graph.lineTo(130,80);
graph.closePath();
graph.strokeStyle = '#000';
graph.stroke();
// 填充矩形
graph.fillRect(20,20,150,100); //x, y, 宽, 高。 默认的填充颜色是黑色。
// rect绘制
graph.rect(20,20,150,100);
graph.stroke();
// graph.strokeRect(20,20,100,50)

// 补充clearRect方法清空给定矩形内的指定像素
// graph.clearRect(20,20,100,50);

通过路径绘制图形时只有closePath方法才是正真的闭合了图形lineTo回到起点并不会闭合图形只是视觉上闭合了closePath方法必须调用

fillRect(x,y,width,height)方法绘制"已填充"的矩形。默认的填充颜色是黑色。

rect(x,y,width,height) 方法会创建一个矩形。

clearRect(x,y,width,height) 方法清空给定矩形内的指定像素。

strokeRect((x,y,width,height) 绘制一个矩形 是stroke和rect方法的合并

参数x和y是绘制图形的起点坐标 width,height分别表示宽和高

圆、圆弧

let gardenDom = document.getElementById('garden'); 
let garden = gardenDom.getContext('2d'); 
garden.beginPath();
garden.arc(100,75,50,0,2*Math.PI);
garden.stroke();

garden.beginPath();
garden.moveTo(20,20);  // 创建开始点
garden.lineTo(100,20); 
garden.arcTo(150,20,150,70,30)
garden.lineTo(150,120);
garden.stroke();
garden.closePath()

arc(x,y,r,sAngle,eAngle,counterclockwise) 方法创建弧/曲线（用于创建圆或部分圆）

• x 圆的中心的 x 坐标。y 圆的中心的 y 坐标

• r 圆的半径

• sAngle 起始角，以弧度计

• eAngle 结束角，以弧度计。

• counterclockwise 可选。规定应该逆时针还是顺时针绘图。

arcTo(x1,y1,x2,y2,r) 方法在画布上创建介于两个切线之间的弧/曲线。
x1和y1 第一个控制点坐标 x2,y2第二个控制点坐标 r 半径