- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一个带有 GIF 背景的 Canvas 。我需要用户上传绘图和背景,以便其他用户可以看到绘图与背景的关系。canvas.toDataURL();代码仅显示带有用户绘图的 Canvas 区域,而不显示背景。如何展平或“合并图层”,以便我可以上传到数据库。
var mousePressed = false;
var lastX, lastY;
var ctx;
function InitThis() {
ctx = document.getElementById('myCanvas').getContext("2d");
$('#myCanvas').mousedown(function(e) {
mousePressed = true;
Draw(e.pageX - $(this).offset().left, e.pageY - $(this).offset().top, false);
});
$('#myCanvas').mousemove(function(e) {
if (mousePressed) {
Draw(e.pageX - $(this).offset().left, e.pageY - $(this).offset().top, true);
}
});
$('#myCanvas').mouseup(function(e) {
mousePressed = false;
});
$('#myCanvas').mouseleave(function(e) {
mousePressed = false;
});
}
function Draw(x, y, isDown) {
if (isDown) {
ctx.beginPath();
ctx.strokeStyle = $('#selColor').val();
ctx.lineWidth = $('#selWidth').val();
ctx.lineJoin = "round";
ctx.moveTo(lastX, lastY);
ctx.lineTo(x, y);
ctx.closePath();
ctx.stroke();
}
lastX = x;
lastY = y;
}
function clearArea() {
// Use the identity matrix while clearing the canvas
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="jscripts/JsCode.js">
var dataURL = canvas.toDataURL();
</script>
<!--canvas drawing and upload mySQL-->
<div align="center">
<img src="graphics/teethDrawing.gif" width="705" style="position: absolute; z-index: -1" />
<canvas id="myCanvas" width="700" height="965" style="border:2px solid black"></canvas>
<br />
<br />
<button onclick="javascript:clearArea();return false;">Clear Area</button>
Line width :
<select id="selWidth">
<option value="1">1</option>
<option value="3" selected="selected">3</option>
<option value="5">5</option>
</select>
Color :
<select id="selColor">
<option value="black" selected="selected">black</option>
<option value="blue">blue</option>
<option value="red">red</option>
</select>
</div>
</div>
图像未显示,但确实显示在页面上。
帮助
最佳答案
您可以使用合成将背景图像添加到现有 Canvas 绘图的“后面”。
// give the image an id so it's more easily fetched
<img id='bk' src="graphics/teethDrawing.gif"
width="705" style="position: absolute; z-index: -1" />
// fetch a reference to the bk image
var bk=document.getElementById('bk');
// causes new drawings to be drawn behind existing drawings
ctx.globalCompositeOperation='destination-over';
// draw the img to the canvas (behind existing lines)
ctx.drawImage(bk,0,0);
// always clean up! Reset to default.
ctx.globalCompositeOperation='source-over';
此过程会将 bk 图像永久添加到 Canvas 中。如果您需要将 bk 和 Canvas 绘图分开,那么您可以创建第二个内存 Canvas ,通过将 bk 图像和 Canvas 绘图绘制到内存 Canvas 来展平您的内容。
// create a temporary canvas
var mem=document.createElement('canvas');
var mctx=mem.getContext('2d');
mem.width=canvas.width;
mem.height=canvas.height;
// draw the bk to the mem canvas
mctx.drawImage(bk,0,0);
// draw the main canvas to the mem canvas
mctx.drawImage(canvas,0,0);
关于javascript - 合并 Canvas 和背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30330860/
我有几个长度不等的 vector ,我想对其进行cbind。我将 vector 放入列表中,并尝试结合使用do.call(cbind, ...): nm <- list(1:8, 3:8, 1:5)
合并(合并)两个 JSONObjects 的最佳方式是什么? JSONObject o1 = { "one": "1", "two": "2", "three": "3" }
我在一个表中有许多空间实体,其中有一个名为 Boundaries 的 geometry 字段。我想生成一个具有简化形状/几何图形的 GeoJson 文件。 这是我的第一次尝试: var entitie
谁能说出为什么这个选择返回 3.0 而不是 3.5: SELECT coalesce(1.0*(7/2),0) as foo 这个返回 3: SELECT coalesce(7/2,0) as foo
首先抱歉,也许这个问题已经提出,但我找不到任何可以帮助我的东西,可能是因为我对 XSLT 缺乏了解。 我有以下 XML: 0 OK
有时用户会使用 Windows 资源管理器复制文件并在他们应该执行 svn 存储库级别的复制或合并时提交它们。因此,SVN 没有正确跟踪这些变化。一旦我发现这一点,损坏显然已经完成,并且可能已经对相关
我想组合/堆叠 2 个不同列的值并获得唯一值。 如果范围相邻,则可以正常工作。例如: =UNIQUE(FILTERXML(""&SUBSTITUTE(TEXTJOIN(",",TRUE,TRANSPO
使用iTextSharp,如何将多个PDF合并为一个PDF,而又不丢失每个PDF中的“表单字段”及其属性? (我希望有一个使用来自数据库的流的示例,但文件系统也可以) 我发现this code可以正常
是否有一个合并函数可以优先考虑公共(public)变量中的非缺失值? 考虑以下示例。 首先,我们生成两个 data.frames,它们具有相同的 ID,但在特定变量上有互补的缺失值: set.seed
我们正在尝试实现 ALM Rangers 在最新的 Visual Studio TFS Branching and Merging Guide 中描述的“基本双分支计划”。 .从指导: The bas
我在不同目录(3个不同名称)中有很多(3个只是一个例子)文本文件,如下所示: 目录:A,文件名:run.txt 格式:txt制表符分隔 ; file one 10 0.2 0.5 0.
我有一张包含学生等级关系的表: Student Grade StartDate EndDate 1 1 09/01/2009 NULL 2
我在学习 https://www.doctrine-project.org/projects/doctrine-orm/en/2.6/reference/working-with-associatio
我觉得我有世界上最简单的 SVN 用例: 我有一个文件,Test.java在 trunk SVN的。 我分行trunk至 dev-branch . 我搬家Test.java进入 com/mycompa
我有两个数据框,其中一些列名称相同,而另一些列名称不同。数据框看起来像这样: df1 ID hello world hockey soccer 1 1 NA NA
Elasticsearch 中是否缺少以扁平化形式(多个子/子aggs)返回结果的方法? 例如,当前我正在尝试获取所有产品类型及其状态(在线/离线)。 这就是我最终得到的: aggs [ { key:
如何合并如下所示的 map : Map1 = Map(1 -> Class1(1), 2 -> Class1(2)) Map2 = Map(2 -> Class2(1), 3 -> Class2(2)
我试图通过从netezza服务器导入数据来合并两个数据集。 以下是数据集,其数字为,ID为,字母为,名称为: 下表都是使用命令从netezza导入的: sqoop import --connect n
我有两个数组 $array1 = array('first', 'second', 'third', 'fourth'); $array2 = array('first', 'third', 'fou
我正在 SQL Server 中运行合并。在我的更新中,我只想在值发生更改时更新该行。有一个版本行在每次更新时都会递增。下面是一个例子: MERGE Employee as tgt USING (SE
我是一名优秀的程序员,十分优秀!