zoukankan html css js c++ java

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>

上一张效果图

查看全文

相关阅读:
忘记线上MySQL密码:
Auth认证
 swoole定时
 hashMap,hashTable,concurrentHashmap的区别
 JSP中URL路径获取问题
 #Spring代理的简单例子#
#动态代理#
#类加载机制#
#算法#二分查找和插入(start end交叉的地方)
#tomcat#生成的jsp转换问题

原文地址：https://www.cnblogs.com/picaso/p/2791267.html