ant't'putImageData'与来自其他画布的'imagedata'

时间:2016-02-20 13:08:02

标签: javascript html canvas getimagedata putimagedata

我在同一页面上有两个画布,有不同的ID。我使用第一个画布绘制图像,第二个就像一张专辑,你可以看到你的所有画作......当我使用var Img = painter.getImageData(0, 0, 100, 100)album.putImageData(Img, 0, 0)时,它不起作用。 Plz帮忙!

代码:(可能有一些错误,因为这是现在手写的,我原来的代码太长了)

HTML:

<html>
<body>
<canvas id="album" width="1000" height="1000"></canvas>
<canvas id="painter" width="100" height="100" onclick="draw(event)"></canvas>
<button onclick="sub()">Submit to album</button>
</body>
</html>

JS:

var album = document.getElementById("ambum").getContext("2d");
var painter = document.getElementById("painter").getContext("2d");
var SRC = "";

function draw(evt) {
  var X = evt.clientX;
  var Y = evt.clientY;
  painter.beginpath();
  painter.fillStyle = "red";
  painter.fillRect(X - 1000, Y, 100, 100);
}
function sub() {
  var SRC = painter.getImageData(1000, 0, 100, 100);
  album.beginPath();
  album.putImageData(SRC, 0, 0);
}

0 个答案:

没有答案