附上一個demo，我想要讓文字浮上來，探照燈部分高亮，大神給我一點思路吧??！
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>剪輯區域--demo4</title>
<style>
*{margin: 0;padding: 0}
canvas{display: block;margin: 50px auto;border:solid 1px grey;}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
var canvas = document.getElementById('canvas');
canvas.width = 800;
canvas.height = 500;
var cxt = canvas.getContext('2d');
//填充canvas
function drawRect(cxt){
cxt.fillStyle = 'rgba(1,1,1)';
cxt.fillRect(0,0,canvas.width,canvas.height);
}
//探照燈,x,y為鼠標相對canvas的坐標
function drawArc(cxt,x,y,r){
cxt.clearRect(0,0,canvas.width,canvas.height);
drawRect(cxt);
cxt.save();
cxt.arc(x,y,r,0,2*Math.PI);
cxt.fillStyle = '#fff';
cxt.fill();
cxt.clip();
drawText(cxt)
cxt.restore();
}
//繪制文字
function drawText(cxt){
//繪制三行文字
cxt.clearRect(0,0,canvas.width,canvas.height)
cxt.beginPath();
cxt.font = '20px 隸書';
cxt.fillStyle = 'green';
cxt.fillText('生命，就像是一張借記卡，從你呱呱墜地，還未有名字的時候，你生命的借記卡就已經毫不延遲的啟動了它的業務。',0,50)
cxt.fillText('儲存在生命借記卡上的數字，就是你這一生所有的時光。',0,100)
cxt.fillText('幸好不知道，我們才會一邊消費著卡額，一邊無憂無慮的生活。',0,150)
}
canvas.onmousemove = function(event){
//計算出鼠標相對canvas的位置
clientX = event.clientX;
clientY = event.clientY;
curX = clientX - this.offsetLeft;
curY = clientY - this.offsetTop;
drawArc(cxt,curX,curY,50)
}
canvas.onmouseout = function(){
cxt.clearRect(0,0,canvas.width,canvas.height);
drawRect(cxt);
}
drawRect(cxt)
</script>
</body>
</html>
2017-08-21
不太清楚你到底想要什么效果，看看這個行不行吧
<!DOCTYPE?html> <html> <head> <meta?charset="UTF-8"> <title>剪輯區域--demo4</title> <style> *?{ margin:?0; padding:?0 } canvas?{ display:?block; margin:?50px?auto; border:?solid?1px?grey; } </style> </head> <body> <canvas?id="canvas"></canvas> <script> var?canvas?=?document.getElementById('canvas'); canvas.width?=?800; canvas.height?=?500; var?cxt?=?canvas.getContext('2d'); //探照燈,x,y為鼠標相對canvas的坐標 function?drawArc(cxt,?x,?y,?r)?{ cxt.clearRect(0,?0,?canvas.width,?canvas.height); drawText(cxt); cxt.save(); cxt.arc(x,?y,?r,?0,?2?*?Math.PI); cxt.fillStyle?=?'#fff'; cxt.fill(); cxt.clip(); drawText(cxt,'green') cxt.restore(); } //繪制文字 function?drawText(cxt,color)?{ //繪制三行文字 cxt.clearRect(0,?0,?canvas.width,?canvas.height) cxt.beginPath(); cxt.font?=?'20px?隸書'; cxt.fillStyle?=?color?||?'black'; cxt.fillText('生命，就像是一張借記卡，從你呱呱墜地，還未有名字的時候，你生命的借記卡就已經毫不延遲的啟動了它的業務。',?0,?50) cxt.fillText('儲存在生命借記卡上的數字，就是你這一生所有的時光。',?0,?100) cxt.fillText('幸好不知道，我們才會一邊消費著卡額，一邊無憂無慮的生活。',?0,?150) } canvas.onmousemove?=?function(event)?{ //計算出鼠標相對canvas的位置 clientX?=?event.clientX; clientY?=?event.clientY; curX?=?clientX?-?this.offsetLeft; curY?=?clientY?-?this.offsetTop; drawArc(cxt,?curX,?curY,?50) } canvas.onmouseout?=?function()?{ cxt.clearRect(0,?0,?canvas.width,?canvas.height); drawText(cxt); } </script> </body> </html>