个人中心
文章发布
退出
作者热门文章
- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
25
4
我需要一个函数来在 Canvas 上绘制几个圆，从 center=x,y 处的 mousedown 开始，然后将鼠标拖动到 deltaX,deltaY，从而为每个圆创建半径 r。圆圈不能有填充物(需要它们透明)，因此用户可以清楚地看到圆圈 chop 的位置。我当前的代码在拖动鼠标时绘制圆圈，这是预期的，但它也会留下那些额外的圆圈。我只需要在 mouseup 上留下圆圈。任何帮助表示赞赏。谢谢 :)。
<html>
<head>
</head>
<body style="margin:0">
<canvas id="canvas" width="500" height="500" style="border:1px solid"></canvas>
<script>
var canvas=document.getElementById('canvas');
var context=canvas.getContext('2d');
var radius=50;
var nStartX = 0;
var nStartY = 0;
var bIsDrawing = false;
var putPoint = function(e){
nStartX = e.clientX;nStartY = e.clientY;
bIsDrawing = true;
radius = 0;
}
var drawPoint = function(e){
if(!bIsDrawing)
return;
var nDeltaX = nStartX - e.clientX;
var nDeltaY = nStartY - e.clientY;
radius = Math.sqrt(nDeltaX * nDeltaX + nDeltaY * nDeltaY)
context.beginPath();
context.arc(nStartX, nStartY, radius, 0, Math.PI*2);
context.strokeStyle="#000000";
//context.fillStyle="#FFFFFF";
context.fillStyle = 'rgba(0, 0, 0, 0)';
context.stroke();
context.fill();
}
var stopPoint = function(e){
//context.clip();
//context.clearRect(0, 0, canvas.width, canvas.height);
bIsDrawing = false;
}
canvas.addEventListener('mousedown',putPoint);
canvas.addEventListener('mousemove',drawPoint);
canvas.addEventListener('mouseup',stopPoint);
</script>
</body>
</html>最佳答案
您需要跟踪您绘制的圆圈(和其他对象)——一种方法是在 mouseup 上将它们插入数组。然后每次绘制之前都应该清除 Canvas 并重新绘制已保存的圆圈。
var circles = [];
...
清除 Canvas
...
radius = Math.sqrt(nDeltaX * nDeltaX + nDeltaY * nDeltaY)
context.clearRect(0, 0, canvas.width, canvas.height);
...
绘制保存的圆圈
...
context.fill();
// drawing saved circles
circles.forEach(function(circle){
context.beginPath();
context.arc(circle.nStartX, circle.nStartY, circle.radius, 0, Math.PI*2);
context.strokeStyle="#000000";
context.fillStyle="#FFFFFF";
context.fillStyle = 'rgba(0, 0, 0, 0)';
context.stroke();
context.fill();
})
...
保存完成的圈子
...
bIsDrawing = false;
// saving completed circles
var nDeltaX = nStartX - e.clientX;
var nDeltaY = nStartY - e.clientY;
radius = Math.sqrt(nDeltaX * nDeltaX + nDeltaY * nDeltaY);
circles.push({ nStartX: nStartX, nStartY: nStartY, radius: radius });
...
fiddle - https://jsfiddle.net/9x77sg2h/
关于Javascript HTML5 Canvas 绘制透明圆圈，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36622930/
25
4
0
我想禁用我的 UIButton，所以我调用: button.enabled = FALSE; 然而，这会使按钮变得透明，我可以看到它下面的元素。我不介意它改变颜色，我只是不希望它是透明的。 我尝试在
一个常规的 NSButton 如果被禁用，它似乎是透明的。 图像显示了一个样式为“push”的按钮 但是，我想禁用没有透明度的按钮。 我试图以编程方式将 alphaValue 设置为 1.0 但似乎
我正在尝试将Memoji从iPhone/Mac转换为具有透明背景的一系列png，以便我可以创建一个 Sprite 表。当按下空格键时，我可以清楚地看到它具有透明背景，但是在运行 ffmpeg -i s
我想创建一个具有部分透明背景的 View (舞台、窗口)。我有一张包含 Alpha channel 的图像 我在JavaFx中使用了这种场景，我必须将场景填充设置为空，并将根节点背景颜色设置为透明。我
我想创建一个具有部分透明背景的 View (舞台、窗口)。我有一张包含 Alpha channel 的图像 我在JavaFx中使用了这种场景，我必须将场景填充设置为空，并将根节点背景颜色设置为透明。我
我想将 JDesktopPane 设置为透明，并允许我单击下面的内容(例如桌面图标等)。内部框架应保持不透明，并且能够像当前一样在屏幕周围重新定位。有什么想法吗？ package test1;
我知道我不是第一个提出此类问题的人，但我认为我的问题有点不同。 我在 MS Paint 上绘制了一个 png 图像，它是一个播放器，当我使用图形对象绘制图像时，我希望图像的背景是透明的。我尝试了一些带
我在 Mac 的 swift 项目中想使用单选按钮，但与我的背景颜色相同。如何将背景设置为不透明或更改背景颜色？ 最佳答案 我找到了解决此问题的方法。将单选按钮的文本设置为“”，将 rb 添加到水平堆
我无法将我的相对布局设置为透明。我尝试了很多不同的方法，从类中自定义 View ，添加 android:background="@android:color/transparent"等。它们要么像下图
在 Storyboard中，我创建了一个 ![UINavigationController] 及其 Root View Controller UIViewcontroller。在工具栏中，我有一个分段
我必须让我的导航栏透明，我试过这段代码: self.navigationController?.navigationBar.setBackgroundImage(UIImage(), for: UIB
我注意到，如果我将 View 背景颜色设置为透明，则在 segue 过渡结束后背景颜色会变成黑色(我猜这是默认的“视口(viewport)”颜色)。 我可以改变吗？当然，我可以将颜色从透明更改为紫色，
嘿，有没有可能让滚动条“隐藏”，我不想使用 overflow-y: hidden就像背景:透明或类似的东西 最佳答案 Here您会找到有关如何仅使用 CSS 隐藏滚动条的说明。 在第二个example
默认情况下，背景显示为白色。是否可以通过任何方式将其背景颜色更改为透明..？ (function() { var cx = '005519348941191855053:d0uziw7c
我正在尝试添加一个在 div 的左右边缘具有透明度/淡出的嵌入框阴影。我设法添加了一个普通的嵌入框阴影，但我不知道如何为边缘添加透明度。我该怎么做？ 这是我正在努力实现的一个例子。 .contai
如何删除 周围的边框并使其背景透明？ 最佳答案 试试这个: border: none; border-color: transparent; 关于html - 透明、无边框的文本输入，我们在Stac
是否可以使 JButton 透明(包括边框)而不是文本？我扩展了 swing 的 JButton 并覆盖了它: @Override public void paint(Graphics g) {
众所周知，要使QWidget/QOpenGLWidget半透明/透明，只需: widget->setAttribute(Qt::WA_TranslucentBackground) 但是，由于 QWin
我想知道如何在 Ubuntu 中为所有应用程序制作透明 Gnome 终端，我知道我们可以为桌面制作透明终端，而不是为所有应用程序制作透明终端。我用谷歌搜索了很多，但找不到任何解决方案。谁能告诉我该怎么
我想让 SWT Canvas 的背景透明，以便可以看到它后面的其他小部件。 我尝试将 alpha 设置为 0 并用矩形填充 Canvas ，并且还使用选项 SWT.NO_BACKGROUND 无济于事
我是一名优秀的程序员,十分优秀！