                        课程
                    
                        /前端开发
                        
                            /Html5
                        
                        /Canvas绘图详解

附上一个demo，我想要让文字浮上来，探照灯部分高亮，大神给我一点思路吧！！

<!DOCTYPE html>

<html>

<head>

<style>

*{margin: 0;padding: 0}

canvas{display: block;margin: 50px auto;border:solid 1px grey;}

</style>

</head>

<body>

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-07-21

源自：Canvas绘图详解 8-3

关注问题我要回答

1325

操作

收起

1 回答

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