zoukankan      html  css  js  c++  java
  • 在HTML5中怎样实现Canvas阴影效果

     该文章是由e良师益友技术部小陈原创作品,转载是请注明来源,谢谢!  

    今天我给大家介绍一下在HTML5中怎样实现Canvas阴影效果,我们知道现在HTML5的Canvas阴影也经常使用的,这个就是HTML5 Canvas阴影使用方法,在这里主要和大家分HTML5 Canvas阴影使用方法代码,可以适当的改变来达到自己想要的结果,下面就一起来看看详细的代码吧!

    下面是代码如下:

    <!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('2d');
                 
                // section one - shadow and blur
                context.fillStyle="black";
                context.fillRect(0, 0, canvas.width, canvas.height/4);
                context.font = '60pt Calibri';
                 
                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 = '60pt Calibri';
                 
                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>HTML5 Canvas</h1>
        <pre>Fill And Stroke Clip</pre>
        <div id="my_painter">
            <canvas id="text_canvas"></canvas>
        </div>
    </body>
    </html>
  • 相关阅读:
    Using Resource File on DotNet
    C++/CLI VS CSharp
    JIT VS NGen
    [Tip: disable vc intellisense]VS2008 VC Intelisense issue
    UVa 10891 Game of Sum(经典博弈区间DP)
    UVa 10723 Cyborg Genes(LCS变种)
    UVa 607 Scheduling Lectures(简单DP)
    UVa 10401 Injured Queen Problem(简单DP)
    UVa 10313 Pay the Price(类似数字分解DP)
    UVa 10635 Prince and Princess(LCS N*logN)
  • 原文地址:https://www.cnblogs.com/luenmicro/p/3599850.html
Copyright © 2011-2022 走看看