Question

在我的HTML画布中，我尝试将样式shadowBlur仅应用于显示＆＃39;艺术品1＆＃39;的文本元素。

但是目前如果您通过运行代码片段看到，shadowBlur也会应用于其他所有元素。

我也尝试过使用ctx.save()和ctx.restore()，但它似乎无法正常工作。

感谢任何帮助

＆＃13;

var container = 'body';
var size = {
	x: $(container).width(),
	y: $(container).height()
};

var canvas = $('<canvas/>').attr({width: size.x, height: size.y}).appendTo(container),
    ctx = canvas.get(0).getContext("2d");

ctx.globalCompositeOperation = 'xor';


window.requestFrame = (function(){
	return  window.requestAnimationFrame 
})();


function render(){


	ctx.clearRect(0,0,size.x,size.y);

		ctx.lineWidth = 10;
		ctx.strokeStyle = '#fff';
		ctx.shadowColor = '#fff';

		ctx.beginPath();
		ctx.moveTo(-20,size.y/2);
		for(var x = 0; x < size.x; x++){

			ctx.lineTo(x,size.y/2+0.6*(20),1,1);

			if (x == 100.00) {
				ctx.font = "20px Arial";
				ctx.fillStyle = "red";
				ctx.fillText("Artwork 1 ",x,(size.y/2+0.6*(20)- 25 ));
				ctx.shadowBlur = 50; /* this is applied to all elements instead of just the text*/
				ctx.save();

				ctx.fillStyle = "red";
				ctx.fillRect(x, (size.y/2+0.6*(20)- 10 ), 20, 20);
			}


			if (x == 300.00) {
				ctx.font = "20px Arial";
				ctx.fillStyle = "red";
				ctx.fillText("Artwork 2 ",x,(size.y/2+0.6*(20)- 25 ));


				ctx.fillStyle = "red";
				ctx.fillRect(x, (size.y/2+0.6*(20)- 10 ), 20, 20);
			}

		}
		
		ctx.stroke();

	requestFrame(render);
} /* END fn render */

render();

＆＃13;

html, body {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px;
  overflow: hidden;
  background-color: #000;
}
html canvas, body canvas {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}

＆＃13;

<div>test</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

Answer 1

在渲染文本之前设置阴影，然后将其关闭：

ctx.shadowBlur = 20; // call before draw operation require shadow ctx.fillText("Artwork 1 ",x,(size.y/2+0.6*(20)- 25 )); ctx.shadowBlur = 0; // remove shadow

请注意，由于前一代码中的阴影被多次透支，新代码的结果会使其显得“较弱”，这会强制您使用较小的模糊半径（如图所示）或多次透支文本（将需要与xor不同的合成模式。）

可以删除save()来电。

var container = 'body'; var size = { x: $(container).width(), y: $(container).height() }; var canvas = $('<canvas/>').attr({width: size.x, height: size.y}).appendTo(container), ctx = canvas.get(0).getContext("2d"); ctx.globalCompositeOperation = 'xor'; window.requestFrame = (function(){ return window.requestAnimationFrame })(); function render(){ ctx.clearRect(0,0,size.x,size.y); ctx.lineWidth = 10; ctx.strokeStyle = '#fff'; ctx.shadowColor = '#fff'; ctx.beginPath(); ctx.moveTo(-20,size.y/2); for(var x = 0; x < size.x; x++){ ctx.lineTo(x,size.y/2+0.6*(20),1,1); if (x == 100.00) { ctx.font = "20px Arial"; ctx.fillStyle = "red"; ctx.shadowBlur = 20; /* this is applied to all elements instead of just the text*/ ctx.fillText("Artwork 1 ",x,(size.y/2+0.6*(20)- 25 )); ctx.shadowBlur = 0; ctx.fillStyle = "red"; ctx.fillRect(x, (size.y/2+0.6*(20)- 10 ), 20, 20); } if (x == 300.00) { ctx.font = "20px Arial"; ctx.fillStyle = "red"; ctx.fillText("Artwork 2 ",x,(size.y/2+0.6*(20)- 25 )); ctx.fillStyle = "red"; ctx.fillRect(x, (size.y/2+0.6*(20)- 10 ), 20, 20); } } ctx.stroke(); requestFrame(render); } /* END fn render */ render();

html, body { height: 100%; width: 100%; margin: 0px; padding: 0px; overflow: hidden; background-color: #000; } html canvas, body canvas { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; }

<div>test</div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

仅将shadowBlur应用于HTML Canvas上的1个元素

1 个答案: