、各リダイレクトを、私はこのコードのスニペットを持って

function draw() { 
 
    var canvas = document.getElementById('navigation'); 
 
    if(canvas.getContext) { 
 
    var ctx = canvas.getContext('2d'); 
 

 
    ctx.beginPath(); 
 
    //shape 1 
 
    ctx.moveTo(300, 1120); 
 
    ctx.lineTo(230, 1070); 
 
    ctx.lineTo(160, 880); 
 
    ctx.lineTo(170, 770); 
 
    ctx.lineTo(260, 640); 
 
    ctx.lineTo(350, 710); 
 
    ctx.lineTo(360, 820); 
 
    //shape 2 
 
    ctx.moveTo(340, 1050); 
 
    ctx.lineTo(390, 820); 
 
    ctx.lineTo(450, 710); 
 
    ctx.lineTo(450, 810); 
 
    ctx.fill(); 
 
    } 
 
}

<html> 
 
    <head> 
 
    </head> 
 
    <body onload="draw();"> 
 
    <canvas id="navigation" width="1500" height="1500"></canvas> 
 
    </body> 
 
</html>

JavaScriptのキャンバスオブジェクトの外にボタンを作成し、それが2つの独立してクリック可能なボタンを形作る1を作成し、成形することが可能だ場合、私は思っていました別のウェブページにここで

出典

2017-12-13 Tony White

試しましたか？ –

キャンバス要素は純粋に図形を描画するためのものであり、ブラウザはその要素にアクセスすることができないため、キャンバス内の図形にアクセスすることはできません。代わりに、私は

キャンバスオブジェクトを自分で追跡するためのコードを書かなければならないか、ヘルパーライブラリを探す必要があります：https://stackoverflow.com/questions/19055290/html5-canvas-mouseover-event –

実験的な機能（クリップ・パス、CSSプロパティ）を使用しているが... SVGオブジェクトが使用されます代わりに、ここでキャンバスを使用しての...それを達成するための別の方法である

<style type="text/css"> 
 
body { margin: 0; } 
 
</style> 
 
<style type="text/css"> 
 
svg { 
 
\t display: block; 
 
\t height: 0; 
 
} 
 
</style> 
 
<svg> 
 
\t <defs> 
 
\t \t <clipPath id="c1"> 
 
\t \t \t <path 
 
\t \t \t \t d=" 
 
\t \t \t \t M 300, 1120 
 
\t \t \t \t L 230, 1070 
 
\t \t \t \t L 160, 880 
 
\t \t \t \t L 170, 770 
 
\t \t \t \t L 260, 640 
 
\t \t \t \t L 350, 710 
 
\t \t \t \t L 360, 820 
 
\t \t \t \t Z 
 
\t \t \t \t M 340, 1050 
 
\t \t \t \t L 390, 820 
 
\t \t \t \t L 450, 710 
 
\t \t \t \t L 450, 810 
 
\t \t \t \t Z 
 
\t \t \t "/> 
 
\t \t </clipPath> 
 
\t </defs> 
 
</svg> 
 
<style type="text/css"> 
 
a { 
 
\t display: block; 
 
\t width: 1500px; 
 
\t height: 1500px; 
 
\t background: black; 
 
\t transition: all .2s; 
 
\t font-size: 0; 
 
    clip-path: url(#c1); 
 
} 
 
a:hover { 
 
\t background: lime; 
 
} 
 
</style> 
 
<a href="#1">Click me...</a>

出典

2017-12-13 19:02:17

これは私がいた完璧な解決策です探している。私はJSにとってとても新しいので、SVGが事実であるかどうかはわかりませんでしたが、これは私がやろうとしていたものです。あなたが作成したコードを変更すると、2番目のシェイプの新しい 'clipPath'を作成し、別の' href'を使用しました。それから私は絶対に設定された位置を持つdivでそれを包みました。このようにして、私はクリスタルのようなネガティブなパネルを構成したいと思ったすべての異なる形を重ねました。解決策と正しい方向の大きなナッジについてありがとうございます。 –

よくsvgはjsではありませんが、これはjsで達成しようとしていたもの –

、各リダイレクトを、私はこのコードのスニペットを持って

答えて

関連する問題