javascript - Html5画布图案绘制延迟

Question

我用 image() 画了一个画布（又名画布 1），然后将其旋转 25 度。然后我用旋转的画布为另一个画布（又名画布 2）制作图案。然后我画这个。并用新创建的图案填充填充样式。我注意到下面代码中间是否有警报

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

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

我需要延迟吗？

这是我尝试过的。

HTML

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

            </div>

JS

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

var finalsleeve = document.getElementById('finalsleeve');
var finalsleeve_ctx = finalsleeve.getContext('2d');
 function rotator2(var2,var3) 
{
   sleeve.width=sleeve.width;
   var imageObj_rotator2 = new Image();
   imageObj_rotator2.onload = function ()
   {
    var pattern_rotator2 = sleeve_ctx.createPattern(imageObj_rotator2, "repeat");
    sleeve_ctx.fillStyle = pattern_rotator2;
    sleeve_ctx.rect(0, 0, sleeve.width, sleeve.height);
    sleeve_ctx.rotate(var3 * Math.PI/180);
    sleeve_ctx.fill();
    }
    imageObj_rotator2.src = var2;

}
    function drawSleeve()
    {
      finalsleeve.width = finalsleeve.width;
      var imgsleeve = new Image();
      imgsleeve.src="http://i.stack.imgur.com/FoqGC.png";
      finalsleeve_ctx.drawImage(imgsleeve,0,0);
      finalsleeve_ctx.globalCompositeOperation = "source-atop";
      alert(sleeve.toDataURL('image/png'));
      var pattern = finalsleeve_ctx.createPattern(sleeve, 'repeat');
      finalsleeve_ctx.rect(0, 0, sleeve.width, sleeve.height);
      finalsleeve_ctx.fillStyle = pattern;
      finalsleeve_ctx.fill();
      finalsleeve_ctx.globalAlpha = .10;
      finalsleeve_ctx.drawImage(imgsleeve, 0, 0);
      finalsleeve_ctx.drawImage(imgsleeve, 0, 0);
      finalsleeve_ctx.drawImage(imgsleeve, 0, 0);
    }
rotator2('http://i.stack.imgur.com/fvpMN.png','25');
drawSleeve();

这是小提琴。 http://jsfiddle.net/EbBHz/

Answer 1

已编辑

对不起，我完全误解了你的问题。我刚刚回去，看到了您发布的最后一个问题以及您要实现的目标。

要获得您想要的功能，您只需创建一个功能，您不需要两个。我没有在 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')

该技术工作正常，但仅适用于某些角度。这是设置为 45 度的演示。如您所见，有一个问题：袖子的一部分变白了。但是，如果您像这样将度数更改为 15 ，则效果很好。这是因为当图像在创建的画布中旋转时，它会在重复之前留下空白。要直接查看此问题，请将创建的画布的宽度和高度更改为 30（图像的默认宽度/高度），如下所示

注意：一旦打开 jsfiddle 选项卡，您可能必须单击运行，当另一个选项卡聚焦时，画布不喜欢生成内容

我尝试解决问题，包括

• 使生成的画布非常大（这可行，但有时会杀死加载时间/崩溃页面）
• 旋转后在生成的画布中翻译图片，这不像我希望的那样工作
• 想出一个功能来改变宽度/高度以根据旋转的第二画布尺寸覆盖整个第一画布，这是迄今为止最有希望的，但我没有时间或渴望解决一个好的问题解决方案

话虽如此，如果角度必须是动态的，您可以为它设计一个函数。否则只需使用解决方法角度/生成的画布尺寸

Answer 2

最终结果> 这是一个在任何角度都没有白色的填充旋转图案的工作解决方案

        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')