canvas功能太强大了，我喜欢canvas。接一下来我写了一个小例子，这个例子囊括了canvas背景的填充，缩放，变换，文本，一步到位；
1.canvas背景图
起初呢，这张图上中的小路，是以纯色填充的，这样不乏有点单调，没有质感，咱们所熟知的路一般是崎岖的，所以，我想给这条路添加些纹理来实现我想要的效果；
我们将调用createPattern函数来实现，原理是先加载一张纹理图，然后将这张纹理图赋值给strokeStyle。原理很简单。
平铺的方式有下面几种：
a.repeat 默认值图片会在两个方向平铺
b.repeat-x 横向平铺
c.repeat-y 纵向平铺
d.no-repeat 图片只显示一次，不平铺
2.canvas缩放
既然都说是树林了，是吧，不可能是一棵吧，怎么也得两棵也以吧！我已经画了一棵了，那我多复制几棵得了。这时问题来了，复制听起来容易，但放到代码里总不能把代码复制多次吧!这怎么成呢，不科学，所以咱们可以所这画好的一棵独立出来，当做一个单独的例程，然后我们使用缩放函数scale（）就简单解决了。
3.canvas变换
复制完后，总感觉缺点什么，对，少了些倒影，那咱们就加点吧！
变换操作并不限于缩放和平移，我们可以使用函数rotate(angle)来旋转图像，甚至可以直接修改底层变换矩阵以完成一些高级操作，如裁剪图像的绘制路径。
你可以对照一下代码加以理解；
4.canvas文本
最后给它一个标题吧，我是瞎加的，把我的名字给加上去了，大家可以加自己心得的标题；
需要特别注意的是，操作文本的方式和操作其它路径对象的方式相同：可以描绘文本轮廓和填充文本内部；同时，所有能够应用于其它图形的变换和样式都能用于文本；
对象的文本绘制功能由两个函数组成：
fillText(text【文本】,x【X轴】,y【y轴】,maxwidth【宽度】)
strokeText(text,x,y,maxwidth)
两个函数的参加相同，这些参加必须指定
文本呈现相关对象的属性：
a.font 字体
b.textAlign 对齐方式(值多咱多样，我这里就不一一列举了)
有以上技术点的支持，效果就出来了，大家请参照下面代码：（写的不对的地方大家请多多包含）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
canvas{
left: 50%; position:relative; margin-left: -200px; top;
}
img{
display: none;
}
</style>
</head>
<body>
<canvas id="drawDiagonal" width="400" height="500" style="border: 1px solid #008B8B;"></canvas>
<img id="stone" src="img/stone.jpg" width="500px"/>
</body>
<script type="text/javascript">
//加载图像
var gravel = new Image();
gravel.src = "img/stone.jpg";
gravel.onload = function () {
drawTrails();
}
//定义一颗数，为未来重复使用做准备；
function threeDraw(cd){
var lg = cd.createLinearGradient(80,220,240, 200); //可以尝试改变这里的参数，可以获得自己想要的效果；
lg.addColorStop(0, 'yellow');
lg.addColorStop(0.9, '#3CB371');
lg.addColorStop(1,'#2E8B57');
cd.fillStyle=lg;
cd.strokeStyle ='yellowgreen';
cd.lineWidth=4;
cd.lineJoin='round'
cd.beginPath();
cd.moveTo(200,40);
cd.lineTo(160,100);
cd.lineTo(185,100);
cd.lineTo(145,160);
cd.lineTo(170,160);
cd.lineTo(135,220);
cd.lineTo(180,220);
cd.lineTo(170,320);
cd.lineTo(235,320);
cd.lineTo(220,220)
cd.lineTo(260,220);
cd.lineTo(225,160);
cd.lineTo(250,160);
cd.lineTo(210,100);
cd.lineTo(235,100);
cd.closePath();
cd.fill();
cd.stroke();
}
function fourDraw(cd){
cd.lineWidth=4;
cd.lineJoin='round'
cd.beginPath();
cd.moveTo(200,40);
cd.lineTo(160,100);
cd.lineTo(185,100);
cd.lineTo(145,160);
cd.lineTo(170,160);
cd.lineTo(135,220);
cd.lineTo(180,220);
cd.lineTo(170,320);
cd.lineTo(235,320);
cd.lineTo(220,220)
cd.lineTo(260,220);
cd.lineTo(225,160);
cd.lineTo(250,160);
cd.lineTo(210,100);
cd.lineTo(235,100);
cd.closePath();
cd.fill();
}
function drawTrails(){
var canvas=document.getElementById('drawDiagonal');
var cd=canvas.getContext('2d');
cd.save();
cd.strokeStyle=cd.createPattern(gravel,'repeat');
cd.lineWidth=60;
cd.translate(-10,350);
cd.beginPath();
cd.moveTo(0,0);
cd.quadraticCurveTo(170,-80,260,-190);
cd.quadraticCurveTo(310,-250,410,-250);
cd.stroke();
cd.restore();
//复制二颗树的阴影
cd.save();
cd.transform(1, 0,-0.5, 1,0, 0);
cd.translate(350,300)
cd.scale(1.2, 0.8);
cd.fillStyle = 'rgba(0, 0, 0, 0.3)';
cd.fillRect(-5,-50,10,50);
fourDraw(cd);
cd.fill();
cd.restore();
//复制三颗树的阴影
cd.save();
cd.transform(1, 0,-0.5, 1,0, 0);
cd.translate(160,130)
cd.scale(1, 0.6);
cd.fillStyle = 'rgba(0, 0, 0, 0.2)';
fourDraw(cd);
cd.fill();
cd.restore();
var lg = cd.createLinearGradient(80,220,240, 200); //可以尝试改变这里的参数，可以获得自己想要的效果；
lg.addColorStop(0, 'yellow');
lg.addColorStop(0.9, '#3CB371');
lg.addColorStop(1,'#2E8B57');
cd.fillStyle=lg;
cd.strokeStyle ='yellowgreen';
cd.lineWidth=4;
cd.lineJoin='round';
cd.beginPath();
cd.moveTo(200,40);
cd.lineTo(160,100);
cd.lineTo(185,100);
cd.lineTo(145,160);
cd.lineTo(170,160);
cd.lineTo(135,220);
cd.lineTo(180,220);
cd.lineTo(170,320);
cd.lineTo(235,320);
cd.lineTo(220,220);
cd.lineTo(260,220);
cd.lineTo(225,160);
cd.lineTo(250,160);
cd.lineTo(210,100);
cd.lineTo(235,100);
cd.closePath();
cd.fill();
cd.stroke();
//复制一颗树的阴影
cd.save();
cd.transform(1, 0,-0.5, 1,0, 0);
cd.translate(51,43)
cd.scale(0.5, 0.3);
cd.fillStyle = 'rgba(0, 0, 0, 0.1)';
cd.fillRect(-5,-50,10,50);
fourDraw(cd);
cd.fill();
cd.restore();
//复制一颗树
cd.save();
cd.translate(50,200);
cd.scale(1.2,1.2);
threeDraw(cd);
cd.restore();
//复制第二颗树
cd.save();
cd.translate(-20,-20);
cd.scale(0.5,0.5);
threeDraw(cd);
cd.restore();
cd.save();
cd.rotate(1.57);
//cd.threeDraw(0,0,100,100);
cd.restore();
//添加文本
//在canvas上绘制标题文本
cd.save();
cd.shadowColor='rgba(0,0,0,0.2)';
cd.shadowOffsetX=8;
cd.shadowOffsetY=-5;
cd.shadowBlur=2;
//字号为60px,字体为impact,居中对齐，填充为棕色；
cd.font='60px impact';
cd.textAlign='center';
cd.fillStyle='#996600';
cd.fillText('NAVY',100,450,400);
cd.textBaseline='ideographic';
cd.restore();
}
//加载图片
/*var img = new Image();
img.src ='./img/1.JPG';
img.onload = function() {
cd.drawImage(img,10,0,220,300);
};*/
</script>
</html>
1947
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
