如何填充图案(旋转25度)

时间:2013-07-30 08:56:37

标签: javascript jquery html5 html5-canvas php-gd

假设我有一张图片enter image description here

我希望用25度的enter image description here来填充它。

我在php GD中旋转图像,它给了我enter image description here

然后当我创建一个新模式并申请时。我得到了enter image description here

下面是代码

HTML

<h1>sleeve long normal</h1>
 <canvas id="sleevelongnormal" width=436 height=567></canvas>

JS

 function doD(var1,var2,var3) //var1=convas var2=img1 var3=img aka design
         {
            // alert(var3);
             t = document.getElementById(''+var1+'');
             ctxt = t.getContext('2d');


              var img1 = new Image();
              var img = new Image();
              img.onload = function () {

              img1.onload = function () {
                  //start();

                   ctxt.drawImage(img1, 0, 0);

                ctxt.globalCompositeOperation = "source-atop";

                var pattern = ctxt.createPattern(img, 'repeat');

                ctxt.rect(0, 0, sourceCanvas.width, sourceCanvas.height);
                ctxt.fillStyle = pattern;

                //var rotation = 90;
                //ctxt.rotate(rotation * Math.PI/180);
                ctxt.fill();

                ctxt.globalAlpha = .10;
                ctxt.drawImage(img1, 0, 0);
                ctxt.drawImage(img1, 0, 0);
                ctxt.drawImage(img1, 0, 0);

                  }
              img1.src = var2;
          }
          img.src = var3;

             //alert(t);
         }

我希望或多或少地达到这个目标 enter image description here

0 个答案:

没有答案