Question

我使用HTML5画布绘制矩形。当我给出矩形宽度和高度超过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

任何人都可以为此问题提供解决方案吗？

谢谢， Bharathi。

Answer 1

这是因为画布宽度和高度的默认大小是300和150.如果你想要绘制更多的矩形，那么你必须增加画布的大小，因为这里

 <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

您还可以查看以下链接以供参考 link

矩形使用画布获得切割

1 个答案: