我需要制作從輸入中獲取引數的應用程式，并制作帶有一個角的圖形，該角應該根據角的輸入資料切割像素數量。我已經制作了帶有引數并制作圖形的函式，但我不知道如何制作那個角度，如果有人遇到過這樣的情況，請幫助我。以半徑為引數的角度應該是 90 度，半徑表示像素應該有多深。
<div class="solution__wrapper">
<canvas id="detail" width="1000" height="600"></canvas>
</div>
<div id="app">
<div class="control">
<button id="rotateZ">Rotate</button>
<span> Length: </span>
<input id="heightInput" placeholder="Length:" type="text" />
<span> Width: </span>
<input id="widthInput" placeholder="Width:" type="text" />
<span> Radius angle: </span>
<input id="rightAngleInput" placeholder="Radius:" type="text" />
</div>
</div>
let detail = {
length: 350,
width: 250,
lt: { radius: 0 },
lb: { radius: 0 },
rt: { radius: 50 },
rb: { radius: 0 }
};
const app = document.getElementById("app");
const heightInput = document.getElementById("heightInput");
const widthInput = document.getElementById("widthInput");
const leftAngleInput = document.getElementById("rightAngleInput");
const rotateZ = document.getElementById("rotateZ");
(() => {
const myDetail = document.getElementById("detail");
const context = myDetail.getContext("2d");
const roundRect = (x, y, w, h, radius) => {
let r = x w;
let b = y h;
context.beginPath();
context.strokeStyle="black";
context.lineWidth="2";
context.moveTo(x radius, y);
context.lineTo(r-radius, y);
context.quadraticCurveTo(r, y, r, y);
context.lineTo(r, y h-radius);
context.quadraticCurveTo(r, b, r, b);
context.lineTo(x radius, b);
context.quadraticCurveTo(x, b, x, b);
context.lineTo(x, y radius);
context.quadraticCurveTo(x, y, x radius, y);
context.stroke();
}
roundRect(400, 100, detail.width, detail.length, 50);
let rotation = 0;
let targetRotate = 90;
rotateZ.addEventListener("click", () => {
let newLength = heightInput.value;
let newWidth = widthInput.value;
let newRadRight = leftAngleInput.value;
detail.length = newLength;
detail.width = newWidth;
detail.rt.radius = newRadRight;
rotation = (rotation targetRotate) % 360;
myDetail.style.transform = `rotate(${rotation}deg)`;
context.clearRect(0, 0, myDetail.width, myDetail.height);
roundRect(400, 100, detail.width, detail.length, detail.rt.radius);
});
})();
uj5u.com熱心網友回復：
用于創建您正在尋找的形狀的繪圖功能看起來與roundedRect()您已經擁有的功能非常相似。
而不是quadraticCurveTo()在每個角落都做，只在右下角做。您還需要更改曲線控制點的位置。
該函式的代碼如下所示：
function draw() {
const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");
const drawDetail = (x, y, w, h, rad) => {
const r = x w;
const b = y h;
context.beginPath();
context.strokeStyle = "black";
context.lineWidth = "2";
context.moveTo(x, y);
context.lineTo(r, y);
context.lineTo(r, b - rad);
context.quadraticCurveTo(r - rad, b - rad, r - rad, b);
context.lineTo(x, b);
context.lineTo(x, y);
context.closePath();
context.stroke();
};
drawDetail(0, 0, 250, 350, 80);
}
draw();<!DOCTYPE html>
<html>
<body>
<div id="app"></div>
<script src="src/index.js">
</script>
<canvas id='canvas' width='400' height='600'></canvas>
</body>
</html>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/510221.html