HTML Canvas& Javascript - 阴影而不是边框

时间:2017-05-05 11:03:01

标签: javascript html image canvas

我试图在包含图像的弯曲矩形的边框后面绘制阴影。但是,下面的代码将阴影置于图像后面而不是边框​​上。如何更改此代码以使阴影位于边框后面?

为了澄清,边框当前被图像阴影遮挡,但我不希望图像具有任何阴影。这是图像周围的白色边框,我想要一个阴影。我不希望画布周围有阴影,但画布中的弯曲的矩形边框

var c=document.getElementById('game'),
		canvasX=c.offsetLeft,
		canvasY=c.offsetTop,
		ctx=c.getContext('2d')
		elements = [];
    
var x=25, y=25, w=150, h=150;

var img=new Image(); 
img.src='https://i.stack.imgur.com/ddSWa.jpg';
ctx.beginPath();
ctx.lineWidth='8';
ctx.strokeStyle='white';
ctx.moveTo(x+10, y);
ctx.lineTo(x+w-10, y);
ctx.quadraticCurveTo(x+w, y, x+w, y+10);
ctx.lineTo(x+w, y+h-10);
ctx.quadraticCurveTo(x+w, y+h, x+w-10, y+h);
ctx.lineTo(x+10, y+h);
ctx.quadraticCurveTo(x, y+h, x, y+h-10);
ctx.lineTo(x, y+10);
ctx.quadraticCurveTo(x, y, x+10, y);
ctx.shadowColor = '#000000';
ctx.shadowBlur = 20;
ctx.shadowOffsetX = 5;
ctx.shadowOffsetY = 5;
ctx.stroke();
ctx.drawImage(img, x+2.5, y+2.5, w-5, h-5);
canvas {
  display: block;
  margin: 1em auto;
  border: 1px solid black;
  background: #FF9900;
}
<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>uTalk Demo</title>
	<link rel='stylesheet' type='text/css' href='game.css' media='screen'></style>
</head>
<body>
	<canvas id="game" width = "200" height = "200"></canvas>
</body>
</html>

3 个答案:

答案 0 :(得分:2)

在绘制图像之前,只需删除shadowOffset即可。 设置此属性时,所有后续图形都将具有阴影。

var c=document.getElementById('game'),
		canvasX=c.offsetLeft,
		canvasY=c.offsetTop,
		ctx=c.getContext('2d')
		elements = [];
    
var x=25, y=25, w=150, h=150;

var img=new Image(); 
img.src='https://i.stack.imgur.com/ddSWa.jpg';
ctx.beginPath();
ctx.lineWidth='8';
ctx.strokeStyle='white';
ctx.moveTo(x+10, y);
ctx.lineTo(x+w-10, y);
ctx.quadraticCurveTo(x+w, y, x+w, y+10);
ctx.lineTo(x+w, y+h-10);
ctx.quadraticCurveTo(x+w, y+h, x+w-10, y+h);
ctx.lineTo(x+10, y+h);
ctx.quadraticCurveTo(x, y+h, x, y+h-10);
ctx.lineTo(x, y+10);
ctx.quadraticCurveTo(x, y, x+10, y);
ctx.shadowColor = '#000000';
ctx.shadowBlur = 20;
ctx.shadowOffsetX = 5;
ctx.shadowOffsetY = 5;
ctx.stroke();
// now reset the shadow
ctx.shadowBlur = 0;
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 0;

ctx.drawImage(img, x+2.5, y+2.5, w-5, h-5);
canvas {
  display: block;
  margin: 1em auto;
  border: 1px solid black;
  background: #FF9900;
}
<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>uTalk Demo</title>
	<link rel='stylesheet' type='text/css' href='game.css' media='screen'></style>
</head>
<body>
	<canvas id="game" width = "200" height = "200"></canvas>
</body>
</html>

答案 1 :(得分:0)

您正在绘制的形状只是一个图像,而不是border。它只会留在画布内。但是如果你做这样的事情,你只需要玩x,y coordinates。否则,您可以使用borderbox-shadow属性

&#13;
&#13;
var c=document.getElementById('game'),
		canvasX=c.offsetLeft,
		canvasY=c.offsetTop,
		ctx=c.getContext('2d')
		elements = [];
    
var x= 20, y=20, w=160, h=160;

var img=new Image(); 
img.src='https://i.stack.imgur.com/ddSWa.jpg';
ctx.beginPath();
ctx.lineWidth='8';
ctx.strokeStyle='white';
ctx.moveTo(x+10, y);
ctx.lineTo(x+w-10, y);
ctx.quadraticCurveTo(x+w, y, x+w, y+10);
ctx.lineTo(x+w, y+h-10);
ctx.quadraticCurveTo(x+w, y+h, x+w-10, y+h);
ctx.lineTo(x+10, y+h);
ctx.quadraticCurveTo(x, y+h, x, y+h-10);
ctx.lineTo(x, y+10);
ctx.quadraticCurveTo(x, y, x+10, y);
ctx.shadowColor = '#000000';
ctx.shadowBlur = 20;
ctx.shadowOffsetX = 5;
ctx.shadowOffsetY = 5;
ctx.stroke();
ctx.drawImage(img, x+27.5, y+27.5, w-55, h-55);
&#13;
canvas {
  display: block;
  margin: 1em auto;
  background: transparent;
}
&#13;
<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>uTalk Demo</title>
	<link rel='stylesheet' type='text/css' href='game.css' media='screen'></style>
</head>
<body>
	<canvas id="game" width = "200" height = "200"></canvas>
</body>
</html>
&#13;
&#13;
&#13;

答案 2 :(得分:0)

不确定你需要什么。我发现您的代码没有任何问题。你试过用过:

ctx.strokeStyle = 'grey'; //or the color you want.
ctx.lineWidth = 5; //For thickness