javascript - 在Canvas中绘制物体的阴影

Question

我想在加载页面时在 HTML 页面的 Canvas 上绘制一个圆圈和一个带阴影的字符，并在单击按钮时重新创建图像。我正在使用这段代码:

window.onload = function() {

    draw();
};

function draw(){

var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
ctx.clearRect(0, 0, c.width, c.height);
var width = c.width;
var height = c.height;

//DRAW A CIRCLE
var centerX = Math.floor((Math.random() * width));
var centerY = Math.floor((Math.random() * height));
var radius = Math.floor(Math.random() * 50);
var color = '#f11';
ctx.fillStyle = color;
ctx.beginPath();
ctx.arc(centerX, centerY, radius, 0, Math.PI * 2, false);
ctx.closePath();
ctx.fill();

//DRAW A CHARACTER WITH SHADOW
var c = "S";
ctx.font = "300% Verdana";
ctx.shadowBlur = 20;
ctx.shadowColor = "black";
ctx.shadowOffsetX = 20;
ctx.shadowOffsetY = 20;
ctx.fillStyle = "#111";
ctx.fillText(c, 10, 90);
}

在 HTML 中，我正在调用名为 Refresh 的按钮的绘制函数 onclick() 事件。 它第一次通过绘制一个圆圈和一个带有阴影的字符来提供所需的输出。当我单击“刷新”按钮时，它正在绘制带有阴影的两个对象。我不想画圆圈的阴影。谁能告诉我我在这里犯的错误。

Answer 1

您可能想使用CanvasRenderingContext2D.save()方法:

window.onload = function() {

    draw();
};
document.getElementById("canvas").addEventListener('click', draw);

function draw(){

var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
ctx.clearRect(0, 0, c.width, c.height);
var width = c.width;
var height = c.height;

//DRAW A CIRCLE
var centerX = Math.floor((Math.random() * width));
var centerY = Math.floor((Math.random() * height));
var radius = Math.floor(Math.random() * 50);
var color = '#f11';
ctx.fillStyle = color;
ctx.beginPath();
ctx.arc(centerX, centerY, radius, 0, Math.PI * 2, false);
ctx.closePath();
ctx.fill();

//DRAW A CHARACTER WITH SHADOW
//save the actual context
  ctx.save();
var c = "S";
ctx.font = "300% Verdana";
ctx.shadowBlur = 20;
ctx.shadowColor = "black";
ctx.shadowOffsetX = 20;
ctx.shadowOffsetY = 20;
ctx.fillStyle = "#111";
ctx.fillText(c, 10, 90);
  //restore it 
ctx.restore();
}

canvas{border:1px solid;}

<canvas id="canvas" width="400" height="200"></canvas>