1
イメージにカーソルを合わせると、十字形のカスタムカーソルを作成するjs-functionがあります。次のようになります。カスタムJSカーソル上にカーソルの起点を設定する
function makeCursor() {
var cursor = document.createElement('canvas'),
ctx = cursor.getContext('2d');
cursor.width = 20;
cursor.height = 20;
ctx.strokeStyle = '#b89552';
ctx.lineWidth = 3;
ctx.lineCap = 'round';
ctx.moveTo(0, 20);
ctx.lineTo(20, 0);
ctx.moveTo(0, 0);
ctx.lineTo(20, 20)
ctx.stroke();
var aboveimage = document.getElementsByClassName("aboveimage");
for(i=0;i<aboveimage.length;i++){
aboveimage[i].style.cursor = 'url(' + cursor.toDataURL() + '), auto';
}
}
問題は、十字の中心がカーソルの位置にないことです。私は "moveTo"と "lineTo"を20ではなく0と10の代わりに-10に変更しようとしましたが、それは視覚的な20x20px領域の外に十字を移動しただけです。カスタムカーソルの実際の領域を移動して、十字の中心がカーソルの位置に来るようにするにはどうすればよいですか？あなたが必要とする値にxとyの位置を設定し