您的位置：首页 > Web前端 > HTML5

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

2012-11-27 18:17 411 查看

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>

上一张效果图

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航