尝试绘制从鼠标位置工具栏中选择的形状 - HTML5 CANVAS
Trying to draw shapes which are selected from toolbar at the mouse position-HTML5 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
相关文章:
- Canvas Html5绘图应用程序,移动画布会导致重大问题
- IE9的HTML5 Canvas getImageData()函数存在问题
- 查找带有边框的HTML5 Canvas(点击)事件的坐标
- 在keydown(JS,Jquery)上更改HTML5 Canvas元素
- HTML5 Canvas访问控制允许原始错误
- HTML5 Canvas toDataURL(“image/png”)适用于一些绘画,而有些则不然,不确定原因
- 如何在MVC5中运行时在HTML5 Canvas中显示图像
- HTML5 Canvas无法加载Kinetic.js
- 构建HTML5 Canvas/JS游戏
- 在我的网页上定位 Canvas HTML5 游戏时遇到问题
- Adobe Canvas HTML5 AS3点击标记
- 使用Canvas/HTML5创建或显示N-QAM星座
- Javascript 中用于 Flash Canvas HTML5 的倒数时钟计时器
- Canvas Html5:多个画布,清除其中一个会同时清除另一个画布
- 在canvas HTML5中检测对象相对于另一个对象的位置
- 在canvas HTML5中循环使用"gap "广场之间
- Canvas HTML5数据点指向数组
- Canvas HTML5 inheritance
- Canvas HTML5 JavaScript代码不起作用,使用Canvas.toDataURL()
- Javascript内存泄漏-Canvas HTML5 jQuery