使用HTML5 Canvas繪製陰影效果的方法-H5教程-PHP中文網

首頁

web前端

H5教程

使用HTML5 Canvas繪製陰影效果的方法

不言

Jul 02, 2018 am 11:30 AM

canvashtml5陰影效果

這篇文章主要介紹了使用HTML5 Canvas繪製陰影效果的方法,包括一個3D拉影邊緣模糊效果文字的編寫例子,在陰影效果的利用上進一步深入,需要的朋友可以參考下

建立陰影效果需要操作以下4個屬性：

1.context.shadowColor：陰影顏色。
2.context.shadowOffsetX：陰影x軸位移。正值向右，負值向左。
3.context.shadowOffsetY：陰影y軸位移。正值向下，負值向上。
4.context.shadowBlur：陰影模糊濾鏡。數據越大，擴散程度越大。
這四個屬性只要設定了第一個和剩下三個中的任一個就有陰影效果。不過通常情況下，四個屬性都要設定。

例如，創建一個向右下方位移各5px的紅色陰影，模糊2px，可以這樣寫。

context.shadowColor = "red";   
context.shadowOffsetX = 5;   
context.shadowOffsetY = 5;   
context.shadowBlur= 2;

要注意的是，這裡的陰影和其他屬性設定一樣，都是基於狀態的設定。因此，如果只想為某一個物件套用陰影而不是全域陰影，則需要在下次繪製前重置陰影的這四個屬性。
執行結果：
2016325110954383.jpg (850×500)

陰影文字：

只要設定shadowOffsetX與shadowOffsetY的值，當值都正數時，陰影相對文字的右下

方偏移。當值都為負數時，陰影相對文字的左上方偏移。

3D拉影效果：

在同一位置不斷的重複繪製文字同時改變shadowOffsetX、shadowOffsetY、shadowBlur

的值，從小到大不斷偏移不斷增加，透明度也不斷增加。就得到了拉影效果文字。

邊緣模糊效果文字：

在3D拉影效果的基礎上在四個方向重複，就得到了邊緣羽化的文字效果。

運行效果：
2016325111023538.jpg (472×470)

程式碼：

<!DOCTYPE html>     
<html>     
<head>     
<meta http-equiv="X-UA-Compatible" content="chrome=IE8">     
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">     
<title>Canvas Clip Demo</title>     
<link href="default.css" rel="stylesheet" />     
    <script>     
        var ctx = null; // global variable 2d context   
        var imageTexture = null;     
        window.onload = function() {     
            var canvas = document.getElementById("text_canvas");     
            console.log(canvas.parentNode.clientWidth);     
            canvas.width = canvas.parentNode.clientWidth;     
            canvas.height = canvas.parentNode.clientHeight;     
            if (!canvas.getContext) {     
                console.log("Canvas not supported. Please install a HTML5 compatible browser.");     
                return;     
            }     
            var context = canvas.getContext(&#39;2d&#39;);     
            // section one - shadow and blur   
            context.fillStyle="black";     
            context.fillRect(0, 0, canvas.width, canvas.height/4);     
            context.font = &#39;60pt Calibri&#39;;     
            context.shadowColor = "white";     
            context.shadowOffsetX = 0;     
            context.shadowOffsetY = 0;     
            context.shadowBlur = 20;     
            context.fillText("Blur Canvas", 40, 80);     
            context.strokeStyle = "RGBA(0, 255, 0, 1)";     
            context.lineWidth = 2;     
            context.strokeText("Blur Canvas", 40, 80);     
            // section two - shadow font   
            var hh = canvas.height/4;     
            context.fillStyle="white";     
            context.fillRect(0, hh, canvas.width, canvas.height/4);     
            context.font = &#39;60pt Calibri&#39;;     
            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.fillText("Blur Canvas", 40, 80+hh);     
            // section three - down shadow effect   
            var hh = canvas.height/4 + hh;     
            context.fillStyle="black";     
            context.fillRect(0, hh, canvas.width, canvas.height/4);     
            for(var i = 0; i < 10; 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("Blur Canvas", 40, 80+hh);     
            }     
            // section four -  fade effect   
            var hh = canvas.height/4 + hh;     
            context.fillStyle="green";     
            context.fillRect(0, hh, canvas.width, canvas.height/4);     
            for(var i = 0; i < 10; 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("Blur Canvas", 40, 80+hh);     
            }     
            for(var i = 0; i < 10; 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("Blur Canvas", 40, 80+hh);     
            }     
            for(var i = 0; i < 10; 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("Blur Canvas", 40, 80+hh);     
            }     
            for(var i = 0; i < 10; 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("Blur Canvas", 40, 80+hh);     
            }     
        }     
    </script>     
</head>     
<body>     
    <h1 id="HTML-nbsp-Canvas-nbsp-Clip-nbsp-Demo-nbsp-nbsp-By-nbsp-Gloomy-nbsp-Fish">HTML5 Canvas Clip Demo - By Gloomy Fish</h1>     
    <pre class="brush:php;toolbar:false">Fill And Stroke Clip

以上是使用HTML5 Canvas繪製陰影效果的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

H5代碼：Web結構的初學者指南May 08, 2025 am 12:15 AM

HTML5構建網站的方法包括：1.使用語義化標籤定義網頁結構，如、、等；2.嵌入多媒體內容，使用和標籤；3.應用表單驗證和本地存儲等高級功能。通過這些步驟，你可以創建一個結構清晰、功能豐富的現代網頁。

H5代碼結構：組織內容以實現可讀性May 07, 2025 am 12:06 AM

通過合理的H5代碼結構可以讓頁面在眾多內容中脫穎而出。 1)使用語義化標籤如、、等組織內容，使結構清晰。 2)通過CSS佈局如Flexbox或Grid控制頁面在不同設備上的呈現效果。 3)實現響應式設計，確保頁面在不同屏幕尺寸上自適應。

H5與較舊的HTML版本：比較May 06, 2025 am 12:09 AM

HTML5（H5）與舊版本HTML的主要區別包括：1）H5引入了語義化標籤，2）支持多媒體內容，3）提供離線存儲功能。 H5通過新標籤和API增強了網頁的功能和表現力，如和標籤，提高了用戶體驗和SEO效果，但需注意兼容性問題。

H5與HTML5：澄清術語和關係May 05, 2025 am 12:02 AM

H5和HTML5的區別在於：1）HTML5是網頁標準，定義結構和內容；2）H5是基於HTML5的移動網頁應用，適用於快速開發和營銷。

HTML5特徵：H5的核心May 04, 2025 am 12:05 AM

HTML5的核心特性包括語義化標籤、多媒體支持、表單增強和離線存儲與本地存儲。 1.語義化標籤如、等提高了代碼可讀性和SEO效果。 2.多媒體支持通過和標籤簡化了嵌入媒體內容的過程。 3.表單增強引入了新的輸入類型和驗證屬性，簡化了表單開發。 4.離線存儲和本地存儲通過ApplicationCache和localStorage等提高了網頁性能和用戶體驗。

H5：探索最新版本的HTMLMay 03, 2025 am 12:14 AM

html5isamajorrevisionofthehtmlStandardThatRevolutionsWebDevelopmentBybyIntroDucingNewSemanticeLementSemelementsandAndCapabilities.1）itenhancesCodereAdabilityAndSeowitability andSeowithelientsLike，and.2）

超越基礎：H5代碼中的高級技術May 02, 2025 am 12:03 AM

H5的高級技巧包括：1.利用進行複雜圖形繪製，2.使用WebWorkers提升性能，3.通過WebStorage增強用戶體驗，4.實現響應式設計，5.利用WebRTC實現實時通信，6.進行性能優化和最佳實踐。這些技巧幫助開發者構建更動態、互動和高效的Web應用。

H5：網絡內容和設計的未來May 01, 2025 am 12:12 AM

H5（HTML5）將通過新元素和API提升網頁內容和設計。 1）H5增強了語義化標記和多媒體支持。 2）它引入了Canvas和SVG，豐富了網頁設計。 3）H5的工作原理是通過新標籤和API擴展HTML功能。 4）基本用法包括使用創建圖形，高級用法涉及WebStorageAPI。 5）開發者需注意瀏覽器兼容性和性能優化。

See all articles