canvas雷达扫描特效

阮家友

于 2015-09-17 13:17:12 发布

阅读量5.5k

点赞数

分类专栏： javascript 文章标签：雷达扫描特效 canvas特效 canvas

本文链接：https://blog.csdn.net/ruanjiayou/article/details/48520659

版权

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

摘要由CSDN通过智能技术生成

刚开始是用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;}
        img {border:0px;}
        a {text-decoration:none;}
        .clear {clear:both;}
        
        #center {width:800px;margin:0 auto;padding-top:50px;position:relative;}
        #c1 {background-color:#333;}
    </style>
</