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

来源：动视网责编：小采时间：2020-11-27 15:16:33

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

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

推荐度：

点击下载本文 文档为doc格式

导读在HTML5中怎样实现Canvas阴影效果:我们知道现在HTML5的Canvas阴影也经常使用的，这个就是HTML5 Canvas阴影使用方法，在这里主要和大家分HTML5 Canvas阴影使用方法代码，可以适当的改变来达到自己想要的结果，下面就一起来看看详细的代码吧！<!DOCTYPE html> <ht

我们知道现在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阴影效果

推荐度：

点击下载本文 文档为doc格式

标签：如何实现 html5

热门焦点

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

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

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

最新推荐

猜你喜欢

热门推荐