我可以將CSS效果添加到蒙版的畫布圖像中嗎？
[英]Can I add CSS effects to a masked Canvas image?
問題描述
如果我使用canvas元素完成了圖像蒙版，我如何將CSS應用於自己的蒙版，而不是孔畫布？ 這不可能嗎？
我正在嘗試用三角形圖像做一個投資組合。 當我將鼠標懸停在圖像上時，我想要一個小的彩色字段，以顯示沿三角形底線的一些文字。 我已經使用canvas元素進行了圖像蒙版以獲得三角形形狀。 所以我的問題是如何將css應用於三角形蒙版？ 我只能這樣才能應用於孔畫布，但由於圖像是三角形，我需要彈出字段在畫面之外切斷，如圖片所示。
我是新手，所以我很抱歉，如果這是一個愚蠢的問題:)
到目前為止，這是我的代碼：
HTML：
<body>
<h3>Masks</h2>
<ul id="portfolio">
<li><canvas id="canvas01" width="400" height="330"><img src="canvas01.png" id="image01" class="image" alt="" /></canvas><div>First</div></li>
<li><canvas id="canvas02" width="400" height="330"><img src="canvas02.png" id="image02" class="image" alt="" />Second</canvas></li>
<li><canvas id="canvas03" width="400" height="330"><img src="canvas03.png" id="image03" class="image" alt="" />Third</canvas></li>
</ul>
</body>
使用Javascript：
function masks() {
var canvas01 = document.getElementById("canvas01");
if (canvas01.getContext) {
var ctx = canvas01.getContext("2d");
//Load the image.
var img = document.getElementById("image01");
ctx.fillStyle = "#f30";
ctx.beginPath();
ctx.moveTo(canvas01.width / 2, 0);
ctx.lineTo(canvas01.width, canvas01.height);
ctx.lineTo(0, canvas01.height);
ctx.closePath();
ctx.clip();
ctx.drawImage(img,0,0);
}
var canvas02 = document.getElementById("canvas02");
if (canvas02.getContext) {
var ctx = canvas02.getContext("2d");
//Load the image.
var img = document.getElementById("image02");
ctx.fillStyle = "#f30";
ctx.beginPath();
ctx.moveTo(canvas02.width / 2, 0);
ctx.lineTo(canvas02.width, canvas02.height);
ctx.lineTo(0, canvas02.height);
ctx.closePath();
ctx.clip();
ctx.drawImage(img,0,0);
}
var canvas03 = document.getElementById("canvas03");
if (canvas03.getContext) {
var ctx = canvas03.getContext("2d");
//Load the image.
var img = document.getElementById("image03");
ctx.fillStyle = "#f30";
ctx.beginPath();
ctx.moveTo(canvas03.width / 2, 0);
ctx.lineTo(canvas03.width, canvas03.height);
ctx.lineTo(0, canvas03.height);
ctx.closePath();
ctx.clip();
ctx.drawImage(img,0,0);
}
};
1 個解決方案
解決方案1
3 已采納 2013-08-30 16:23:36
您不能將CSS應用於畫布上的蒙版。
您的三角形不是您可以操作的DOM對象。
你的三角形只是在畫布上繪制的一堆像素。
但是帆布能夠繪制3個標記的三角形圖像
下面的可重用功能包括：
- 要繪制的畫布的上下文
- 要繪制的圖像對象+剪輯
- 要在三角形底部繪制的文本
如果提供文本，則會繪制底部的紅色條和文本。
如果您不提供文本，則不會繪制條形圖和文本。
因此，您可以打開/關閉文本以響應鼠標懸停。
這是一個函數的代碼，它將繪制所有3個三角形
function draw(ctx,img,text){
ctx.beginPath();
ctx.moveTo(canvas.width / 2, 0);
ctx.lineTo(canvas.width, canvas.height);
ctx.lineTo(0, canvas.height);
ctx.closePath();
ctx.clip();
ctx.drawImage(img,0,0);
if(text){
ctx.fillStyle = "#f30";
ctx.fillRect(0,canvas.height-20,canvas.width,20);
ctx.fillStyle = "black";
ctx.font="14pt Verdana";
var textWidth=ctx.measureText(text).width;
ctx.fillText(text,(canvas.width-textWidth)/2,canvas.height-3);
}
}
這是代碼和小提琴： http ： //jsfiddle.net/m1erickson/S9vS8/
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
#canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var img=new Image();
img.onload=function(){
draw(ctx,img,"Hello!");
}
img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/sky-bg2.jpg";
function draw(ctx,img,text){
ctx.beginPath();
ctx.moveTo(canvas.width / 2, 0);
ctx.lineTo(canvas.width, canvas.height);
ctx.lineTo(0, canvas.height);
ctx.closePath();
ctx.clip();
ctx.drawImage(img,0,0);
if(text){
ctx.fillStyle = "#f30";
ctx.fillRect(0,canvas.height-20,canvas.width,20);
ctx.fillStyle = "black";
ctx.font="14pt Verdana";
var textWidth=ctx.measureText(text).width;
ctx.fillText(text,(canvas.width-textWidth)/2,canvas.height-3);
}
}
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="canvas" width=300 height=300></canvas>
</body>
</html>
[這里沒有jquery的代碼]
<!doctype html>
<html>
<head>
<style>
body{ background-color: ivory; padding:10px; }
#canvas{border:1px solid lightgray;}
</style>
<script>
window.onload=function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var img=new Image();
img.onload=function(){
draw(ctx,img,"Hello!");
}
img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/sky-bg2.jpg";
function draw(ctx,img,text){
ctx.beginPath();
ctx.moveTo(canvas.width / 2, 0);
ctx.lineTo(canvas.width, canvas.height);
ctx.lineTo(0, canvas.height);
ctx.closePath();
ctx.clip();
ctx.drawImage(img,0,0);
if(text){
ctx.fillStyle = "#f30";
ctx.fillRect(0,canvas.height-20,canvas.width,20);
ctx.fillStyle = "black";
ctx.font="14pt Verdana";
var textWidth=ctx.measureText(text).width;
ctx.fillText(text,(canvas.width-textWidth)/2,canvas.height-3);
}
}
}; // end window.onload
</script>
</head>
<body>
<canvas id="canvas" width=300 height=300></canvas>
</body>
</html>
我無法使用Javascript將圖像添加到畫布
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.