如何替换javascript canas

How to replace javascript canas

本文关键字：javascript canas 替换 何替换      更新时间：2023-09-26

我正在开发javascript，我想使用单选按钮将现有的图替换为不同的图。我无法使图形相互切换。你能帮我吗？谢谢

您需要通过调用新图形的图形方法来清除画布并重新绘制它

function draw(color) {
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  ctx.clearRect(0, 0, 500, 500);
  ctx.fillStyle = color.value;
  ctx.fillRect(20, 20, 150, 100);
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" onchange="draw(this);" name="g" value="red">Red
<br>
<input type="radio" onchange="draw(this);" name="g" value="blue">Blue
<p>Canvas:</p>
<canvas id="myCanvas" width="500" height="500" style="border:1px solid #d3d3d3;">
  Your browser does not support the HTML5 canvas tag.
</canvas>

相关文章：