首先来看一下效果图。
下面开始贴代码。
横向平铺：
<style type="text/css">
#PageBody{
background-repeat:repeat-x;//沿x填充
background-image:url(file:///E|/exone/4.png);
//以上2句可以缩写为下面这一句
background:url('file:///E|/exone/4.png') repeat-x;
}
</style>
<body id="PageBody">
优点：小，加载速度快。
缺点：不能控制宽度。
线性渐变：
<script>
function draw(id){
//获取canvas对象的引用,注意Canvas名字必须和下面canvas里面的id相同
var canvas = document.getElementById('Canvas');
//获取该canvas的2D绘图环境
var context = canvas.getContext('2d');//getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制方法。
//定义线性渐变的起始坐标与结束坐标
var grad = context.createLinearGradient(0,0,0,150);
//渐变的规则，位置及尺寸。
grad.addColorStop(0,'blue');
grad.addColorStop(1,'white');
context.fillStyle = grad;
context.fillRect(10,10,200,150);
}
</script>
<canvas id = "Canvas" width = "200" height = "150" style="border:0px solid #c3c3c3;" />
优点：自由定义内容，位置，尺寸。
缺点：占用空间较大。
865
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
