canvas雷达扫描特效

最新推荐文章于 2024-08-09 03:37:41 发布

原创

最新推荐文章于 2024-08-09 03:37:41 发布 · 5.7k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#雷达扫描特效 #canvas特效 #canvas

本文介绍了如何利用canvas实现雷达扫描特效，通过设置fillStyle和fillRect方法，达到理想的光晕效果。虽然在火狐和Chrome浏览器中能正常运行，但在IE浏览器上可能无法工作。

刚开始是用canvas自带的阴影效果来实现那种光晕，不过很不理想。看到网上牛人们的特效能实现这种类似的效果，好奇之下看了下源码才找到正确思路。

fillStyle = "rgba(0,0,0,0.03)";fillRect(0,0,400,300);这是重点。

代码不长，火狐和chrome上可以，IE不行(刚试)。暑假在公司实习抽空写的。

<!DOCTYPE html>
<html>
<head>
	<title>test</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="Author" content="阮家友">
    <meta name="Keywords" content="HTML,model,test">
    <meta name="Description" content="special effect">
    <style type="text/css">
        html,body{font-size:14px;margin:0px;padding:0px;}
        li {list-style:none