Question

我想在HTML页面的画布上绘制一个圆圈和一个带阴影的角色，同时加载页面并在按钮点击时重新创建图像。我正在使用此代码：

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>

在画布中绘制对象的阴影

1 个答案: