矩形使用画布进行切割

【问题标题】：Rectangle get cuts using canvas矩形使用画布进行切割
【发布时间】：2014-09-08 02:36:31
【问题描述】：

我正在使用 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>

输出：

谁能给出这个问题的解决方案？

谢谢，婆罗地。

【问题讨论】：

标签： javascript html canvas

【解决方案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

【讨论】：

如果解决方案解决了您的问题，您可以接受答案（通过选择绿色勾号），或者如果您有其他问题，您也可以提出问题。 :)