Notes d'étude préliminaires sur Html5 Canvas (8) -Shadow

Cet article continue de présenter certaines valeurs de statut de html5 Le contexte de dessin de html5 fournit des effets riches. effet de l'ombre. , l'ombre a quatre contrôles de valeur d'état, à savoir shadowBlur, shadowOffsetX, shadowOffsetY et shadowColor. Où shadowBlur est la valeur de flou de pixel de l'ombre, shadowOffsetX et shadowOffsetY sont l'ombre La valeur de décalage sur l'axe x et l'axe y, shadowColor est la valeur de couleur de l'ombre, où la valeur par défaut est que les trois premières valeurs sont toutes 0, et la dernière valeur est définie sur noir transparent. Modifiez simplement deux des valeurs pour afficher l'effet d'ombre, comme le montre l'exemple ci-dessous. En même temps, l'exemple ci-dessous prouve également qu'il s'agit d'une valeur d'état. Vous pouvez également utiliser . enregistrerEnregistrer et restaurerpop.

Le code de dessin est le suivant

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);

Ici, nous venons de définir le couleur de l'ombre en Rouge, puisque les valeurs de décalage de x et y ne sont pas définies, la valeur par défaut est cet état d'ombre environnant, shadowColor est réglé sur un rouge complètement opaque. Vous pouvez également définir la transparence via la valeur argb, mais il n'y a pas beaucoup de différence dans la valeur correspondante. ombre :

Modifiez avec le code suivant, l'effet est le suivant :

Le code du dessin est le suivant :

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);

La valeur de décalage de l'ombre sur l'axe x et le y L'axe, comme son nom l'indique, consiste à décaler l'ombre, respectivement en < L'axe 🎜>x et le décalage de distance correspondant sur le y axe. L'effet est le suivant :

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();//正式绘制