canvas基础归纳

基础知识

beginPath()新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径。

closePath()闭合路径之后图形绘制命令又重新指向到上下文中。

stroke()通过线条来绘制图形轮廓。

fill()通过填充路径的内容区域生成实心的图形。

lineTo(x, y)绘制一条从当前位置到指定x以及y位置的直线

arc(x, y, radius, startAngle, endAngle, anticlockwise)画一个以（x,y）为圆心的以radius为半径的圆弧（圆），从startAngle开始到endAngle结束，按照anticlockwise给定的方向（默认为顺时针）来生成

fillStyle = color设置图形的填充颜色。

strokeStyle = color设置图形轮廓的颜色。

createLinearGradient(x1, y1, x2, y2)createLinearGradient 方法接受 4 个参数，表示渐变的起点 (x1,y1) 与终点 (x2,y2)

实例1

const chart1 = document.getElementById('canvas');
let ctx = chart1.getContext('2d');
// 三角
ctx.beginPath();
ctx.moveTo(10,10);
ctx.lineTo(50,10);
ctx.lineTo(50,50);
ctx.lineTo(10,10);
ctx.strokeStyle = '#b18ea6';
ctx.lineWidth = 2;
ctx.stroke();
ctx.closePath();

// 矩形
ctx.fillStyle = "#00f";
ctx.fillRect(70,10,40,40);

// 扇形
ctx.beginPath();
ctx.moveTo(130, 10);
ctx.arc(130, 10, 40,  Math.PI / 4, Math.PI / 2, false);
let grd = ctx.createLinearGradient(130, 10, 150, 50);
grd.addColorStop(0, '#f00');
grd.addColorStop(1, '#0ff');
ctx.fillStyle = grd;
ctx.fill();
ctx.closePath();

fillText(text, x, y [, maxWidth])在指定的(x,y)位置填充指定的文本，绘制的最大宽度是可选的.

strokeText(text, x, y [, maxWidth])在指定的(x,y)位置绘制文本边框，绘制的最大宽度是可选的.

实例2

ctx.font = "28px serif";
ctx.textAlign = "center";
ctx.fillText("canvas", 100, 100);
ctx.strokeText("canvas", 100, 130);