个人中心
gpt4 book ai didi

javascript - 尝试绘制从鼠标位置的工具栏中选择的形状-HTML5 CANVAS

转载 作者：行者123 更新时间：2023-11-28 00:31:44 24 4
gpt4 key购买 nike

嘿，大家好，我正在尝试创建一个交互式应用程序，用户可以选择他们想要的形状，然后单击 Canvas 上的任意位置，形状就会出现在该位置。到目前为止我只能对一种形状做到这一点。代码如下:

<!DOCTYPE html>
<html>
<head>
 <script>

 function initiateCanvasRectangle()
 {
     var ctx = document.getElementById('myCanvas').getContext('2d');
     ctx.canvas.addEventListener('mousemove', function(event) {
         var mouseX = event.clientX - ctx.canvas.offsetLeft;
         var mouseY = event.clientY - ctx.canvas.offsetTop;
     });

     ctx.canvas.addEventListener('click', function(event) {
         var mouseX = event.clientX - ctx.canvas.offsetLeft;
         var mouseY = event.clientY - ctx.canvas.offsetTop;

         ctx.fillRect(mouseX,mouseY,100,50);
    });

 }

 function initiateCanvasCircle()
 {
     var ctx = document.getElementById('myCanvas').getContext('2d');
     ctx.canvas.addEventListener('mousemove', function(event) {
         var mouseX = event.clientX - ctx.canvas.offsetLeft;
         var mouseY = event.clientY - ctx.canvas.offsetTop;
     });

     ctx.canvas.addEventListener('click', function(event) {
         var mouseX = event.clientX - ctx.canvas.offsetLeft;
         var mouseY = event.clientY - ctx.canvas.offsetTop;

         ctx.beginPath();
         ctx.arc(mouseX, mouseY, radius, 0, 2 * Math.PI, false);
         ctx.fillStyle = 'green';
         ctx.fill();
    });

 }

 function rect(){  //so that the function is triggered only when the user selects the shape
 window.addEventListener('click', function(event) {
     initiateCanvasRectangle();
 });
 }

 function drawRect()
 {
     rect();
 }

 function circle(){  //as from here the code is not working
  window.addEventListener('click', function(event) {
     initiateCanvasCircle();
 });
 }

 function drawCircle()
 {
    circle();
 }

 </script>

 <style>

 BUTTON.rect {
     padding: 8px 8px 8px 32px;
     font-family: Arial, Verdana;   
     background-color: white;
     border:2px solid black;
 }


 #tbl {
     border-collapse:collapse;
 }

 </style>
</head>

<body>
<div align="left">
<table border="1" id="tbl" width="1100" height="100">
<div align="right">
<tr><td><button class="circle" onclick="drawCircle(); return true;" style="padding:20px 40px 20px 40px;">Circle</button>
</td>
<td>
<button class="rect" onclick="drawRect(); return true;" style="padding:20px 40px 20px 40px;"></button>
</td></tr>
</div>
</table>
<p>
<canvas id="myCanvas" width="1100" height="400" style="border:solid 1px black;"></canvas>
</div>
</body>
</html>

当我单击矩形按钮时，它工作正常，但当我单击其按钮时，我似乎无法绘制圆形。我的代码有什么错误吗？到目前为止，我创建的内容仅用于尝试目的，因此请忽略页面的外观。任何帮助都感激不尽。谢谢。

最佳答案

您从未定义此行中使用的半径变量:

ctx.arc(mouseX, mouseY, radius, 0, 2 * Math.PI, false);

将其设置为某个值，例如 50，它就会起作用。

演示: http://plnkr.co/edit/8eUT0hRXA40K53Dy0xDl?p=preview

关于javascript - 尝试绘制从鼠标位置的工具栏中选择的形状-HTML5 CANVAS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28919380/

24 4 0
文章推荐： javascript - 如何让提示框输入调用函数？
文章推荐： c++ - 游戏启动到空白屏幕而不是加载屏幕
文章推荐： c++ - 确定字节输入和显示值之间的未知关系
文章推荐： c++ - 类构造函数异常后清理数据
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com