Javascript Html5画布模式绘制延迟

我用image（）绘制画布（也称画布1），然后将其旋转25度。然后我使用旋转的画布为另一个画布（又名画布2）制作一个图案。然后我画这个。并用新创建的填充图案填充填充样式。我注意到在下面的代码

中间是否有警报。

 finalsleeve_ctx.globalCompositeOperation = "source-atop";
           /*****************************************
              alert(sleeve.toDataURL('image/png'));
            *****************************************/
              var pattern = finalsleeve_ctx.createPattern(sleeve, 'repeat');

然后firefox会给出一个正确的输出，但如果我没有发出警报，它不会给出正确的输出。crome没有显示正确的输出

我需要延期吗

这是我试过的

HTML

这是小提琴。

---

编辑

对不起，我完全误解了你的问题。我刚才回去看了你贴的最后一个问题和你想要达到的目标

要获得所需的功能，只需创建一个功能，而不需要两个。我没有在HTML中使用第二个画布，而是使用javascript创建了一个临时画布

下面是简化的功能代码

<canvas id="sleeve" width='436' height='567'></canvas>

var sleeve = document.getElementById('sleeve');
var ctx = sleeve.getContext('2d');

function rotator2(var2, var3) {
    // Draw the original sleeves
    var imageObj_rotator2 = new Image();
    imageObj_rotator2.src = var2;
    imageObj_rotator2.onload = function () {
        var imgsleeve = new Image();
        imgsleeve.src="http://i.stack.imgur.com/FoqGC.png";
        ctx.drawImage(imgsleeve,0,0);

    // Create a second temporary canvas
        var pattern = document.createElement('canvas');
        pattern.width = 500;
        pattern.height = 500;
        var pctx = pattern.getContext('2d');
   // Make the pattern that fills the generated canvas
        var pattern_rotator2 = pctx.createPattern(imageObj_rotator2, "repeat");
        pctx.fillStyle = pattern_rotator2; 
        pctx.rotate(var3 * Math.PI / 180);
   // Fill the generated canvas with the rotated image pattern we just created
        pctx.fillRect(0, 0, pattern.width, pattern.height);

   // Create a pattern of the generated canvas
        var patterned = ctx.createPattern(pattern, "repeat");
   // Fills in the non-transparent part of the image with whatever the 
   // pattern from the second canvas is
        ctx.globalCompositeOperation = "source-in";
        ctx.fillStyle = patterned;
        ctx.fillRect(0, 0, sleeve.width, sleeve.height);
    }
}

rotator2('http://i.stack.imgur.com/fvpMN.png', '45')

var-sleeve=document.getElementById（'sleeve'）；
var ctx=sleeve.getContext（'2d'）；
函数旋转器2（var2，var3）{
//画出原来的袖子
var imageObj_rotator2=新图像（）；
imageObj_rotator2.src=var2；
imageObj_rotator2.onload=函数（）{
var imgsleeve=新图像（）；
imgsleeve.src=”http://i.stack.imgur.com/FoqGC.png";
ctx.drawImage（imgsleeve，0,0）；
//创建第二个临时画布
var模式=document.createElement（'canvas'）；
图案宽度=500；
高度=500；
var pctx=pattern.getContext（'2d'）；
//制作填充生成画布的图案
var pattern_rotator2=pctx.createPattern（imageObj_rotator2，“repeat”）；
pctx.fillStyle=图案旋转器2；
pctx.旋转（var3*Math.PI/180）；
//用我们刚刚创建的旋转图像填充生成的画布
pctx.fillRect（0,0，pattern.width，pattern.height）；
//创建生成的画布的图案
var patterned=ctx.createPattern（pattern，“repeat”）；
//在图像的不透明部分填充
//第二张画布上的图案是
ctx.globalCompositeOperation=“来源于”；
ctx.fillStyle=图案化；
ctx.fillRect（0，0，袖子宽度，袖子高度）；
}
}
旋转器2（'http://i.stack.imgur.com/fvpMN.png', '45')

这项技术工作正常，但只适用于某些角度。设置为45度。正如您所见，存在一个问题：袖子的一部分变白了。但是，如果你将学位改为15，效果就不错了。这是因为当图像在创建的画布中旋转时，在重复之前会留下空白。要直接查看此问题，请将已创建画布的宽度和高度更改为30（图像的默认宽度/高度）

注意：一旦JSFIDLE选项卡打开，您可能必须单击run，画布不喜欢在另一个选项卡处于焦点时生成内容

我试着解决这个问题，包括

• 使生成的画布非常大（这可以工作，但会减少负载） 时间/崩溃页面（有时）
• 旋转后在生成的画布中平移图片 这和我希望的不一样
• 提供了一个功能来更改宽度/高度以覆盖 整个第一个画布基于旋转的第二个画布维度，这是迄今为止最有希望的，但我没有时间或愿望来制定一个好的解决方案

所有这些，如果角度必须是动态的，你可以为它做一个函数。否则，只需使用一个变通角度/生成的画布尺寸

>以下是一个用于填充旋转图案的工作解决方案，在任何角度都不使用白色

        var sleeve = document.getElementById('sleeve');
    var ctx = sleeve.getContext('2d');

    function rotator2(var2, var3) {
      var x =0;
      var y=0;

     //pattern size should be grater than height and width of object so that white space does't appear.
      var patternSize =  sleeve.width+ sleeve.height;

      // Draw the original sleeves
      var imageObj_rotator2 = new Image();
      imageObj_rotator2.src = var2;
      imageObj_rotator2.onload = function () {
      var imgsleeve = new Image();
      imgsleeve.src="http://i.stack.imgur.com/FoqGC.png";
      ctx.drawImage(imgsleeve,0,0);

      // Create a second temporary canvas
      var pattern = document.createElement('canvas');
      pattern.width = sleeve.width;
      pattern.height = sleeve.height;
      var pctx = pattern.getContext('2d');
      // Make the pattern that fills the generated canvas
      var pattern_rotator2 = pctx.createPattern(imageObj_rotator2, "repeat");
      pctx.fillStyle = pattern_rotator2; 

      //moving rotation point to center of target object.
      pctx.translate(x+ sleeve.width/2, y+sleeve.height/2);
      pctx.rotate(var3 * Math.PI / 180);

     // Fill the generated canvas with the rotated image pattern we just created and expanding size from center of rotated angle
      pctx.fillRect(-patternSize/2, -patternSize/2, patternSize, patternSize);

      // Create a pattern of the generated canvas
      var patterned = ctx.createPattern(pattern, "no-repeat");
      // Fills in the non-transparent part of the image with whatever the 
      // pattern from the second canvas is
      ctx.globalCompositeOperation = "source-in";
      ctx.fillStyle = patterned;
      ctx.fillRect(x, y, sleeve.width, sleeve.height);
    }
    }

    rotator2('http://i.stack.imgur.com/fvpMN.png', '50')

<canvas id="sleeve" width='436' height='567'></canvas>

var sleeve = document.getElementById('sleeve');
var ctx = sleeve.getContext('2d');

function rotator2(var2, var3) {
    // Draw the original sleeves
    var imageObj_rotator2 = new Image();
    imageObj_rotator2.src = var2;
    imageObj_rotator2.onload = function () {
        var imgsleeve = new Image();
        imgsleeve.src="http://i.stack.imgur.com/FoqGC.png";
        ctx.drawImage(imgsleeve,0,0);

    // Create a second temporary canvas
        var pattern = document.createElement('canvas');
        pattern.width = 500;
        pattern.height = 500;
        var pctx = pattern.getContext('2d');
   // Make the pattern that fills the generated canvas
        var pattern_rotator2 = pctx.createPattern(imageObj_rotator2, "repeat");
        pctx.fillStyle = pattern_rotator2; 
        pctx.rotate(var3 * Math.PI / 180);
   // Fill the generated canvas with the rotated image pattern we just created
        pctx.fillRect(0, 0, pattern.width, pattern.height);

   // Create a pattern of the generated canvas
        var patterned = ctx.createPattern(pattern, "repeat");
   // Fills in the non-transparent part of the image with whatever the 
   // pattern from the second canvas is
        ctx.globalCompositeOperation = "source-in";
        ctx.fillStyle = patterned;
        ctx.fillRect(0, 0, sleeve.width, sleeve.height);
    }
}

rotator2('http://i.stack.imgur.com/fvpMN.png', '45')

        var sleeve = document.getElementById('sleeve');
    var ctx = sleeve.getContext('2d');

    function rotator2(var2, var3) {
      var x =0;
      var y=0;

     //pattern size should be grater than height and width of object so that white space does't appear.
      var patternSize =  sleeve.width+ sleeve.height;

      // Draw the original sleeves
      var imageObj_rotator2 = new Image();
      imageObj_rotator2.src = var2;
      imageObj_rotator2.onload = function () {
      var imgsleeve = new Image();
      imgsleeve.src="http://i.stack.imgur.com/FoqGC.png";
      ctx.drawImage(imgsleeve,0,0);

      // Create a second temporary canvas
      var pattern = document.createElement('canvas');
      pattern.width = sleeve.width;
      pattern.height = sleeve.height;
      var pctx = pattern.getContext('2d');
      // Make the pattern that fills the generated canvas
      var pattern_rotator2 = pctx.createPattern(imageObj_rotator2, "repeat");
      pctx.fillStyle = pattern_rotator2; 

      //moving rotation point to center of target object.
      pctx.translate(x+ sleeve.width/2, y+sleeve.height/2);
      pctx.rotate(var3 * Math.PI / 180);

     // Fill the generated canvas with the rotated image pattern we just created and expanding size from center of rotated angle
      pctx.fillRect(-patternSize/2, -patternSize/2, patternSize, patternSize);

      // Create a pattern of the generated canvas
      var patterned = ctx.createPattern(pattern, "no-repeat");
      // Fills in the non-transparent part of the image with whatever the 
      // pattern from the second canvas is
      ctx.globalCompositeOperation = "source-in";
      ctx.fillStyle = patterned;
      ctx.fillRect(x, y, sleeve.width, sleeve.height);
    }
    }

    rotator2('http://i.stack.imgur.com/fvpMN.png', '50')