HTML5教程

当前位置: HTML5技术网 > HTML5教程 > 在HTML5中怎样实现Canvas阴影效果

在HTML5中怎样实现Canvas阴影效果

       今天我给大家介绍一下在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>

【在HTML5中怎样实现Canvas阴影效果】相关文章

1. 在HTML5中怎样实现Canvas阴影效果

2. 使用HTML5画布(canvas)生成阴影效果

3. CSS实现跨浏览器兼容性的盒阴影效果

4. jQuery Flat Shadow – 轻松实现漂亮的长阴影效果

5. jQuery Flat Shadow – 轻松实现漂亮的长阴影效果

6. CSS3阴影效果(兼容N多浏览器)

7. CSS3 HTML5实例三(块阴影与文字阴影)

8. jQuery插件实现css3效果

9. jQuery插件实现css3效果

10. CSS3 box-shadow实现曲线投影效果

本文来源:https://www.51html5.com/a713.html

点击展开全部

﹝在HTML5中怎样实现Canvas阴影效果﹞相关内容

「在HTML5中怎样实现Canvas阴影效果」相关专题

其它栏目

也许您还喜欢