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(コメントに投稿されたリンク)を使用しました。