gpt4 book ai didi

javascript - 合并 Canvas 和背景

转载 作者:行者123 更新时间:2023-12-02 16:09:49 24 4
gpt4 key购买 nike

我有一个带有 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/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com