首页 网络编程 前端制作 数据库 CMS教程 脚本编程 微信开发 小程序开发 服务器

html5

热门: ASP.NET PHP编程 ASP编程 JSP编程

html5实现canvas阴影效果示例

来源:未知 发布时间:2017-05-13
点评:这篇文章主要介绍了html5实现canvas阴影效果示例

在HTML5中实现Canvas阴影效果Qy8HTML5中文学习网 - HTML5先行者学习网
Qy8HTML5中文学习网 - HTML5先行者学习网
Qy8HTML5中文学习网 - HTML5先行者学习网


复制代码代码如下:Qy8HTML5中文学习网 - HTML5先行者学习网
<!DOCTYPE html>Qy8HTML5中文学习网 - HTML5先行者学习网
<html>Qy8HTML5中文学习网 - HTML5先行者学习网
<head>Qy8HTML5中文学习网 - HTML5先行者学习网
<meta http-equiv="X-UA-Compatible" content="chrome=IE8">Qy8HTML5中文学习网 - HTML5先行者学习网
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">Qy8HTML5中文学习网 - HTML5先行者学习网
<title>Canvas Clip Demo</title>Qy8HTML5中文学习网 - HTML5先行者学习网
<link href="default.css" rel="stylesheet" />Qy8HTML5中文学习网 - HTML5先行者学习网
<script>Qy8HTML5中文学习网 - HTML5先行者学习网
var ctx = null; // global variable 2d contextQy8HTML5中文学习网 - HTML5先行者学习网
var imageTexture = null;Qy8HTML5中文学习网 - HTML5先行者学习网
window.onload = function() {Qy8HTML5中文学习网 - HTML5先行者学习网
var canvas = document.getElementById("text_canvas");Qy8HTML5中文学习网 - HTML5先行者学习网
console.log(canvas.parentNode.clientWidth);Qy8HTML5中文学习网 - HTML5先行者学习网
canvas.width = canvas.parentNode.clientWidth;Qy8HTML5中文学习网 - HTML5先行者学习网
canvas.height = canvas.parentNode.clientHeight;Qy8HTML5中文学习网 - HTML5先行者学习网
Qy8HTML5中文学习网 - HTML5先行者学习网
if (!canvas.getContext) {Qy8HTML5中文学习网 - HTML5先行者学习网
console.log("Canvas not supported. Please install a HTML5 compatible browser.");Qy8HTML5中文学习网 - HTML5先行者学习网
return;Qy8HTML5中文学习网 - HTML5先行者学习网
}Qy8HTML5中文学习网 - HTML5先行者学习网
var context = canvas.getContext('2d');Qy8HTML5中文学习网 - HTML5先行者学习网
Qy8HTML5中文学习网 - HTML5先行者学习网
// section one - shadow and blurQy8HTML5中文学习网 - HTML5先行者学习网
context.fillStyle="black";Qy8HTML5中文学习网 - HTML5先行者学习网
context.fillRect(0, 0, canvas.width, canvas.height/4);Qy8HTML5中文学习网 - HTML5先行者学习网
context.font = '60pt Calibri';Qy8HTML5中文学习网 - HTML5先行者学习网
Qy8HTML5中文学习网 - HTML5先行者学习网
context.shadowColor = "white";Qy8HTML5中文学习网 - HTML5先行者学习网
context.shadowOffsetX = 0;Qy8HTML5中文学习网 - HTML5先行者学习网
context.shadowOffsetY = 0;Qy8HTML5中文学习网 - HTML5先行者学习网
context.shadowBlur = 20;Qy8HTML5中文学习网 - HTML5先行者学习网
context.fillText("Blur Canvas", 40, 80);Qy8HTML5中文学习网 - HTML5先行者学习网
context.strokeStyle = "RGBA(0, 255, 0, 1)";Qy8HTML5中文学习网 - HTML5先行者学习网
context.lineWidth = 2;Qy8HTML5中文学习网 - HTML5先行者学习网
context.strokeText("Blur Canvas", 40, 80);Qy8HTML5中文学习网 - HTML5先行者学习网
Qy8HTML5中文学习网 - HTML5先行者学习网
// section two - shadow fontQy8HTML5中文学习网 - HTML5先行者学习网
var hh = canvas.height/4;Qy8HTML5中文学习网 - HTML5先行者学习网
context.fillStyle="white";Qy8HTML5中文学习网 - HTML5先行者学习网
context.fillRect(0, hh, canvas.width, canvas.height/4);Qy8HTML5中文学习网 - HTML5先行者学习网
context.font = '60pt Calibri';Qy8HTML5中文学习网 - HTML5先行者学习网
Qy8HTML5中文学习网 - HTML5先行者学习网
context.shadowColor = "RGBA(127,127,127,1)";Qy8HTML5中文学习网 - HTML5先行者学习网
context.shadowOffsetX = 3;Qy8HTML5中文学习网 - HTML5先行者学习网
context.shadowOffsetY = 3;Qy8HTML5中文学习网 - HTML5先行者学习网
context.shadowBlur = 0;Qy8HTML5中文学习网 - HTML5先行者学习网
context.fillStyle = "RGBA(0, 0, 0, 0.8)";Qy8HTML5中文学习网 - HTML5先行者学习网
context.fillText("Blur Canvas", 40, 80+hh);Qy8HTML5中文学习网 - HTML5先行者学习网
Qy8HTML5中文学习网 - HTML5先行者学习网
// section three - down shadow effectQy8HTML5中文学习网 - HTML5先行者学习网
var hh = canvas.height/4 + hh;Qy8HTML5中文学习网 - HTML5先行者学习网
context.fillStyle="black";Qy8HTML5中文学习网 - HTML5先行者学习网
context.fillRect(0, hh, canvas.width, canvas.height/4);Qy8HTML5中文学习网 - HTML5先行者学习网
for(var i = 0; i < 10; i++)Qy8HTML5中文学习网 - HTML5先行者学习网
{Qy8HTML5中文学习网 - HTML5先行者学习网
context.shadowColor = "RGBA(255, 255, 255," + ((10-i)/10) + ")";Qy8HTML5中文学习网 - HTML5先行者学习网
context.shadowOffsetX = i*2;Qy8HTML5中文学习网 - HTML5先行者学习网
context.shadowOffsetY = i*2;Qy8HTML5中文学习网 - HTML5先行者学习网
context.shadowBlur = i*2;Qy8HTML5中文学习网 - HTML5先行者学习网
context.fillStyle = "RGBA(127, 127, 127, 1)";Qy8HTML5中文学习网 - HTML5先行者学习网
context.fillText("Blur Canvas", 40, 80+hh);Qy8HTML5中文学习网 - HTML5先行者学习网
}Qy8HTML5中文学习网 - HTML5先行者学习网
Qy8HTML5中文学习网 - HTML5先行者学习网
// section four - fade effectQy8HTML5中文学习网 - HTML5先行者学习网
var hh = canvas.height/4 + hh;Qy8HTML5中文学习网 - HTML5先行者学习网
context.fillStyle="green";Qy8HTML5中文学习网 - HTML5先行者学习网
context.fillRect(0, hh, canvas.width, canvas.height/4);Qy8HTML5中文学习网 - HTML5先行者学习网
for(var i = 0; i < 10; i++)Qy8HTML5中文学习网 - HTML5先行者学习网
{Qy8HTML5中文学习网 - HTML5先行者学习网
context.shadowColor = "RGBA(255, 255, 255," + ((10-i)/10) + ")";Qy8HTML5中文学习网 - HTML5先行者学习网
context.shadowOffsetX = 0;Qy8HTML5中文学习网 - HTML5先行者学习网
context.shadowOffsetY = -i*2;Qy8HTML5中文学习网 - HTML5先行者学习网
context.shadowBlur = i*2;Qy8HTML5中文学习网 - HTML5先行者学习网
context.fillStyle = "RGBA(127, 127, 127, 1)";Qy8HTML5中文学习网 - HTML5先行者学习网
context.fillText("Blur Canvas", 40, 80+hh);Qy8HTML5中文学习网 - HTML5先行者学习网
}Qy8HTML5中文学习网 - HTML5先行者学习网
for(var i = 0; i < 10; i++)Qy8HTML5中文学习网 - HTML5先行者学习网
{Qy8HTML5中文学习网 - HTML5先行者学习网
context.shadowColor = "RGBA(255, 255, 255," + ((10-i)/10) + ")";Qy8HTML5中文学习网 - HTML5先行者学习网
context.shadowOffsetX = 0;Qy8HTML5中文学习网 - HTML5先行者学习网
context.shadowOffsetY = i*2;Qy8HTML5中文学习网 - HTML5先行者学习网
context.shadowBlur = i*2;Qy8HTML5中文学习网 - HTML5先行者学习网
context.fillStyle = "RGBA(127, 127, 127, 1)";Qy8HTML5中文学习网 - HTML5先行者学习网
context.fillText("Blur Canvas", 40, 80+hh);Qy8HTML5中文学习网 - HTML5先行者学习网
}Qy8HTML5中文学习网 - HTML5先行者学习网
for(var i = 0; i < 10; i++)Qy8HTML5中文学习网 - HTML5先行者学习网
{Qy8HTML5中文学习网 - HTML5先行者学习网
context.shadowColor = "RGBA(255, 255, 255," + ((10-i)/10) + ")";Qy8HTML5中文学习网 - HTML5先行者学习网
context.shadowOffsetX = i*2;Qy8HTML5中文学习网 - HTML5先行者学习网
context.shadowOffsetY = 0;Qy8HTML5中文学习网 - HTML5先行者学习网
context.shadowBlur = i*2;Qy8HTML5中文学习网 - HTML5先行者学习网
context.fillStyle = "RGBA(127, 127, 127, 1)";Qy8HTML5中文学习网 - HTML5先行者学习网
context.fillText("Blur Canvas", 40, 80+hh);Qy8HTML5中文学习网 - HTML5先行者学习网
}Qy8HTML5中文学习网 - HTML5先行者学习网
for(var i = 0; i < 10; i++)Qy8HTML5中文学习网 - HTML5先行者学习网
{Qy8HTML5中文学习网 - HTML5先行者学习网
context.shadowColor = "RGBA(255, 255, 255," + ((10-i)/10) + ")";Qy8HTML5中文学习网 - HTML5先行者学习网
context.shadowOffsetX = -i*2;Qy8HTML5中文学习网 - HTML5先行者学习网
context.shadowOffsetY = 0;Qy8HTML5中文学习网 - HTML5先行者学习网
context.shadowBlur = i*2;Qy8HTML5中文学习网 - HTML5先行者学习网
context.fillStyle = "RGBA(127, 127, 127, 1)";Qy8HTML5中文学习网 - HTML5先行者学习网
context.fillText("Blur Canvas", 40, 80+hh);Qy8HTML5中文学习网 - HTML5先行者学习网
}Qy8HTML5中文学习网 - HTML5先行者学习网
}Qy8HTML5中文学习网 - HTML5先行者学习网
Qy8HTML5中文学习网 - HTML5先行者学习网
</script>Qy8HTML5中文学习网 - HTML5先行者学习网
</head>Qy8HTML5中文学习网 - HTML5先行者学习网
<body>Qy8HTML5中文学习网 - HTML5先行者学习网
<h1>HTML5 Canvas</h1>Qy8HTML5中文学习网 - HTML5先行者学习网
<pre>Fill And Stroke Clip</pre>Qy8HTML5中文学习网 - HTML5先行者学习网
<div id="my_painter">Qy8HTML5中文学习网 - HTML5先行者学习网
<canvas id="text_canvas"></canvas>Qy8HTML5中文学习网 - HTML5先行者学习网
</div>Qy8HTML5中文学习网 - HTML5先行者学习网
</body>Qy8HTML5中文学习网 - HTML5先行者学习网
</html>Qy8HTML5中文学习网 - HTML5先行者学习网
Qy8HTML5中文学习网 - HTML5先行者学习网

Qy8HTML5中文学习网 - HTML5先行者学习网
网络编程 | 前端制作 | 数据库 | CMS教程 | 脚本编程 | 微信开发 | 小程序开发 | 服务器 |

程序员学习网,提供最新的微信开发教程,小程序开发教程,网络编程、php教程、asp.net教程、微信公众平台二次开发教程、脚本编程、网页制作、网页设计、网页特效,为站长与网络编程从业者提供学习资料,凡本网站转载的文章、图片等资料的版权归版权所有人所有,因无法和版权所有者一一联系,如果本网站选取的文/图威胁到您的权益,请您及时和本网站联系。 我们会在第一时间内采取措施,避免给双方造 成不必要的损失。
© 2015-2018 程序员学习网 版权所有,并保留所有权利。

电脑版 | 移动版