0

11ここから使用sketch.jsしています: http://intridea.github.io/sketch.js/および jquery 2.0.0

私のページには、次のように表示された画像のリストがあります。

<a href="http://url.to/image"><img src="http://url.to/image"><br><span class="background">click for background</span></a>

と a canvas、次のように設定します。

<canvas id="simple_sketch" style="border: 2px solid black;"></canvas>

関連するJavaScript :

var winwidth = 800;
var winheight = 600;
$('#simple_sketch').attr('width', winwidth).attr('height', winheight);

$('#simple_sketch').sketch();
$('.background').on('click', function(event) {
    event.preventDefault();
    var imgurl = $(this).parent().attr('href');
    console.log('imgurl: ' + imgurl);
    var n = imgurl.split('/');
    var size = n.length;
    var file = '../webkort/' + n[size - 1];
    var sigCanvas = document.getElementById('simple_sketch');
    var context = sigCanvas.getContext('2d');
    var imageObj = new Image();
    imageObj.src = imgurl;
    imageObj.onload = function() {
        context.drawImage(this, 0, 0,sigCanvas.width,sigCanvas.height);
    };
    alert('background changed');
});

背景は思い通りに変更されますが、 をクリックするたびに背景canvas画像がクリアされます。このスレッドの提案に従って: html5 canvas background image erase on mousemoveの116this.el.width = this.canvas.width();行目でコメントアウトしましたが、役に立ちませんでした。sketch.js

どんな助けでも大歓迎です!

編集: jsfiddle: http://jsfiddle.net/RXFX4/1/

EDIT:sketch.jsでこれを行う方法がわからなかったため、代わりに組み込み関数としてこれを行う機能を持つjqScribble(コメントに投稿されたリンク)を使用しました。

4

2 に答える 2