Question

我想为仪表板面板创建一个弯曲的侧栏。我尝试了两种方法：

创建svg和路径：结果根本不好。
使用js创建：效果不错，但已栅格化：|

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
// Quadratic Bézier curve
ctx.beginPath();
ctx.moveTo(280, 0);
ctx.quadraticCurveTo(240, 90, 270, 150);
ctx.lineTo(320, 320);
ctx.lineTo(320, 0);
ctx.fillStyle = "#0984e3";
ctx.fill();
//
const hes = document.getElementById('hesam');
const ctxx = canvas.getContext('2d');
// Quadratic Bézier curve
ctxx.beginPath();
ctxx.moveTo(281, 0);
ctxx.quadraticCurveTo(240, 90, 280, 150);
ctxx.lineTo(320, 320);
ctxx.lineTo(320, 0);
ctxx.fillStyle = "#74b9ff";
ctxx.fill();

#canvas {
  width: 100%;
  height: 100%;
  position: absolute;
  float: right;
}

#hesam {
  width: 100%;
  height: 100%;
  position: absolute;
  float: right;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=">
  <title></title>
</head>

<body>
  <canvas id="canvas"></canvas>
  <canvas id="hesam"></canvas>
</body>

</html>

https://codepen.io/hessamr/pen/vYLzePX

如何通过矢量化获得此结果，并保证使用bg的侧边栏。

为用户仪表板背景创建弯曲的侧边栏

0 个答案: