附上一个demo，我想要让文字浮上来，探照灯部分高亮，大神给我一点思路吧！！
前端小蜗牛_
2017-07-21 16:35
<!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>
1回答
-
- Dva_Come_to_web
- 2017-08-21 10:52:33
不太清楚你到底想要什么效果，看看这个行不行吧
<!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>
Canvas绘图详解
72881 学习 · 422 问题
相似问题