canvas基础归纳

男娘i 2023-06-18 06:52 6阅读 0赞

### 基础知识 ###

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 ###

![在这里插入图片描述][20191130192027587.png]

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 ###

![在这里插入图片描述][201911301925391.png]

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

[20191130192027587.png]: https://img-blog.csdnimg.cn/20191130192027587.png
[201911301925391.png]: https://img-blog.csdnimg.cn/201911301925391.png