个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
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
我有一个默认的表 white-space : normal想申请white-space: nowrap对于链接到特定 th 的所有 td 元素，但不必将其应用于 元素本身，而不是使用外部 css 文件
我在一篇有关 Version Insight ( http://www.delphifeeds.com/go/s/77066 ) 的博客中读到(除其他外)JCL 没有受版本控制的 .dproj 文件，
我正在打开一个弹出窗口，并希望在其中执行单击操作，从而在打开它的页面中执行一些 jQuery。我在网上找到的所有内容都表明我应该能够使用 window.opener 做到这一点(例如 JQuery -
tablesorter 不适用于主题列，当列包含“-”时，例如: Name Subject Anton - Max "dfdsrv" Anna "fdsf" 但如果我添加带有规范符
我从 web 服务中获取了如下顺序的数据 234,00234,000,00 但是…… 如果 xml 更改为 NSMutableDictionary，它会转到排序顺序。 "Resultat_detail
我想在不执行循环的情况下从 pandas 列的值中提取第一个 3。 所以， df['myCol'][3] 5475 为了提取前 3 位数字，我这样做: int(str(df['myCol'][3])[
我一直读到python有严格的类型检查- >>> 1 + 'hello' Traceback (most recent call last): File "", line 1, in TypeE
在 MySQL 查询中，例如 SELECT * FROM ( SELECT user_id FROM favorites WHERE user_id >1 UNION SELECT user_id F
我有一个 UIScrollView，里面有一些标签。我可以使用按钮将 ScrollView 移动到另一个“页面”。但是当我推得太快时，偏移量不正确。 我将 ScrollView 移动到下一页的代码:
我正在尝试设置 SonarQube在成功构建 Travis 后评论我的 GitHub 拉取请求。 我已经有正常的分析工作。对于拉取请求分析，我还准备了所有 token ，安装了插件等。拉取请求中的问题
这里有一些代码。同样的模式(afaik)适用于英雄教程。 login.component.html: Invalid credentials login.component
我很困惑。我见过一些类似的问题，但没有一个能解决我的问题；所以我在网上抓取了这个脚本，它通过运行 makefile 自动压缩 javascript 文件，如下所示: concatenated.min.
我们在 url 参数中需要一个编码的分号字符，但 angular 不编码这个字符。 我们使用的资源如下所示: app.factory('TestResource', ['$resource', fun
我对 Hibernate 有一个奇怪的问题。我可以从数据库中选择一些东西，但我不能插入或更新任何值。这是我的配置和示例代码，persistance.xml: ****Us
类似于这个问题:group by not-null values我试图只对列 groupID 不为空的记录进行分组: +--+-------+------+-----+-----+----------
这个问题在这里已经有了答案: 关闭 10 年前。 Possible Duplicate: how to not apply opacity for child element? 哪个是设置不透明度的
我在我正在构建的 C++ 应用程序中使用 libtorrent，下载工作完美，但我想在尝试开始下载之前询问跟踪器它已连接的种子和对等点的数量。 我尝试使用 scrape_tracker()，但我从未收
我……很困惑。事情是这样的。我有一个编码为 UNICODE (Little Endian) 的 *ini 文件。在我的 Visual Studio 项目(我自己的 ini 解析器)中，我正在检查文本文
当我将 Linq-to-sql 查询绑定(bind)到 datagridview(在两者之间使用 BindingSource)时，列默认是可排序的。但是， bool 类型似乎并非如此。对于这些数据 G
当我将 iPhone 图像上传到我的 Wordpress 网站时，用 iPhone 拍摄的图像旋转错误。在我的电脑上旋转是正确的，但上传时旋转出错了。 有什么想法吗？ 更新:Wordpress UI
我是一名优秀的程序员,十分优秀！