ctx.fillStyle = "#FF0000"; // 设置填充颜色为红色ctx.fillRect(10, 10, canvas.width * 0.3, canvas.height * 0.3); // 绘制矩形，起点为 (10, 10)，宽度为 canvas 的30%，高度为 canvas 的30%修改以上代码左边宽30％高25％背景为红色，右边宽70％高25％背景未蓝色

好的，以下是修改后的代码：

// 获取 canvas 元素var canvas = document.getElementById("myCanvas");// 获取绘图上下文var ctx = canvas.getContext("2d");// 绘制左侧矩形ctx.fillStyle = "#FF0000"; // 设置填充颜色为红色ctx.fillRect(10, 10, canvas.width * 0.3, canvas.height * 0.25); // 绘制矩形，起点为 (10, 10)，宽度为 canvas 的30%，高度为 canvas 的25%// 绘制右侧矩形ctx.fillStyle = "#0000FF"; // 设置填充颜色为蓝色ctx.fillRect(canvas.width * 0.3 + 10, 10, canvas.width * 0.7, canvas.height * 0.25); // 绘制矩形，起点为左侧矩形的右边界，宽度为 canvas 的70%，高度为 canvas 的25%

希望能帮到你！

相关问题

that.ctx.fillStyle = '#1A1A1A'; // 设置 fillStyle 为黑色 that.ctx.fillRect(64, 1330, 1244, 296); // 绘制覆盖整个 Canvas 的黑色矩形 怎么改成带有8rpx圆角的矩形

在Canvas中要绘制一个带有圆角的矩形，需要使用`arcTo`方法来实现圆角效果。`arcTo`方法可以创建一个圆弧路径的切线点，连接到当前路径。首先需要确定圆角的半径和矩形的四个角的位置，然后使用`arcTo`方法绘制四个圆角。

以下是一个示例代码，展示如何在Canvas中绘制一个左上角半径为8rpx的圆角矩形：

// 假设 that.ctx 是Canvas的绘图上下文
var x = 64; // 矩形的起始x坐标
var y = 1330; // 矩形的起始y坐标
var width = 1244; // 矩形的宽度
var height = 296; // 矩形的高度
var radius = 8; // 圆角半径

// 移动到起始位置
that.ctx.beginPath();
that.ctx.moveTo(x + radius, y);

// 绘制上边圆角
that.ctx.arcTo(x + width, y, x + width, y + height, radius);

// 绘制右边圆角
that.ctx.arcTo(x + width, y + height, x, y + height, radius);

// 绘制下边圆角
that.ctx.arcTo(x, y + height, x, y, radius);

// 绘制左边圆角
that.ctx.arcTo(x, y, x + width, y, radius);

// 填充矩形
that.ctx.fillStyle = '#1A1A1A';
that.ctx.fill();

// 关闭路径
that.ctx.closePath();

请注意，这里使用的是rpx作为单位，这是一个在微信小程序中常用来做适配的相对单位。在普通的Canvas上下文中，你需要使用像素单位（px），而不是rpx。如果需要在Canvas中适配不同屏幕的尺寸，可能需要根据设备的屏幕分辨率来调整rpx到px的转换。

ctx.fillStyle=grd;

`ctx.fillStyle = grd;` 这行代码是使用在Web开发中HTML5的Canvas API里的一个语句。`ctx` 是Canvas 2D渲染上下文（CanvasRenderingContext2D）的一个实例，`fillStyle` 属性用于设置图形的填充颜色、渐变色或模式。

当 `fillStyle` 被设置为一个 `CanvasGradient` 对象（例如由 `createLinearGradient` 或 `createRadialGradient` 创建的渐变对象）时，它定义了一个线性或径向渐变的样式。`grd` 就是代表这种渐变的变量。

这个渐变可以是线性的或径向的，并且可以定义多种颜色过渡。一旦设置了这个属性，接下来用 `fillRect`、`fillText` 等方法绘制的图形就会使用这个渐变填充。如果设置了非渐变的值，比如颜色的字符串（如 `'red'`）或者 `CanvasPattern` 对象，那么图形就会用这个颜色或图案来填充。

示例：

// 创建线性渐变
var linearGrd = ctx.createLinearGradient(0, 0, 150, 150);
linearGrd.addColorStop(0, '#00E');
linearGrd.addColorStop(1, '#E00');

// 使用渐变填充
ctx.fillStyle = linearGrd;
ctx.fillRect(10, 10, 130, 130);

上述示例创建了一个从左上角到右下角的红色到蓝色的渐变，并用它来填充一个矩形。