16

IMGタグ内で使用したい画像のサイズを変更する方法についていくつかのトリックを見てきましたが、Javascript内に画像変数を持ち、サイズを変更してからcontext.createPattern(image, "繰り返す"）。それを行う方法についてのヒントは見つかりませんでした。

http://karllarsson.batcave.net/moon.html で、私がやりたいことの画像付きの機能デモを見つけることができます。

Loktar のソリューションは良さそうです。私はまだ正しい側面を修正する時間がありませんでしたが、今ではそれを行う方法を知っています. もう一度ありがとう。これが実際のデモhttp://karllarsson.batcave.net/moon2.htmlです

これは、私も欲しいのでうまくいかない2行です。

image.width = サイド * 2;
image.height = サイド * 2;

function drawShape() {
    try {
        var canvas = document.getElementById('tutorial');                 
        var image = new Image();                                          
        image.src = "http://xxx.yyy.zzz/jjj.jpg";                         
        image.width = side * 2;                                           
        image.height = side * 2;                                          

        if (canvas.getContext){
            var ctx = canvas.getContext('2d');                            
            ctx.clearRect(0, 0, canvas.width, canvas.height);             
            ctx.fillStyle = ctx.createPattern(image, "repeat");           
            ctx.beginPath();                                              
            var centerX = canvas.width / 2 - side / 2;                    
            var centerY = canvas.height / 2 - side / 2;                   
            ctx.rect(centerX, centerY, side, side);                       
            ctx.fill();                                                   
        } else {
            alert('You need Safari or Firefox 1.5+ to see this demo.');   
        }
    } catch (err) {
        console.log(err);                                                 
    }
}
4

3 に答える 3

23

できることは、一時的なキャンバスを作成し、必要な寸法で画像をそれにコピーし、その一時的なキャンバスを画像自体ではなくパターンとして使用することです。

ライブデモ

最初にキャンバスを作成します

          var tempCanvas = document.createElement("canvas"),
              tCtx = tempCanvas.getContext("2d");

          tempCanvas.width = side*2;
          tempCanvas.height = side*2;

画像を描画して、必要なスケーリングされたサイズにします

          tCtx.drawImage(image,0,0,image.width,image.height,0,0,side*2,side*2);

そして今作成したキャンバスをパターンとして使用します

          ctx.fillStyle = ctx.createPattern(tempCanvas, "repeat");

完全なコード

編集により、より一般的な再利用可能な例が作成されました

 function drawPattern(img, size) {
     var canvas = document.getElementById('canvas');

     canvas.height = 500;
     canvas.width = 500;

     var tempCanvas = document.createElement("canvas"),
         tCtx = tempCanvas.getContext("2d");

     tempCanvas.width = size;
     tempCanvas.height = size;
     tCtx.drawImage(img, 0, 0, img.width, img.height, 0, 0, size, size);

     // use getContext to use the canvas for drawing
     var ctx = canvas.getContext('2d');
     ctx.clearRect(0, 0, canvas.width, canvas.height);
     ctx.fillStyle = ctx.createPattern(tempCanvas, 'repeat');

     ctx.beginPath();
     ctx.rect(0,0,canvas.width,canvas.height);
     ctx.fill();

}

var img = new Image();
img.src = "http://static6.depositphotos.com/1070439/567/v/450/dep_5679549-Moon-Surface-seamless.jpg";
img.onload = function(){
    drawPattern(this, 100);
}
于 2012-12-19T22:32:54.067 に答える