HTML5之Canvas绘图——制作渐变式PPT背景

PPT的背景有的很好看，其实有的是用图片，有的是用渐变做的，今天我试着做了一个渐变式的PPT背景图（特殊用途），使用的是Canvas的径向渐变矩形，其实没什么特殊的，直接上代码吧

View Code 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Canvas</title>
<meta name="keywords" content="Canvas">
<meta name="description" content="Canvas HTML5">
</head>
<style type="text/css">
    canvas{border:dashed 1px #CCC}
</style>
<script type="text/javascript">
    function $$(id){
        return document.getElementById(id);
    }
    function pageLoad(){
        var can = $$('can');
        var cans = can.getContext('2d');
        var gnt1 = cans.createRadialGradient(600,300,0,400,700,800);
        gnt1.addColorStop(1,'#bdbdbd');
        gnt1.addColorStop(0,'#f3f3f3');
        cans.fillStyle = gnt1;
        cans.fillRect(0,0,800,600);
        cans.fill();
    }
</script>
<body onload="pageLoad();">
    <canvas id="can" width="800px" height="600px"></canvas>
</body>
</html>


上一张效果图

posted @ 2012-11-27 18:17  小　伍  阅读(1980)  评论(0)  编辑  收藏  举报