Canvas绘制矩形

发布时间：2023-05-21

一、绘制基本矩形

<canvas id="myCanvas"></canvas>

let canvas = document.getElementById('myCanvas');
let ctx = canvas.getContext('2d');
ctx.fillStyle = "red";
ctx.fillRect(50, 50, 100, 100);

Canvas是HTML 5标准中新加入的元素，在网页中创建图形可以使用它。使用canvas绘制矩形是最基础的操作之一，下面介绍如何绘制基本矩形。 使用fillRect()方法可以绘制矩形，其参数含义依次为矩形左上角的横坐标、纵坐标以及宽度和高度。在上述代码中，我们首先获取画布的上下文对象ctx，并将填充颜色设置为红色，接着调用fillRect()方法完成绘制。绘制的矩形左上角坐标是(50,50)，宽度和高度都是100px。

二、绘制边框矩形

<canvas id="myCanvas2"></canvas>

let canvas2 = document.getElementById('myCanvas2');
let ctx2 = canvas2.getContext('2d');
ctx2.strokeStyle = "blue";
ctx2.strokeRect(50, 50, 100, 100);

与填充矩形不同，绘制边框矩形需要使用strokeRect()方法，其参数含义与fillRect()相同。在上述代码中，我们同样先获取画布的上下文对象ctx2，将边框颜色设置为蓝色，接着调用strokeRect()绘制矩形的边框。绘制的矩形与前面的例子相同。

三、绘制圆角矩形

<canvas id="myCanvas3"></canvas>

let canvas3 = document.getElementById('myCanvas3');
let ctx3 = canvas3.getContext('2d');
let x = 50;
let y = 50;
let w = 150;
let h = 100;
let r = 20;
ctx3.beginPath();
ctx3.moveTo(x + r, y);
ctx3.lineTo(x + w - r, y);
ctx3.arc(x + w - r, y + r, r, 1.5*Math.PI, 0);
ctx3.lineTo(x + w, y + h - r);
ctx3.arc(x + w - r, y + h - r, r, 0, 0.5*Math.PI);
ctx3.lineTo(x + r, y + h);
ctx3.arc(x + r, y + h - r, r, 0.5*Math.PI, Math.PI);
ctx3.lineTo(x, y + r);
ctx3.arc(x + r, y + r, r, Math.PI, 1.5*Math.PI);
ctx3.closePath();
ctx3.fillStyle = "green";
ctx3.fill();

绘制圆角矩形需要分成四段绘制。在上述代码中，我们定义了矩形左上角坐标、宽度和高度以及圆角的半径。接着通过beginPath()方法开始绘制路径并通过moveTo()方法将路径移动到左上角圆角的起点。接下来绘制第一段直线，再绘制第一个圆弧。绘制第二段直线，再绘制第二个圆弧。绘制第三段直线，再绘制第三个圆弧。绘制最后一段直线后，调用closePath()方法闭合路径，并将填充颜色设置为绿色，调用fill()方法完成绘制。

四、绘制渐变矩形

<canvas id="myCanvas4"></canvas>

let canvas4 = document.getElementById('myCanvas4');
let ctx4 = canvas4.getContext('2d');
let grd = ctx4.createLinearGradient(0, 0, 170, 0);
grd.addColorStop(0, "#ff0000");
grd.addColorStop(1, "#00ff00");
ctx4.fillStyle = grd;
ctx4.fillRect(50, 50, 100, 100);

使用createLinearGradient()方法可以创建线性渐变色。其参数依次为渐变起点横、纵坐标以及渐变终点横、纵坐标。接着使用addColorStop()方法指定渐变色。其中第一个参数为0表示颜色在起点时完全不透明，第二个参数为1表示颜色在终点时完全不透明。在上述代码中，我们定义了矩形左上角坐标为(50,50)，宽度和高度都是100px，并使用线性渐变色填充。

五、绘制图片矩形

<canvas id="myCanvas5"></canvas>

let canvas5 = document.getElementById('myCanvas5');
let ctx5 = canvas5.getContext('2d');
let img = new Image();
img.src = "img.jpg";
img.onload = function() {
    ctx5.drawImage(img, 50, 50, 100, 100);
}

使用drawImage()方法可以在矩形中绘制图片。其参数依次为图片对象、起始点横、纵坐标以及绘制宽度和高度。在上述代码中，我们获取了图片对象，等待图片加载完成后调用drawImage()方法将图片绘制在矩形中心。

推荐文章