下のスニペットはcanvas
要素を使った例です。
しかし、おそらく質問者さんは通常のHTML要素で描画されている字形に対して、判定を行ないたいのだと思います。
それもcanvas
を使った方法の応用で出来るかもしれませんが、少し考えてみないと分かりません。
function text_shape(elm){
"use strict";
var ctx = elm.getContext("2d");
function set_size(){
var rect = elm.getBoundingClientRect();
elm.width = rect.width;
elm.height = rect.height;
}
function draw_text(){
var style = getComputedStyle(elm);
ctx.font = style.fontSize + " " + style.fontFamily;
ctx.fillStyle = style.color;
ctx.textAlign = "left";
ctx.textBaseline = "top";
ctx.fillText(elm.textContent, 0, 0);
}
function check_hover(ev){
var alpha = ctx.getImageData(ev.offsetX, ev.offsetY, 1, 1).data[3];
if(alpha){
elm.classList.add("text_shape_hover");
return;
}
hover_out();
}
function hover_out(){
elm.classList.remove("text_shape_hover");
}
function init(){
set_size();
draw_text();
}
elm.addEventListener("mousemove", check_hover);
elm.addEventListener("mouseout", hover_out);
window.addEventListener("resize", init);
init();
}
text_shape(document.getElementById("text"));
#text{
font-size: 2em;
font-family: serif;
color: blue;
width: 100%;
height: 1em;
}
.text_shape_hover{
-webkit-filter: hue-rotate(100deg);
filter: hue-rotate(100deg);
}
<canvas id="text">○● Text 文字</canvas>
上記スニペットでcanvas
要素に描画しているのは文字だけです。
ポインタ座標の透明度(アルファ値)を取得し、透明でなければ、そこは字形の上だと分かります。
マウスが動く度に下記のようにこれを判定し、字形の上に来たらtext_shape_hover
というクラスを設定しています。
var alpha = ctx.getImageData(ev.offsetX, ev.offsetY, 1, 1).data[3];
if(alpha){
elm.classList.add("text_shape_hover");
text_shape_hove
クラスには下記のようにスタイルを当てています。
canvas
要素のcolor
を変えても仕方ないので、フィルタを掛けて色を変えています。
.text_shape_hover{
-webkit-filter: hue-rotate(100deg);
filter: hue-rotate(100deg);
}