HTML5和JavaScript是現代Web頁面的重要組成部分。HTML5提供了許多新的API和標簽，而JavaScript可以實現各種交互和動態效果。HTML5和JavaScript的結合也產生了許多有趣的特效，包括在網頁上產生動畫、變換、圖像處理、用戶交互等功能。
在這里，我將分享一些HTML5和JavaScript的全部特效代碼。這些代碼能夠讓你創建炫酷的Web頁面效果，吸引更多用戶訪問你的網站。
1.水墨風格文字<!DOCTYPE html>
<html>
<head>
<title>水墨風格文字</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="400"></canvas>
<script>
var canvas=document.getElementById("myCanvas");
var ctx=canvas.getContext("2d");
ctx.font="40px Arial";
ctx.fillStyle="black";
ctx.fillText("Hello World",10,50);
var imgData=ctx.getImageData(0,0,400,400);
var data=imgData.data;
for(var i=0;i<data.length;i+=4){
var gray=(data[i]+data[i+1]+data[i+2])/3;
data[i]=gray;
data[i+1]=gray;
data[i+2]=gray;
}
ctx.putImageData(imgData,0,0);
</script>
</body>
</html>這段代碼將文本轉換為水墨風格，并在畫布上呈現。它使用了canvas標簽創建2D圖像并對文本進行了處理。通過獲取文本區域的像素數據，并將RGB值設置為平均值，將文本轉換為灰度色調。最終呈現的效果非常賞心悅目。
接下來，讓我們看看另一個有趣的例子。
2.圖片模糊<!DOCTYPE html>
<html>
<head>
<title>圖片模糊</title>
<style>
img{
-webkit-filter:blur(10px);
filter:blur(10px);
}
</style>
</head>
<body>
<img src="image.jpg">
</body>
</html>這段代碼會為頁面中的圖像添加模糊效果。它使用了CSS中的filter屬性，對圖像進行模糊操作。-webkit-filter是為了兼容Safari和Chrome瀏覽器。
這只是HTML5和JavaScript在Web開發方面的一小部分功能。隨著技術的不斷發展，我們可以期待更多有趣的特效和功能，用它們來使我們的網站更加優秀和吸引人。