                        課程
                    
                        /前端開發(fā)
                        
                            /Html5
                        
                        /Canvas繪圖詳解

附上一個(gè)demo，我想要讓文字浮上來，探照燈部分高亮，大神給我一點(diǎn)思路吧?。?/h1>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>剪輯區(qū)域--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為鼠標(biāo)相對(duì)canvas的坐標(biāo)
function drawArc(cxt,x,y,r){
cxt.clearRect(0,0,canvas.width,canvas.height);
drawRect(cxt);

cxt.save();
cxt.arc(x,y,r,0,2Math.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('生命，就像是一張借記卡，從你呱呱墜地，還未有名字的時(shí)候，你生命的借記卡就已經(jīng)毫不延遲的啟動(dòng)了它的業(yè)務(wù)。',0,50)
cxt.fillText('儲(chǔ)存在生命借記卡上的數(shù)字，就是你這一生所有的時(shí)光。',0,100)
cxt.fillText('幸好不知道，我們才會(huì)一邊消費(fèi)著卡額，一邊無憂無慮的生活。',0,150)
}
canvas.onmousemove = function(event){
//計(jì)算出鼠標(biāo)相對(duì)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

關(guān)注問題我要回答

1372

操作

收起

1 回答

Dva_Come_to_web
2017-08-21

不太清楚你到底想要什么效果，看看這個(gè)行不行吧

<!DOCTYPE?html>
<html>
<head>
	<meta?charset="UTF-8">
	<title>剪輯區(qū)域--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為鼠標(biāo)相對(duì)canvas的坐標(biāo)
		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('生命，就像是一張借記卡，從你呱呱墜地，還未有名字的時(shí)候，你生命的借記卡就已經(jīng)毫不延遲的啟動(dòng)了它的業(yè)務(wù)。',?0,?50)
			cxt.fillText('儲(chǔ)存在生命借記卡上的數(shù)字，就是你這一生所有的時(shí)光。',?0,?100)
			cxt.fillText('幸好不知道，我們才會(huì)一邊消費(fèi)著卡額，一邊無憂無慮的生活。',?0,?150)
		}
		canvas.onmousemove?=?function(event)?{
			//計(jì)算出鼠標(biāo)相對(duì)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>