我正在尝试在另一个 Canvas 上绘制通过 javascript 创建的 Canvas 。但这对我不起作用，
这是我的代码，
<!DOCTYPE HTML>
<html>
<head>
</script>
<script>
window.onload = function(){
var can1 = document.createElement('canvas');
can1.width = 150;
can1.height = 140;
can1.style.cssText = 'top:2px;left:2px;border:2px solid black;';
var ctx1 = can1.getContext('2d');
var img=new Image();
img.src="images/211.jpg"
ctx1.drawImage(img,0,0);
var can = document.getElementById("c");
var ctx = can.getContext('2d');
ctx.drawImage(can1,0,0);
var canvas = document.getElementById("c");
window.open(canvas.toDataURL());
}
</script>
</head>
<body >
<canvas id="c" style = "position:absolute;top:150px;width:250px;height:350px;left:500px; border:2px solid black;"></canvas>
</body>
</html>
最佳答案
我认为问题在于，当您尝试将该图像绘制到 Canvas 中时，图像尚未准备好。所以如果你这样做它会完美地工作:
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
#myCanvas {
border: 1px solid #9C9898;
}
</style>
<script>
window.onload = function() {
var imageObj = new Image();
imageObj.src = "http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg";
var dynamicCanvas = document.createElement("canvas");
var dynamicContext = dynamicCanvas.getContext("2d");
dynamicCanvas .height="400";
dynamicCanvas.width="578";
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
imageObj.onload = function() {
dynamicContext.drawImage(imageObj, 69, 50);
context=context.drawImage(dynamicCanvas,69,50);
window.open(canvas.toDataURL());
};
};
</script>
</head>
<body>
<canvas id="myCanvas" width="578" height="400"></canvas>
</body>
</html>
并且您可以调整动态 Canvas 的高度和宽度。
如果您删除那个 window.open 语句，那就完美了。
但是canvas.toDataURL()有问题
当您尝试为本地文件执行 canvas.toDataURL() 时，它会出现安全错误(如果您通过谷歌浏览器检查它)即
Uncaught Error: SECURITY_ERR: DOM Exception 18
您可以了解有关此错误的更多信息:here (查看您是否收到此错误)。不管怎样，根本原因已经解决了，现在又出现了一个新问题 :D.. 祝你好运!!
关于javascript - 将 Canvas 绘制到另一个 Canvas 上不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11450178/