Vorläufige Studiennotizen zu Html5 Canvas (8) -Shadow

In diesem Artikel werden weiterhin einige Statuswerte von html5 vorgestellt. Der Zeichenkontext von html5 stellt die vor Der Schatten verfügt über vier Statuswertsteuerelemente, nämlich shadowBlur, shadowOffsetX, shadowOffsetY und shadowColor. Dabei ist shadowBlur der Pixelunschärfewert des Schattens, shadowOffsetX und shadowOffsetY sind der Schatten. Der Versatzwert auf der x-Achse und der y-Achse, shadowColor ist der Schattenfarbwert, wobei der Standardwert darin besteht, dass die ersten drei Werte alle 0 sind und der letzte Wert auf transparentes Schwarz eingestellt ist. Ändern Sie einfach zwei der Werte, um den Schatteneffekt anzuzeigen, wie im folgenden Beispiel gezeigt. Gleichzeitig beweist das folgende Beispiel, dass es sich um einen Statuswert handelt. Sie können auch verwenden SpeichernSpeichern und WiederherstellenPop.

Der Zeichencode lautet wie folgt

context.fillStyle = "red";
context.save();
context.shadowBlur = 20;
context.shadowColor = "rgb(255,0,0)";
context.fillRect(50,50,100,100);
context.restore();
context.fillRect(200,50,100,100);

Hier legen wir einfach fest Schattenfarbe auf Rot, da die Versatzwerte von x und y nicht festgelegt sind, ist der Standardwert dieser Schattenumgebungszustand, shadowColor ist auf vollständig undurchsichtiges Rot eingestellt. Sie können die Transparenz auch über den Wert argb einstellen, es gibt jedoch keinen großen Unterschied im entsprechenden Wert Schatten:

Ändern Sie den folgenden Code. Der Effekt ist wie folgt:

Der Zeichencode lautet wie folgt:

context.fillStyle = "red";
context.save();
context.shadowBlur = 20;
context.shadowColor = "rgb(255,0,0)";
context.fillRect(50,50,100,100);
context.shadowColor = "argb(255,0,0,0.5)";
context.fillRect(200,50,100,100);

Der Versatzwert des Schattens auf der x-Achse und der y Wie der Name schon sagt, dient die Achse dazu, den Schatten zu versetzen, jeweils auf der 🎜>x-Achse und dem entsprechenden Abstandsversatz auf der y Achse. Der Effekt ist wie folgt:

context.fillStyle = "red";
context.shadowBlur = 20;
context.shadowColor = "rgb(255,0,0)";
context.shadowOffsetX = 15;
context.shadowOffsetY = 15;
context.fillRect(50,50,100,100);

context.fillStyle = "red";
context.shadowBlur = 20;
context.shadowColor = "rgb(255,0,0)";
context.shadowOffsetX = 15;
context.shadowOffsetY = 15;
context.beginPath();//开始路径
context.arc(100,100,60,Math.PI / 6,Math.PI,true);
context.closePath();
context.fill();//填充
context.beginPath();//开始路径
context.moveTo(200,50);//设置路径，参数为原点
context.lineTo(360,50);//设置路径直到本线段的终点
context.lineTo(360,150);//设置路径直到本线段的终点
context.closePath();//结束路径
context.fill();//正式绘制