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

最新推荐文章于 2022-07-21 13:54:01 发布

weixin_34205826

最新推荐文章于 2022-07-21 13:54:01 发布

阅读量192

点赞数

文章标签： javascript ViewUI

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>