gpt4 book ai didi

javascript - 使用 Canvas 剪切矩形

转载 作者:行者123 更新时间:2023-12-03 12:14:18 25 4
gpt4 key购买 nike

我正在使用 HTML5 Canvas 来绘制矩形。当我给矩形宽度和高度超过200时,右侧和底部区域被剪切或不显示在网页中。查看我的代码

<body>
<canvas id="ex1"/>
<script>
var line=document.getElementById("ex1");
var ctx=line.getContext("2d");
ctx.beginPath();
ctx.strokeStyle = "black";
ctx.lineWidth="6";
ctx.rect(5,5,380,240);
ctx.stroke();
</script>
</body>

输出:

enter image description here

谁能解决这个问题?

谢谢,巴拉蒂。

最佳答案

这是因为 Canvas 宽度和高度的默认大小是 300 和 150。如果你想绘制大于这个大小的矩形,那么你必须增加 Canvas 的大小,如下所示

 <body>
<canvas id="myCanvas" width="500" height="550" style="border:1px solid #c3c3c3;">
<script>
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext('2d');

context.beginPath();
context.rect(5, 5, 380, 240);
context.fillStyle = 'yellow';
context.fill();
context.lineWidth = 7;
context.strokeStyle = 'black';
context.stroke();
</script>
</body>

工作 fiddle 在这里 fiddle

您还可以查看以下链接以供引用 link

关于javascript - 使用 Canvas 剪切矩形,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24799879/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com