Exemple de démonstration de l'utilisation des compétences du didacticiel HTML5 Canvas shadow_html5

HTML5 Canvas fournit quatre valeurs d'attribut pour définir les ombres :
context.shadowColor = "red" signifie définir la couleur de l'ombre sur rouge
context.shadowOffsetX = 0 signifie la distance horizontale de l'ombre par rapport au TEXTE, 0 signifie deux La position horizontale se chevauche
context.shadowOffsetY = 0 signifie la distance verticale de l'ombre par rapport au TEXTE, 0 signifie que la position verticale des deux coïncide
context.shadowBlur = 10 Effet de flou d'ombre, plus la valeur est grande, plus le flou est important.
Le code rectangle avec ombre le plus simple est le suivant :
context.shadowColor = "RGBA(127,127,127,1)";
context.shadowOffsetX = 3;
context.shadowOffsetY = 3; context.shadowBlur = 0;
context.fillStyle = "RGBA(0, 0, 0, 0.8)"
context.fillRect(10, hh 10, 200,canvas.height/4-20) ; 🎜>L'effet est le suivant :


Texte de l'ombre :
Définissez simplement les valeurs de shadowOffsetX et shadowOffsetY lorsque les valeurs​​sont toutes deux positives. , l'ombre sera relative au coin inférieur droit du texte Décalage carré. Lorsque les valeurs sont toutes négatives, l'ombre est décalée par rapport au coin supérieur gauche du texte.

Effet d'ombre 3D :
Dessinez à plusieurs reprises du texte à la même position tout en modifiant les valeurs de shadowOffsetX, shadowOffsetY et shadowBlur De petit à grand, le décalage continue d'augmenter. , et la transparence continue également à augmenter. Vous obtenez le texte de l'effet d'ombre.

Texte avec effet de flou de bord :
Répétez dans quatre directions en fonction de l'effet d'ombre 3D pour obtenir l'effet de texte d'accentuation des bords. Effet de course :


Code de séquence :

Copier le code Le code est comme suit :

var ctx = null; // 全域變數2d 上下文
var imageTexture = null;
window.onload = function() {
var canvas = document.getElementById("text_canvasByIdcanvas ");
console.log(canvas.parentNode.clientWidth);
canvas.width = canvas.parentNode.clientWidth;
canvas.height = canvas.parentNode.clientHeight;
canvas.height = canvas.parentNode.clientHeight;
(!canvasvasvas .getContext) {
console.log("不支援Canvas。請安裝HTML5相容的瀏覽器。");
返回；
}
var context = canvas.getContext('2d') ;
// 第一節- 陰影與模糊
context.fillStyle="black";
context.fillRect(0, 0, canvas.width, canvas.height/4);
context .font = '60pt Calibri';
context.shadowColor = "白色";
context.shadowOffsetX = 0;
context.shadowOffsetY = 0;
context.shadowBlur =context.shadowOffsetY = 0;
context.shadowBlur = 20; .fillText("模糊畫布", 40, 80);
context.StrongStyle = "RGBA(0, 255, 0, 1)";
context.lineWidth = 2;
context.StrokeText("模糊畫布", 40, 80);
// 第二部分- 陰影字體
var hh = canvas.height/4;
context.fillStyle="white";
context.fillRect( 0, hh, canvas.width, canvas.height/4);
context.font = '60pt Calibri';
context.shadowColor = "RGBA(127,127,127,1)"; context. 3;
context.shadowOffsetY = 3;
context.shadowBlur = 0;
context.fillStyle = "RGBA(0, 0, 0, 0.8)";
context.fillText("模糊畫布", 40, 80 hh);
// 第三部分- 下陰影效果
var hh = canvas.height/4 hh;
context.fillStyle="black";
context.fillRect (0, hh, canvas.width, canvas.height/4);
for(var i = 0; i {
context.shadowColor = "RGBA(255, 255, 255," ((10-i)/10) ")" ;
context.shadowOffsetX = i*2;
context.shadowOffsetY = i*2;
context.shadowBlur = i*2;
context.fillStyle = "RGBA(127, 127, 127, 1)";
context.fillText("模糊畫布", 40, 80 hh);
}
// 第四部分-淡入淡出效果
var hh = canvas.height/4 hh;
context.fillStyle="綠色";
context.fillRect(0, hh, canvas.width, canvas.height/4);
for(var i = 0; i {
context.shadowColor = "RGBA(255, 255, 255," ((10-i)/10) ")" ;
context.shadowOffsetX = 0;
context.shadowOffsetY = -i*2;
context.shadowBlur = i*2;
context.fillStyle = "RGBA(127, 127, 127, 1)" ;
context.fillText("模糊畫布", 40, 80 hh);
}
for(var i = 0; i {
context.shadowor = "RGBA(255, 255, 255," ((10-i)/10 ) ")";
context.shadowOffsetX = 0;
context.shadowOffsetY = i*2;
context.shadowBlur =context.shadowBlur =context.shadowBlur =context.shadowBlur =context.shadowBlur =context.shadowBlur =context.shadowBlur =context.shadowBlur =context.shadowBlur =context.shadowBlur =context.shadowBlur =context.shadowBlur =context.shadowBlur =context.shadowBlur =context.shadowBlur =context.shadowBlur =context.shadowBlur =context.shadowBlur =context.shadowBlur =context.shadowBlur =context.shadowBlur =context.shadowBlur =context.shadowBlur =context.shadowBlur =context.shadowBlur =context.shadowBlur =context.shadowBlur =context。 i*2;
context.fillStyle = "RGBA(127, 127, 127, 1)";
context.fillText("模糊畫布", 40, 80 hh);
for}
for (var i = 0; i {
context.shadowColor = "RGBA(255, 255, 255," ((10-i)/10 ) ")";
context .shadowOffsetX = i*2;
context.shadowOffsetY = 0;
context.shadowBlur = i*2;
context.fillStyle = "RGBA(127, 127, 127, 1)";
context.fillText("模糊畫布", 40, 80 hh);
}
for(var i = 0; i {
context.shadowColor = "RGBA(255 , 255, 255," ((10-i)/10 ) ")";
context.shadowOffsetX = -i*2;
context.shadowOffsetY = 0;
context.shadowBlur = i*2 ;
context.fillStyle = "RGBA(127, 127, 127, 1)";
context.fillText("模糊畫布", 40, 80 hh);
}
}
}
腳本>
頭>

HTML5 Canvas Clip 演示- 作者：Gloomy Fish

填充和描邊剪輯

身體>