如图 就是为了填充灰色这一块
代码类型供参考 ⬇️ ⬇️
function drawRect(x, y, w, h, color, isFill = true) {
x *= iosScale;
y *= iosScale;
w *= iosScale;
h *= iosScale;
ctx.beginPath();
ctx.strokeStyle = color;
ctx.fillStyle = color;
ctx.globalAlpha = 1;
ctx.lineWidth = 2;
if (isFill) {
ctx.fillRect(x, y, w, h);
} else {
ctx.strokeRect(x, y, w , h);
}
ctx.closePath();
}
分享
关注效果如图 :
代码如下 :
<!DOCTYPE html>
<html>
<head>
<title>Canvas 倒梯形</title>
<style>
canvas {
border: 1px solid #000;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="400" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var topWidth = 200; // 上底宽度
var bottomWidth = 100; // 下底宽度
var height = 100; // 高度
var topLeftX = (canvas.width - topWidth) / 2; // 左上角 X 坐标
var topLeftY = (canvas.height - height) / 2; // 左上角 Y 坐标
var topRightX = (canvas.width + topWidth) / 2; // 右上角 X 坐标
var topRightY = (canvas.height - height) / 2; // 右上角 Y 坐标
var bottomLeftX = (canvas.width - bottomWidth) / 2; // 左下角 X 坐标
var bottomLeftY = (canvas.height + height) / 2; // 左下角 Y 坐标
var bottomRightX = (canvas.width + bottomWidth) / 2; // 右下角 X 坐标
var bottomRightY = (canvas.height + height) / 2; // 右下角 Y 坐标
// 绘制倒梯形
// context.beginPath();
// context.moveTo(topLeftX, topLeftY);
// context.lineTo(topRightX, topRightY);
// // context.arcTo(topRightX, topRightY, bottomRightX, bottomRightY, 20); // 弧线半径为20
// context.lineTo(bottomRightX, bottomRightY);
// context.lineTo(bottomLeftX, bottomLeftY);
// context.closePath();
// 绘制倒梯形
context.beginPath();
context.moveTo(topLeftX, topLeftY);
var controlX = (topLeftX + topRightX) / 2; // 控制点 X 坐标
var controlY = topLeftY - 50; // 控制点 Y 坐标
context.quadraticCurveTo(controlX, controlY, topRightX, topRightY);
context.lineTo(bottomRightX, bottomRightY);
context.lineTo(bottomLeftX, bottomLeftY);
context.closePath();
context.stroke();
</script>
</body>
</html>
系统已结题
7月22日
已采纳回答
7月14日
修改了问题
7月13日
修改了问题
7月13日
