javascript - 如何不对多个绘图使用 canvas clearRect()？-6ren

javascript - 如何不对多个绘图使用 canvas clearRect()？

转载作者：行者123 更新时间：2023-11-27 22:54:46

24

4

我想用 Canvas 在一张图片上画多幅画。

在我的代码中，我使用 ctx.clearRect(0,0,canvas.width,canvas.height);因此，它不允许我做多幅画。如果我没有使用 clearRect()，程序将无法正常运行。此外，我尝试更改 clearRect() 的位置，但它对我也不起作用。

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

ctx.clearRect(0,0,canvas.width,canvas.height); //clear canvas
ctx.beginPath();
var width = mousex-last_mousex;
var height = mousey-last_mousey;
ctx.rect(last_mousex,last_mousey,width,height);
ctx.strokeStyle = "blue";
ctx.lineWidth = 10;
ctx.stroke();

//Canvas
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

//Variables
var canvasx = $(canvas).offset().left;
var canvasy = $(canvas).offset().top;
var last_mousex = last_mousey = 0;
var mousex = mousey = 0;
var mousedown = false;

//Mousedown
$(canvas).on('mousedown', function(e) {
  last_mousex = parseInt(e.clientX - canvasx);
  last_mousey = parseInt(e.clientY - canvasy);
  mousedown = true;
});

//Mouseup
$(canvas).on('mouseup', function(e) {
  mousedown = false;
});

//Mousemove
$(canvas).on('mousemove', function(e) {
  mousex = parseInt(e.clientX - canvasx);
  mousey = parseInt(e.clientY - canvasy);
  if (mousedown) {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.beginPath();
    var width = mousex - last_mousex;
    var height = mousey - last_mousey;
    ctx.rect(last_mousex, last_mousey, width, height);
    ctx.strokeStyle = "blue";
    ctx.lineWidth = 10;
    ctx.stroke();
  }
  //Output
  $('#output').html('current: ' + mousex + ', ' + mousey + '<br/>last: ' + last_mousex + ', ' + last_mousey + '<br/>mousedown: ' + mousedown);
});

canvas {
  cursor: crosshair;
  border: 1px solid #000000;
  background-image: url("kroki2v3.png");
  background-repeat: no-repeat;
}

<html>

<head>
  <meta charset="utf-8" />
  <script src="https://code.jquery.com/jquery-2.1.3.js" integrity="sha256-goy7ystDD5xbXSf+kwL4eV6zOPJCEBD1FBiCElIm+U8=" crossorigin="anonymous"></script>

</head>

<body>
  <canvas id="canvas" width="3200" height="1400"></canvas>
  <div id="output"></div>
</body>

</html>

最佳答案

您必须将每个矩形的位置和大小存储在数组中并循环打印。

jQuery(document).ready(function($) {
	
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

ctx.clearRect(0,0,canvas.width,canvas.height); //clear canvas
ctx.beginPath();
var width = mousex-last_mousex;
var height = mousey-last_mousey;
ctx.rect(last_mousex,last_mousey,width,height);
ctx.strokeStyle = "blue";
ctx.lineWidth = 10;
ctx.stroke();
//Canvas
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

//Variables
var canvasx = $(canvas).offset().left;
var canvasy = $(canvas).offset().top;
var last_mousex = 0;
var last_mousey = 0;
var mousex = 0; 
var mousey = 0;
var mousedown = false;
var shapes = [];
var width;
var height;
//Mousedown
$(canvas).on('mousedown', function(e) {
  last_mousex = parseInt(e.clientX - canvasx);
  last_mousey = parseInt(e.clientY - canvasy);
  mousedown = true;
});

//Mouseup
$(canvas).on('mouseup', function(e) {
  const lastPos = {
  	lastMouseX : last_mousex,
  	lastMouseY : last_mousey,
  	rectWidth : width,
  	rectHeight : height
  }
  shapes.push(lastPos);
  mousedown = false;
});

//Mousemove
$(canvas).on('mousemove', function(e) {
  mousex = parseInt(e.clientX - canvasx);
  mousey = parseInt(e.clientY - canvasy);
  if (mousedown) {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.beginPath();
    width = mousex - last_mousex;
    height = mousey - last_mousey;
    if (shapes.length > 0){
    	for(var i in shapes){
		    ctx.rect(shapes[i].lastMouseX, shapes[i].lastMouseY, shapes[i].rectWidth, shapes[i].rectHeight);
    	}
    }
    ctx.rect(last_mousex, last_mousey, width, height);
    ctx.strokeStyle = "blue";
    ctx.lineWidth = 10;
    ctx.stroke();
  }
  //Output
  $('#output').html('current: ' + mousex + ', ' + mousey + '<br/>last: ' + last_mousex + ', ' + last_mousey + '<br/>mousedown: ' + mousedown);
});
});

canvas {
	cursor: crosshair;
	border: 1px solid #000000;
	background-image: url("kroki2v3.png");
	background-repeat: no-repeat;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<canvas id="canvas" width="3200" height="1400"></canvas>
<div id="output"></div>

关于javascript - 如何不对多个绘图使用 canvas clearRect()？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56846500/

24

4

0

r - 绘图、文件中的动态变量名称以及与循环的兼容性
我正在尝试编写一个函数来制作绘图并将其自动保存到文件中。我努力用它来动态地做的技巧[plotname=varname & filename=varname &]，并使其与从循环中调用它兼容。 #
python - 基于值列的下拉条形图(绘图)
有人可以帮助我如何在绘图条形图中添加“下拉”菜单。我在以下链接 ( https://plot.ly/python/v3/dropdowns/ ) 上找到了一些信息，但我正在努力调整代码，因此下拉选项
具有基于列值的动态系列的 Excel 绘图
我不确切知道如何表达这一点，但我本质上希望根据其他数据之前的列值将数据分组为 Excel 图的系列。例如: size weight apple 3 35 orange 4
R，绘图，多个绘图图形中的字体大小变化
我正在为出版物创建图表并希望它们具有相同的字体大小。当我用多图创建图形时，字体大小会减小，即使我没有更改tiff() 分辨率或pointsize 参数。我根据最终适合的地 block 数量增加了图形
OpenGL - 绘图 GUI
我用 glm::perspective(80.0f, 4.0f/3.0f, 1.0f, 120.0f);并乘以 glm::mat4 view = glm::lookAt( glm::vec3(
r - 以固定的时间间隔更新图形/绘图
我在 Shiny UI 中有一个情节。如果我更改任何输入参数并且通过 react 性图将会改变。但是让我们考虑以下情况:- Shiny UI 中的绘图可以说股票的日内价格变动。为此，您查询一些实时数据
R 绘图()。每个条目有多个变量的图例
我对 R 有点陌生。我在以下两个线程中跟踪并实现了结果: http://tolstoy.newcastle.edu.au/R/e17/help/12/03/7984.html http://lukem
wpf - 如何在WPF中使用GDI+绘图？
我想在 WPF 控件中使用 GDI+ 绘图。最佳答案有多种方法可以做到这一点，最简单的方法是锁定您使用 GDI 操作的位图，获取像素缓冲区(从锁定中获取的 BitmapData 中的 Scan0
R - 绘图 - 隐藏颜色条
如何在以下取自其网站的绘图示例中隐藏颜色条？ df % layout(title = '2014 Global GDPSource:CIA World Factbook',
r - 绘图:轴上的小数点精度
我有两列数据，X 和 Y，每个条目在两个向量的小数点后都有 4 位数据。当我使用 plot(x,y) 绘制简单图时，轴上显示的数据精确到小数点后两位。如何在两个轴上将其更改为小数点后 4 位精度？
JavaFX Canvas -绘图
我目前正在使用 Canvas 处理 JavaFX-Drawing-Application。在 GraphicsContext 的帮助下，我使用 beginPath() 和 lineTo() 方法绘制线
带有循环数据的 Rscript 绘图
如果这个问题已经得到解答，但我无法找到我需要的东西，我提前道歉。我想从名为 data1.dat、data2.dat 的文件中绘制一些结果......我设法通过循环导入数据，但我无法使用循环绘制结果。仅
Python 绘图 - 循环遍历特征和绘图的唯一值
我的 pandas 数据框中有一个功能，可以(可能)具有多个级别。我可以使用以下方法获得独特的级别: reasons = df["Reason"].unique() 我可以通过执行以下操作在单个图表上
python - 绘图、图形和标题函数错误
我在 Ubuntu 14 和 Windows 7(均为 64 位)中用 Python 绘制结果时遇到问题。作为一个简单的比较，我做了: from tvb.simulator.lab import *
C# 绘图，奇怪的行为
以下代码相当简单 - 它用随机选择的像素填充设计表面 - 没什么特别的(暂时忽略第二种方法中的 XXXXXXX)。 private void PaintBackground() { Rando
java 2D 绘图
我正在尝试制作一个绘制函数图形的 swing 应用程序(现在很简单，例如 x+2)但我在根据屏幕坐标制作我的点的数学坐标时遇到问题。我希望它在我的图表中简单地画一条从 P1(0,1) 到 P2(1,2
Java Canvas 绘图
编辑 4:问题的新格式背景:我有一个扩展 JFrame 的类 Window，在 JFrame 中我有一个 Canvas 。我向 Canvas 添加自定义对象。这个对象的唯一目的(为了争论)是在 Ca
html - 如何标记阶梯/绘图
我需要为即将到来的锦标赛标记阶梯，但我找不到任何方法来语义标记它。到目前为止我看到的唯一方法是 mark it up as a table ，我想不惜一切代价避免这种情况。有什么想法吗？最佳答案
计算元素在固定点的位置以进行 TFT 绘图
我目前正在为一个小型 uC 项目编写 UI。在计算垂直线的位置时遇到一些问题。这个想法是将红线沿 x 轴移动到矩形的末端。使用无限旋转编码器递增的值，范围为 0 到 800，增量为 1。矩形的左侧是
c++ - 从值数组创建直方图/绘图
我正在尝试绘制光分布图。我想准确地执行此问题的第一步所要求的:Statistical analysis on Bell shaped (Gaussian) curve . 现在我有一组值。我希望数组元

首页

博学

6Ren·AI

商城

javascript - 如何不对多个绘图使用 canvas clearRect()？