在鼠標懸停覆蓋圖像投影到畫布

https://jsfiddle.net/c309a2wo/在鼠標懸停覆蓋圖像投影到畫布

HTML

<canvas id="myCanvas" width="200" height="200"></canvas>

的javascript

var canvas = document.getElementById("myCanvas"); 

var ctx = canvas.getContext('2d'); 

ctx.fillStyle = "rgb(0,255,255)"; 
ctx.fillRect(0, 0, canvas.width, canvas.height); 

ctx.beginPath(); 
ctx.fillStyle = "rgb(200,0,0)"; 
ctx.arc(canvas.width/2, canvas.height/2, 50, 0, Math.PI*2); 
ctx.fill();

我想覆蓋的圖像（「close_icon.png」）到當鼠標懸停在畫布上時右上角的畫布將被移除，並在畫布上再次移除鼠標離開畫布。

Jquery可用，但我找不到在jsfiddle中添加它的選項。

可視化：

是否有一個簡單的方法來做到這一點？布朗尼指出，如果圖像可以淡入淡出。

來源

2016-01-23 AndrewB

的基本思想是在一個容器元素來包裝你canvas，然後添加僅在:hover上顯示的容器中的圖像。

var canvas = document.getElementById("myCanvas"); 
 

 
var ctx = canvas.getContext('2d'); 
 

 
ctx.fillStyle = "rgb(0,255,255)"; 
 
ctx.fillRect(0, 0, canvas.width, canvas.height); 
 

 
ctx.beginPath(); 
 
ctx.fillStyle = "rgb(200,0,0)"; 
 
ctx.arc(canvas.width/2, canvas.height/2, 50, 0, Math.PI*2); 
 
ctx.fill();

div { 
 
    position: relative; 
 
    display: inline-block; 
 
    } 
 

 
    canvas { 
 
    position: relative; 
 
    z-index: -1; 
 
    } 
 

 
    img { 
 
    position: absolute; 
 
    top: 4%; 
 
    right: 4%; 
 
    opacity: 0; 
 
    z-index: 2; 
 
    -webkit-transition: opacity 0.4s linear; 
 
    transition: opacity 0.4s linear; 
 
    } 
 

 
    div:hover img { 
 
    opacity: 1; 
 
    }

<div> 
 
<canvas id="myCanvas" width="200" height="200"></canvas> 
 
<img src="http://placehold.it/30x30"> 
 
</div>

Here'a working JSFiddle。

來源

2016-01-23 01:53:11

已更新爲淡入/淡出。 –

謝謝。寧願不添加額外的div，但這是一個非常簡潔的解決方案，所以我一定會使用它！ – AndrewB

您可以使用.hover添加<span class="cross">：

$("#myCancas").hover(function(){$(this).append($("<span class="cross"></span>"));});

，然後設置樣式，使用CSS：

span.cross{ 
    display: block; 
    width: 10px; 
    height: 10px; 
    background-image: url(path/to/cross/jpg); 
}

來源

2016-01-23 01:51:33 Trix

裹帆布它在具有位置外部容器，那麼無論你想相對於外包裝

HTML

<div id="canvas-wrap"> 
    <span id="canvas-icon"></span> 
    <canvas id="myCanvas" width="200" height="200"></canvas> 
</div>

CSS

#canvas-wrap{ 
    position:relative; 
    width:200px; height:200px 
} 
#canvas-icon{ 
    background:yellow; 
    width:32px; 
    height:32px; 
    position:absolute; 
    top:10px; 
    right:10px; 
    z-index:10; 
    display:none 
} 
#canvas-wrap:hover #canvas-icon{ 
    display:block 
}

可以定位圖標DEMO

來源

2016-01-23 01:55:40 charlietfl

在鼠標懸停覆蓋圖像投影到畫布

回答

相關問題