- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一个 Canvas (见下图),我已经被困了一段时间试图在用户点击 Canvas 内部时绘制的圆圈之间画线。
从照片中的示例可以看出,这也是我希望在 Canvas 中包含的内容:
用户点击蓝色 - 首先点蓝色 (x),继续沿着网格在 Canvas 内点击,添加更多蓝色 (x's),它们之间有蓝线。(我也不知道如何画 X 而不是我目前使用的圆圈)
用户点击红色 - 从第一个点红色 (o) 开始,继续沿着网格在 Canvas 内点击,添加更多红色 (o),它们之间有红线。
用户点击“Sterge” - Canvas 清除,网格保留。
[ ]到目前为止我的代码:
var needFirstPoint = true;
var lineTo = [{}];
function drawNextLine(ctx, x, y) {
if (needFirstPoint) {
ctx.lineWidth = 2;
ctx.beginPath();
ctx.moveTo(x, y);
needFirstPoint = false;
}
else {
ctx.beginPath();
ctx.lineTo(x, y);
ctx.stroke();
}
}
$(document).ready(function () {
var canvas = $('#myCanvas').get(0);
if (!canvas.getContext) { return; }
var ctx = canvas.getContext('2d');
var drawGrid = function (w, h, id) {
ctx.canvas.width = w;
ctx.canvas.height = h;
ctx.lineWidth = .1;
for (x = 15; x <= w; x += 60) {
ctx.moveTo(x, 0);
ctx.lineTo(x, h);
for (y = 20; y <= h; y += 20) {
ctx.moveTo(0, y);
ctx.lineTo(w, y);
}
}
ctx.stroke();
};
drawGrid(450, 280, "myCanvas");
var drawChart = function () {
ctx.arc(lineTo[lineTo.length - 1].x, lineTo[lineTo.length - 1].y, 6, 0, Math.PI * 2, false)
ctx.stroke();
}
drawChart();
document.getElementById('move').addEventListener('click', function () {
$('#myCanvas').on('click', function (e) {
var offset = $(this).offset();
var x = e.pageX - offset.left;
var y = e.pageY - offset.top;
ctx.strokeStyle = "red";
drawNextLine(ctx, x, y);
lineTo.push({ x: x, y: y });
drawChart();
});
});
document.getElementById('move1').addEventListener('click', function () {
$('#myCanvas').on('click', function (e) {
var offset = $(this).offset();
var x = e.pageX - offset.left;
var y = e.pageY - offset.top;
ctx.strokeStyle = "blue";
drawNextLine1(ctx, x, y);
lineTo.push({ x: x, y: y });
drawChart();
});
});
});
谢谢。
最佳答案
Ì简化了您的代码。我希望你不介意。接下来是我的代码。我希望这就是您想要的。
var lineTo = [];
$(document).ready(function() {
var canvas = $("#myCanvas").get(0);
if (!canvas.getContext) {
return;
}
var ctx = canvas.getContext("2d");
var drawGrid = function(w, h, id) {
ctx.canvas.width = w;
ctx.canvas.height = h;
ctx.lineWidth = 0.1;
ctx.beginPath();
for (x = 15; x <= w; x += 60) {
ctx.moveTo(x, 0);
ctx.lineTo(x, h);
for (y = 20; y <= h; y += 20) {
ctx.moveTo(0, y);
ctx.lineTo(w, y);
}
}
ctx.stroke();
};
drawGrid(450, 280, "myCanvas");
ctx.lineWidth = 1;
var drawChart = function(x, y) {
ctx.beginPath();
ctx.arc(x, y, 6, 0, Math.PI * 2);
ctx.strokeStyle = "red";
ctx.stroke();
};
$("#myCanvas").on("click", function(e) {
var offset = $(this).offset();
var x = e.pageX - offset.left;
var y = e.pageY - offset.top;
drawChart(x, y);
if (lineTo.length > 0) {
var last = lineTo[lineTo.length - 1];
ctx.beginPath();
ctx.moveTo(last.x, last.y);
ctx.lineTo(x, y);
ctx.strokeStyle = "blue";
ctx.stroke();
}
lineTo.push({ x: x, y: y });
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<canvas id="myCanvas"></canas>
OP 正在评论:
I need to have 2 buttons : Left and Right. When I click on Left, the Right path is stopped and Left path begins from a independent point.
这个我不是很懂。这是我的理解:
我知道你需要一个按钮来删除最后一个点 sterge
。
您还需要一个按钮 dreapta
来开始一条新路径。
这是我的代码。请阅读评论。
//this is an array of arrays
//when I click on the canvas a new point is pushed on the last array of this array
var ry = [[]];
var canvas = document.querySelector("#myCanvas");
let w = (canvas.width = 450);
let h = (canvas.height = 280);
var ctx = canvas.getContext("2d");
drawGrid();
myCanvas.addEventListener("click", e => {
var offset = canvas.getBoundingClientRect();
var x = e.clientX - offset.left;
var y = e.clientY - offset.top;
//a new point is pushed on the last array of ry
ry[ry.length - 1].push({ x: x, y: y });
// delete everything
ctx.clearRect(0, 0, w, h);
// draw everything
drawGrid();
drawChart();
});
sterge.addEventListener("click", e => {
//when sterge is clicked the last point from the last array is deleted
if (ry[ry.length - 1].length > 0) {
ry[ry.length - 1].pop();
} else {
//if the last array is empty I delete this array
ry.pop();
//and then I delete the last point from the last array
ry[ry.length - 1].pop();
}
// delete everything
ctx.clearRect(0, 0, w, h);
// draw everything
drawGrid();
drawChart();
});
dreapta.addEventListener("click", e => {
//when dreapta is clicked, a new array is pushed into the ry
ry.push([]);
});
function drawGrid() {
ctx.strokeStyle = "black";
ctx.lineWidth = 0.1;
ctx.beginPath();
for (x = 15; x <= w; x += 60) {
ctx.moveTo(x, 0);
ctx.lineTo(x, h);
for (y = 20; y <= h; y += 20) {
ctx.moveTo(0, y);
ctx.lineTo(w, y);
}
}
ctx.stroke();
}
function drawChart() {
ctx.lineWidth = 1;
// for every array in the ry array
for (let index = 0; index < ry.length; index++) {
// for every point in the ry[index]
for (let i = 0; i < ry[index].length; i++) {
let l = ry[index][i];
// draw the circle
drawCircle(l.x, l.y);
// draw the line
if (i > 0) {
let last = ry[index][i - 1];
ctx.beginPath();
ctx.moveTo(last.x, last.y);
ctx.lineTo(l.x, l.y);
ctx.strokeStyle = "blue";
ctx.stroke();
}
}
}
}
function drawCircle(x, y) {
ctx.beginPath();
ctx.arc(x, y, 6, 0, Math.PI * 2);
ctx.strokeStyle = "red";
ctx.stroke();
}
<canvas id="myCanvas"></canvas>
<p><input type="button" value="dreapta" id="dreapta" />
<input type="button" value="sterge" id="sterge" />
</p>
关于javascript - Canvas - 如何在新的 "route"上从单击到单击绘制线条并更改颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53584576/
我正在尝试创建一些文本标题,这些标题的一侧有一条线,该线基于文本的宽度是动态的。 例子: 我猜我需要在标题上做一些背景颜色(例如白色)来伪造它,然后使用 :before伪类,但到目前为止我还没有成功。
如何在 Qt 中使用 QVector 初始化多边形来创建一个开放多边形? QPolygonF 将始终关闭多边形并将最后一个点与第一个点连接起来。 谢谢你的帮助 [编辑] 在QGraphicsScene
如何获取数组中道路的几何形状(线条/绘图)? 可能吗? 谢谢! [抱歉我的英语不好] 最佳答案 目前 Google map 无法实现此操作。开源网络服务,如 OpenStreetMap能够返回数据库中
当我绘制具有透明纹理的平面(例如房屋的 window )时,我看到了不应该出现的线条或三角形。我该如何解决这个问题? (来源:troll.ws) 这是我用来绘制一个窗口的方法。我暂时启用混合以使窗口透
在 WPF 中,有没有一种方法可以修改从 Dash-Dot 序列绘制任何路径的方式?假设我想为我正在绘制的任何路径或绘图路径本身上的小三角形、波浪等绘制一条三重线。我已经尝试过画笔,但它不会遵循路径。
I have created an interactive map that when areas are selected then the related content should show/
我想在圆圈悬停时显示上下文菜单,以向用户显示一些选择,并在单击时执行一些操作,但我无法做到这一点。 如何在鼠标悬停事件上显示带有拉斐尔元素(例如圆圈、线条)的上下文菜单,并在选择特定菜单项时执行某些操
已解决。 我之前有一个问题,但它发布得非常糟糕,所以根据更好的规则,这里再次出现。 我想创建某种样式的图表,例如此图像: 。 它基于物理定律,Snell's Law 。到目前为止,我已经成功地使用基本
我正在绘制一些具有相同笔划的路径,但有一些明显的重叠(动态创建和更新树)。在重叠区域,笔划看起来与非重叠区域(- 参见 b)不同(更暗和更粗 - 参见 a)。同样的效果对于不同的笔触颜色也很明显。 代
我正在使用 python 和 opencv。我的目标是检测用树莓派相机拍摄的图像中的“X”形碎片。该项目是我们有预印的井字棋板,并且每次在板上放置新棋子(带有印章)时都必须对板进行成像。然后输出说明棋
设置图像样式有两种方法,一种是全局修改,一种只针对一幅图片有效。 全局修改 a<-c(1:10)#全局修改old_par<-par(no.readonly=TRUE)
Matplotlib 是 Python 的绘图库。 它可与 NumPy 一起使用,提供了一种有效的 MatLab 开源替代方案。 它也可以和图形工具包一起使用,如 PyQt 和 wxPython。
我创建了一个脚本来读取和绘制 .txt 文件及其内容(数字/值)。每个 .txt 文件位于不同的文件夹中。每个文件夹依次代表数据的一个主题。 这段代码工作正常。 Python 读取每个单独的 .txt
对于提交的最终文章,我被要求更新我的数据,以便它们符合以下规范: 轴线为 0.25 毫米 轴线周围,刻度线朝内 数据线为 0.5 毫米 字体为10pt 人物宽度应为 80 或 169 毫米 必须为 3
当尝试使用 D3DPT_LINELIST 在 3D 空间中绘制一条线时,Direct3D 给我一个关于无效顶点声明的错误,说它不能转换为 FVF .我使用的顶点声明和着色器/流设置与我的 D3DPT_
我如何使用 CSS 为 SVG“线”元素创建绘制动画。我想在滚动上画线,效果流畅。有人有什么想法吗?我试着搜索这个,但我找不到线元素的这种效果。这是我的 html 和 svg:
有什么方法可以用 CSS 来设置 SVG 行的样式吗?我试过添加。我想稍后用 JQuery 添加类 onclick。这将添加 class,然后更改描边颜色。 .black { fill: blac
我创建了一个受“站点地图”启发的菜单,它使用 svgs 连接菜单中的每个元素。目前 svg 是静态的。但是我相信有可能使这些吸引进来? 我有一个更复杂的问题,我只希望在容器 ul 可见时绘制线条。 当
这个问题在这里已经有了答案: How to draw a path smoothly from start point to end point in D3.js (1 个回答) 关闭 6 年前。
我在代码中的 HTML5 Canvas 元素上绘制了许多 1px 线。绘图代码大致如下所示,本例中的 transform 变量使用 d3-zoom 设置。 instructions.f32 是一个 F
我是一名优秀的程序员,十分优秀!