假设你是一个前端程序员,现在在canvas上一个已知XY坐标和方向th的点,你需要绘制一个长方形方块,长方形的长宽分别为20和10,,长方形的方向与点的th方向一致,你能给出一个函数输入点的信息然后绘制出来吗
时间: 2023-12-10 16:41:46 浏览: 119
在XY坐标系,根据给出的方程绘制线段.老外作品,值得参考
5星 · 资源好评率100%
当你说“在canvas上绘制”时,我假设你是在Web浏览器中使用JavaScript。下面是一个函数,它接受一个canvas元素、一个点的x坐标、一个点的y坐标和一个方向th(以弧度为单位),然后绘制一个长方形方块,长为20,宽为10,方向与点的方向一致。
```javascript
function drawRectangle(canvas, x, y, th) {
const ctx = canvas.getContext('2d');
ctx.save();
ctx.translate(x, y);
ctx.rotate(th);
ctx.fillRect(-10, -5, 20, 10);
ctx.restore();
}
```
使用该函数的示例代码如下:
```javascript
const canvas = document.getElementById('myCanvas');
drawRectangle(canvas, 100, 100, Math.PI / 4);
```
其中,`myCanvas`是一个HTML元素的ID,它应该是一个`<canvas>`元素。在这个示例中,我们在canvas上绘制了一个位于(100,100),方向为45度的长方形方块。
阅读全文