私はキャンバスを白黒画像でホバーすると、その色を明らかにすることができるウェブアプリを作りたいと思っています。キャンバスを半透明のpngでマスキングする
私の最初の試みは、bw画像でキャンバスにCSSの背景画像を設定し、キャンバスに描画された円でカラー画像を表示することでした。このように円は堅い辺を持っていますが、私が望むのは、ぼやけた辺を持つ円です。固体のキャンバスサークルではなく、半透明のPNGでカラー画像を表示する方法はありますか？
うまくいけば、私は物事をもっと働かせたいと考えています。this image
これは質問への直接的な回答ではありませんが、キャンバスからsvgへの切り替えについて考えましたか？ svgには素晴らしいフィルター機構が組み込まれています。現在のクロムとFirefoxのバージョンでサポートされています。 IE10もそうです。ここで
は例のページです：
http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-on_svg-filter-effects.htm
processing.jsフレームワークと少しプロジェクトを開始しました。まだ多くの作業が必要になります。しかし、多分、それは正しい方向にあなたを指す：
EDIT：test.jpgとtestgrey.jpg：コード内のいくつかの追加の編集
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="processing-1.3.6.js"></script>
</head>
<body style="background-color:blue">
<div id="container" style="background-image: url('testgrey.jpg');overflow:hidden;background-clip:content-box;width: 400px;height: 400px" >
<canvas id="test" width="400" height="400"></canvas>
</div>
<script type="text/processing" data-processing-target="test">
/* @pjs preload="test.jpg"; */
/* @pjs transparent=true; */
int nX, nY;
int radius = 40;
double powRadius = Math.pow(radius,2);
void setup()
{
size(400,400);
frameRate(25);
background(0,0,0,0);
a = loadImage("test.jpg");
}
void draw(){
int left = nX - radius;
int right = left + radius * 2;
int top = nY - radius;
int bottom = top + radius * 2;
for (int j = top; j <= bottom; ++j)
{
for (int k = left; k <= right; ++k)
{
double dist = Math.pow(nX - k, 2.0) + Math.pow(nY - j, 2.0);
if (dist <= powRadius)
{
color original= a.get(k,j);
int newAlpha = 255-dist/powRadius*255;
if(alpha(get(k,j))<newAlpha){
color toDraw = color(red(original),green(original),blue(original),newAlpha);
set(k,j,toDraw);
}
}
}
}
}
void mouseMoved(){
nX = mouseX;
nY = mouseY;
}
</script>
</body>
</html>
あなたはこれをexcuteする2枚の画像を必要とします。
あなたはデモ
http://www.html5canvastutorials.com/advanced/html5-canvas-global-composite-operations-tutorial/
グラフィックスコンテキストの複合操作を試すことができます。http://jsfiddle.net/HdyBG/7/
そして、あなたはグラデーション塗りつぶしを作成することができる機能createRadialGradientを使用。
デモ：http://jsfiddle.net/AuQTD/7/
私はあなたがこれら二つを組み合わせることにより、必要なものを達成することができます願っています。