Question

我有一个图形应用程序，它覆盖了几个画布。我希望用户能够右键单击并保存图像。当用户现在这样做时，它只保存顶层画布（正确），但是错过了较低层。当右键单击发生时，合成多个画布的策略是什么？

谢谢，

PT

Answer 1

当用户右键单击顶部画布以保存图像时，策略将是在顶部画布上绘制所有较低的画布。

您可以使用 drawImage() 方法在另一个画布上绘制某个画布。

这是一个简单的例子，展示了如何做到这一点......

＆＃13;

var lowerCTX = document.querySelector('#lowerCanvas').getContext('2d');
var upperCTX = document.querySelector('#upperCanvas').getContext('2d');

//draw rect on lower canvas
lowerCTX.fillStyle = 'green';
lowerCTX.fillRect(20, 20, 50, 50);

//draw rect on upper canvas
upperCTX.fillStyle = 'red';
upperCTX.fillRect(130, 130, 50, 50);

//add right click event to upper canvas
upperCTX.canvas.onmousedown = function(e) {
   if (e.which === 3) {
      //draw lower canvas on upper canvas
      upperCTX.drawImage(lowerCTX.canvas, 0, 0);
   }
};

＆＃13;

body{margin:10px 0 0 0;overflow:hidden}#canvas_wrapper{display: inline-flex}canvas{border: 1px solid #ccc}#upperCanvas{margin-left: -202px}

＆＃13;

<div id="canvas_wrapper">
    <canvas id="lowerCanvas" width="200" height="200"></canvas>
    <canvas id="upperCanvas" width="200" height="200"></canvas>
</div>

＆＃13;

复制/粘贴HTML5画布

1 个答案: