HTML5画布图案绘制延迟

debugcn 发表于 Dev

塔米德·侯赛因博士

我用image（在此处输入图片说明）绘制一个画布（又名画布1），然后将其旋转25度。然后我以旋转的画布为另一个画布（又称为画布2）制作图案。然后我画这个。并用新创建的图案填充fillstyle。我注意到以下代码中间是否有警报

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

然后Firefox会提供正确的输出，但如果我不提醒，它不会给我正确的输出。crome没有向我显示正确的输出。

我需要延迟吗？

这是我尝试过的。

的HTML

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

            </div>

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/

扎克·索西耶（Zach Saucier）

已编辑

抱歉，我完全误解了您的问题。我刚才回过头去，看到了您发布的最后一个问题以及您要实现的目标。

要获得所需的功能，您只需创建一个功能，而无需两个。我没有在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选项卡打开后，您可能必须单击run，当另一个选项卡被聚焦时，canvas不喜欢生成内容

我尝试解决问题，包括

使生成的画布真正很大（可以，但是有时会加载时间/崩溃页面）
旋转后在生成的画布中翻译图片，但效果不尽如人意
提出了一个功能，该功能可以根据旋转后的第二画布尺寸更改宽度/高度，以覆盖整个第一画布，这是迄今为止最有希望的方法，但是我没有时间或渴望制定出一个好的解决方案

可以说，如果角度必须是动态的，则可以对其进行处理。否则，只需使用变通角度/生成的画布尺寸

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于2021-06-2

我来说两句

0条评论

登录后参与评论

来自分类Dev

Related 相关文章

文章

HTML5画布图案绘制延迟

HTML5画布图案绘制延迟

在HTML5画布上绘制多个圆的问题

HTML5画布使圆圈在画布内闪烁

禁用html5画布

禁用html5画布

在HTML5画布中的鼠标移动上绘制半透明线

如何获取在HTML5画布上绘制的图像的X / Y值？

如何使用HTML5画布绘制镜头横截面？

RXJS在HTML5画布上绘制线条

在背景缩放上绘制HTML5画布

在html5画布上绘制多个粒子元素而无需渲染终止

HTML5画布脉动

如何使HTML5画布图案fillstyle与绘制的对象一起移动？

了解HTML5画布

查找在HTML5画布中绘制的对象的位置

使用for循环绘制HTML5画布圆

在HTML5画布二次曲线上绘制箭头

HTML5画布格仔图案

在HTML5画布上绘制多个图像有时不起作用

实时HTML5画布绘制

重用HTML5画布的绘制内容的最有效方法

清除画布后未绘制图像（html5画布）

无法在html5画布上绘制

html5画布绘制多个图像

在背景缩放上绘制HTML5画布

HTML5画布脉动

连续绘制HTML5画布

HTML5画布-绘制环形扇形

html5画布图案尺寸波动

html5画布部分绘制