1. дома
  2. Вопрос и ответ
  3. Маскирование холста с полупрозрачным png

Маскирование холста с полупрозрачным png

2012-02-18 4 views
0

Я хотел бы создать веб-приложение, где пользователь может при наведении холста с черно-белым изображением раскрыть цвета.Маскирование холста с полупрозрачным png

Моя первая попытка состояла в том, чтобы установить изображение css на холсте с изображением bw и показать цветное изображение с нарисованным кругом на холсте. Таким образом, круг имеет сплошные края, но то, что я хочу, это круг с выцветшими краями. Есть ли способ показать цветное изображение с помощью полу-tansparent png вместо сплошного холста?

Надеюсь, this image объяснит больше, как я хочу, чтобы все работало.

источник

2012-02-18 Lavve

ответ

0

Начался небольшой проект с каркасом Processing.js. Все еще понадобится много работы. Но, может быть, это указывает вам в правильном направлении:

EDIT: Некоторые дополнительные правки в коде

<!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>

Вам нужно два изображения для преобразования приложений это: Test.JPG и testgrey.jpg.

источник

2012-02-18 12:52:44 Alex

0

Вы можете попробовать сложные операции графического контекста

http://www.html5canvastutorials.com/advanced/html5-canvas-global-composite-operations-tutorial/

демо: http://jsfiddle.net/HdyBG/7/

А с помощью функции createRadialGradient вы можете создать градиентную заливку.

демо: http://jsfiddle.net/AuQTD/7/

Я надеюсь, что вы можете добиться того, что вам нужно, объединив эти два.

источник

2012-02-19 09:13:08 Diode

Смежные вопросы

 Смежные вопросы