将一个画布绘制到另一个不起作用的画布上

Draw a canvas into another canvas not working

本文关键字：另一个 不起作用 布绘制 一个 绘制      更新时间：2023-09-26

我正试图在另一个画布上绘制一个通过javascript创建的画布。但这对我不起作用，

这是我的代码，

    <!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>

我认为问题是，当您试图将该图像绘制到画布中时，图像还没有准备好。因此，如果你这样做，它会完美地工作：

<!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>

并且您可以调整动态画布的高度和宽度。

如果你去掉window.open语句，它就完美了。

但是canvas.toDataURL() 有问题

当你尝试为本地文件执行canvas.toDataURL()时，它会给出一个安全错误（如果你通过googlechrome检查它），即

Uncaught Error: SECURITY_ERR: DOM Exception 18

您可以在此处了解有关此错误的更多信息（看看你是否收到了这个错误）。不管怎样，根本原因已经解决了，现在又出现了一个新问题：D。。不管怎样，祝你好运！！

使用MJQ的原始代码显示不正确的图像的问题是，他没有直接通过属性来说明第二个画布的大小，只通过样式来说明。因此，浏览器创建了一个默认大小的画布（FF为300x150），然后将其拉伸到250x350。

因此，以下修改将解决图像显示问题：

<canvas id="c" width="250" height="350" style = "position:absolute;top:150px;width:250px;height:350px;left:500px; border:2px  solid black;"></canvas>

也许这对将来的某个人会有所帮助。

你在想什么？您的代码正在工作。

（如果我答对了你的问题）我在后面加了以下几行

can1.style.cssText='border:2px solid black;';

：

        var ctx1 = can1.getContext('2d');
        ctx1.rect(50, 50, 500, 500);
        ctx1.fillStyle = '#8ED6FF';
        ctx1.fill();

执行死刑时，我看到里面有一个美丽的矩形！！你在使用支持html5的浏览器吗？？

相关文章：