1、提取成函数
drawTree
[code]
function drawTree(context) {
var trunkGradient=context.createLinearGradient(-5,-50,5,-50);
trunkGradient.addColorStop(0,'#663300');
trunkGradient.addColorStop(0.4,'#996600');
trunkGradient.addColorStop(1,'#552200');
context.fillStyle=trunkGradient;
context.fillRect(-5,-50,10,50);
var canoyShadow =context.createLinearGradient(0,-50,0,0);
canoyShadow.addColorStop(0,'rgba(0,0,0,0.5)');
canoyShadow.addColorStop(0.2,'rgba(0,0,0,0)');
context.fillStyle=canoyShadow;
context.fillRect(-5,-50,10,50);
createCanopyPath(context);
context.lineWidth=4;
context.lineJoin='round';
context.strokeStyle='#663300';
context.stroke();
context.fillStyle="#339900";
context.fill();
}
[/code]
添加放大的树全部代码:
[code]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>drawTree</title>
</head>
<script>
function createCanopyPath (context) {
//绘制树冠
context.beginPath();
context.moveTo(-25,-50);
context.lineTo(-10,-80);
context.lineTo(-20,-80);
context.lineTo(-5,-110);
context.lineTo(-15,-110);
//树的顶点
context.lineTo(0,-140);
context.lineTo(15,-110);
context.lineTo(5,-110);
context.lineTo(20,-80);
context.lineTo(10,-80);
context.lineTo(25,-50);
//连接起点,闭合路径
context.closePath();
}
function drawTree(context) {
var trunkGradient=context.createLinearGradient(-5,-50,5,-50);
trunkGradient.addColorStop(0,'#663300');
trunkGradient.addColorStop(0.4,'#996600');
trunkGradient.addColorStop(1,'#552200');
context.fillStyle=trunkGradient;
context.fillRect(-5,-50,10,50);
var canoyShadow =context.createLinearGradient(0,-50,0,0);
canoyShadow.addColorStop(0,'rgba(0,0,0,0.5)');
canoyShadow.addColorStop(0.2,'rgba(0,0,0,0)');
context.fillStyle=canoyShadow;
context.fillRect(-5,-50,10,50);
createCanopyPath(context);
context.lineWidth=4;
context.lineJoin='round';
context.strokeStyle='#663300';
context.stroke();
context.fillStyle="#339900";
context.fill();
}
function drawTrails () {
var canvas=document.getElementById("trails");
var context=canvas.getContext("2d");
context.save();
context.translate(130,250);
drawTree(context);
context.restore();
//保存canvas的状态并绘制路径
context.save();
context.translate(260,500);
context.scale(2,2);
drawTree(context);
context.restore();
context.translate(-10,350);
context.beginPath();
//第一条曲线向右上方弯曲
context.moveTo(0,0);
context.quadraticCurveTo(170,-50,260,-190);
//第二条曲线
context.quadraticCurveTo(310,-250,410,-250);
//使用棕色的粗线条来绘制路径
context.strokeStyle='#663300';
context.lineWidth=20;
context.stroke();
//恢复之前的canvas状态
context.restore();
}
window.addEventListener("load",drawTrails,true);
</script>
<body>
<canvas id="trails" style="border:1px solid;" width="400" height="600">
</canvas>
</body>
</html>
[/code]
结果:
2、加阴影
在DrawTree中加入画阴影的代码:
[code]
function drawTree(context) {
var trunkGradient=context.createLinearGradient(-5,-50,5,-50);
trunkGradient.addColorStop(0,'#663300');
trunkGradient.addColorStop(0.4,'#996600');
trunkGradient.addColorStop(1,'#552200');
context.fillStyle=trunkGradient;
context.fillRect(-5,-50,10,50);
var canoyShadow =context.createLinearGradient(0,-50,0,0);
canoyShadow.addColorStop(0,'rgba(0,0,0,0.5)');
canoyShadow.addColorStop(0.2,'rgba(0,0,0,0)');
context.fillStyle=canoyShadow;
context.fillRect(-5,-50,10,50);
createCanopyPath(context);
context.lineWidth=4;
context.lineJoin='round';
context.strokeStyle='#663300';
context.stroke();
context.fillStyle="#339900";
context.fill();
context.save();
//X值随着Y值的增加面增加,借助拉伸变换,可创建一棵作阴影的树
context.transform(1,0,-0.5,1,0,0);
//在Y轴方向
context.scale(1,0.6);
context.fillStyle='rgba(0,0,0,0.2)';
context.fillRect(-5,-50,10,50);
createCanopyPath(context);
context.fill();
context.restore();
}
[/code]
结果:
3、加入文本
加入如下代码
[code]
function drawTrails () {
var canvas=document.getElementById("trails");
var context=canvas.getContext("2d");
context.save();
context.font='60px impact';
context.fillStyle='#996600';
context.textAlign='center';
context.fillText('Happy Trails!',200,60,400);
context.restore();
context.save();
[/code]
显示结果:
4、应用阴影,字体
添加如下代码:
[code]
function drawTrails () {
var canvas=document.getElementById("trails");
var context=canvas.getContext("2d");
context.save();
context.font='60px impact';
context.fillStyle='#996600';
context.textAlign='center';
//加阴影
context.shadowColor='rgba(0,0,0,0.2)';
context.shadowOffsetX=15;
context.shadowOffsetY=-10;
context.shadowBlur=2;
context.fillText('Happy Trails!',200,60,400);
context.restore();
[/code]
结果:
全部代码:
[code]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>drawTree</title>
</head>
<script>
function createCanopyPath (context) {
//绘制树冠
context.beginPath();
context.moveTo(-25,-50);
context.lineTo(-10,-80);
context.lineTo(-20,-80);
context.lineTo(-5,-110);
context.lineTo(-15,-110);
//树的顶点
context.lineTo(0,-140);
context.lineTo(15,-110);
context.lineTo(5,-110);
context.lineTo(20,-80);
context.lineTo(10,-80);
context.lineTo(25,-50);
//连接起点,闭合路径
context.closePath();
}
function drawTree(context) {
var trunkGradient=context.createLinearGradient(-5,-50,5,-50);
trunkGradient.addColorStop(0,'#663300');
trunkGradient.addColorStop(0.4,'#996600');
trunkGradient.addColorStop(1,'#552200');
context.fillStyle=trunkGradient;
context.fillRect(-5,-50,10,50);
var canoyShadow =context.createLinearGradient(0,-50,0,0);
canoyShadow.addColorStop(0,'rgba(0,0,0,0.5)');
canoyShadow.addColorStop(0.2,'rgba(0,0,0,0)');
context.fillStyle=canoyShadow;
context.fillRect(-5,-50,10,50);
createCanopyPath(context);
context.lineWidth=4;
context.lineJoin='round';
context.strokeStyle='#663300';
context.stroke();
context.fillStyle="#339900";
context.fill();
context.save();
//X值随着Y值的增加面增加,借助拉伸变换,可创建一棵作阴影的树
context.transform(1,0,-0.5,1,0,0);
//在Y轴方向
context.scale(1,0.6);
context.fillStyle='rgba(0,0,0,0.2)';
context.fillRect(-5,-50,10,50);
createCanopyPath(context);
context.fill();
context.restore();
}
function drawTrails () {
var canvas=document.getElementById("trails");
var context=canvas.getContext("2d");
context.save();
context.font='60px impact';
context.fillStyle='#996600';
context.textAlign='center';
//加阴影
context.shadowColor='rgba(0,0,0,0.2)';
context.shadowOffsetX=15;
context.shadowOffsetY=-10;
context.shadowBlur=2;
context.fillText('Happy Trails!',200,60,400);
context.restore();
context.save();
context.translate(130,250);
drawTree(context);
context.restore();
//保存canvas的状态并绘制路径
context.save();
context.translate(260,500);
context.scale(2,2);
drawTree(context);
context.restore();
context.translate(-10,350);
context.beginPath();
//第一条曲线向右上方弯曲
context.moveTo(0,0);
context.quadraticCurveTo(170,-50,260,-190);
//第二条曲线
context.quadraticCurveTo(310,-250,410,-250);
//使用棕色的粗线条来绘制路径
context.strokeStyle='#663300';
context.lineWidth=20;
context.stroke();
}
window.addEventListener("load",drawTrails,true);
</script>
<body>
<canvas id="trails" style="border:1px solid;" width="400" height="600">
</canvas>
</body>
</html>
[/code]
2011-5-14 11:26 danny
drawTree
[code]
function drawTree(context) {
var trunkGradient=context.createLinearGradient(-5,-50,5,-50);
trunkGradient.addColorStop(0,'#663300');
trunkGradient.addColorStop(0.4,'#996600');
trunkGradient.addColorStop(1,'#552200');
context.fillStyle=trunkGradient;
context.fillRect(-5,-50,10,50);
var canoyShadow =context.createLinearGradient(0,-50,0,0);
canoyShadow.addColorStop(0,'rgba(0,0,0,0.5)');
canoyShadow.addColorStop(0.2,'rgba(0,0,0,0)');
context.fillStyle=canoyShadow;
context.fillRect(-5,-50,10,50);
createCanopyPath(context);
context.lineWidth=4;
context.lineJoin='round';
context.strokeStyle='#663300';
context.stroke();
context.fillStyle="#339900";
context.fill();
}
[/code]
添加放大的树全部代码:
[code]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>drawTree</title>
</head>
<script>
function createCanopyPath (context) {
//绘制树冠
context.beginPath();
context.moveTo(-25,-50);
context.lineTo(-10,-80);
context.lineTo(-20,-80);
context.lineTo(-5,-110);
context.lineTo(-15,-110);
//树的顶点
context.lineTo(0,-140);
context.lineTo(15,-110);
context.lineTo(5,-110);
context.lineTo(20,-80);
context.lineTo(10,-80);
context.lineTo(25,-50);
//连接起点,闭合路径
context.closePath();
}
function drawTree(context) {
var trunkGradient=context.createLinearGradient(-5,-50,5,-50);
trunkGradient.addColorStop(0,'#663300');
trunkGradient.addColorStop(0.4,'#996600');
trunkGradient.addColorStop(1,'#552200');
context.fillStyle=trunkGradient;
context.fillRect(-5,-50,10,50);
var canoyShadow =context.createLinearGradient(0,-50,0,0);
canoyShadow.addColorStop(0,'rgba(0,0,0,0.5)');
canoyShadow.addColorStop(0.2,'rgba(0,0,0,0)');
context.fillStyle=canoyShadow;
context.fillRect(-5,-50,10,50);
createCanopyPath(context);
context.lineWidth=4;
context.lineJoin='round';
context.strokeStyle='#663300';
context.stroke();
context.fillStyle="#339900";
context.fill();
}
function drawTrails () {
var canvas=document.getElementById("trails");
var context=canvas.getContext("2d");
context.save();
context.translate(130,250);
drawTree(context);
context.restore();
//保存canvas的状态并绘制路径
context.save();
context.translate(260,500);
context.scale(2,2);
drawTree(context);
context.restore();
context.translate(-10,350);
context.beginPath();
//第一条曲线向右上方弯曲
context.moveTo(0,0);
context.quadraticCurveTo(170,-50,260,-190);
//第二条曲线
context.quadraticCurveTo(310,-250,410,-250);
//使用棕色的粗线条来绘制路径
context.strokeStyle='#663300';
context.lineWidth=20;
context.stroke();
//恢复之前的canvas状态
context.restore();
}
window.addEventListener("load",drawTrails,true);
</script>
<body>
<canvas id="trails" style="border:1px solid;" width="400" height="600">
</canvas>
</body>
</html>
[/code]
结果:
2、加阴影
在DrawTree中加入画阴影的代码:
[code]
function drawTree(context) {
var trunkGradient=context.createLinearGradient(-5,-50,5,-50);
trunkGradient.addColorStop(0,'#663300');
trunkGradient.addColorStop(0.4,'#996600');
trunkGradient.addColorStop(1,'#552200');
context.fillStyle=trunkGradient;
context.fillRect(-5,-50,10,50);
var canoyShadow =context.createLinearGradient(0,-50,0,0);
canoyShadow.addColorStop(0,'rgba(0,0,0,0.5)');
canoyShadow.addColorStop(0.2,'rgba(0,0,0,0)');
context.fillStyle=canoyShadow;
context.fillRect(-5,-50,10,50);
createCanopyPath(context);
context.lineWidth=4;
context.lineJoin='round';
context.strokeStyle='#663300';
context.stroke();
context.fillStyle="#339900";
context.fill();
context.save();
//X值随着Y值的增加面增加,借助拉伸变换,可创建一棵作阴影的树
context.transform(1,0,-0.5,1,0,0);
//在Y轴方向
context.scale(1,0.6);
context.fillStyle='rgba(0,0,0,0.2)';
context.fillRect(-5,-50,10,50);
createCanopyPath(context);
context.fill();
context.restore();
}
[/code]
结果:
3、加入文本
加入如下代码
[code]
function drawTrails () {
var canvas=document.getElementById("trails");
var context=canvas.getContext("2d");
context.save();
context.font='60px impact';
context.fillStyle='#996600';
context.textAlign='center';
context.fillText('Happy Trails!',200,60,400);
context.restore();
context.save();
[/code]
显示结果:
4、应用阴影,字体
添加如下代码:
[code]
function drawTrails () {
var canvas=document.getElementById("trails");
var context=canvas.getContext("2d");
context.save();
context.font='60px impact';
context.fillStyle='#996600';
context.textAlign='center';
//加阴影
context.shadowColor='rgba(0,0,0,0.2)';
context.shadowOffsetX=15;
context.shadowOffsetY=-10;
context.shadowBlur=2;
context.fillText('Happy Trails!',200,60,400);
context.restore();
[/code]
结果:
全部代码:
[code]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>drawTree</title>
</head>
<script>
function createCanopyPath (context) {
//绘制树冠
context.beginPath();
context.moveTo(-25,-50);
context.lineTo(-10,-80);
context.lineTo(-20,-80);
context.lineTo(-5,-110);
context.lineTo(-15,-110);
//树的顶点
context.lineTo(0,-140);
context.lineTo(15,-110);
context.lineTo(5,-110);
context.lineTo(20,-80);
context.lineTo(10,-80);
context.lineTo(25,-50);
//连接起点,闭合路径
context.closePath();
}
function drawTree(context) {
var trunkGradient=context.createLinearGradient(-5,-50,5,-50);
trunkGradient.addColorStop(0,'#663300');
trunkGradient.addColorStop(0.4,'#996600');
trunkGradient.addColorStop(1,'#552200');
context.fillStyle=trunkGradient;
context.fillRect(-5,-50,10,50);
var canoyShadow =context.createLinearGradient(0,-50,0,0);
canoyShadow.addColorStop(0,'rgba(0,0,0,0.5)');
canoyShadow.addColorStop(0.2,'rgba(0,0,0,0)');
context.fillStyle=canoyShadow;
context.fillRect(-5,-50,10,50);
createCanopyPath(context);
context.lineWidth=4;
context.lineJoin='round';
context.strokeStyle='#663300';
context.stroke();
context.fillStyle="#339900";
context.fill();
context.save();
//X值随着Y值的增加面增加,借助拉伸变换,可创建一棵作阴影的树
context.transform(1,0,-0.5,1,0,0);
//在Y轴方向
context.scale(1,0.6);
context.fillStyle='rgba(0,0,0,0.2)';
context.fillRect(-5,-50,10,50);
createCanopyPath(context);
context.fill();
context.restore();
}
function drawTrails () {
var canvas=document.getElementById("trails");
var context=canvas.getContext("2d");
context.save();
context.font='60px impact';
context.fillStyle='#996600';
context.textAlign='center';
//加阴影
context.shadowColor='rgba(0,0,0,0.2)';
context.shadowOffsetX=15;
context.shadowOffsetY=-10;
context.shadowBlur=2;
context.fillText('Happy Trails!',200,60,400);
context.restore();
context.save();
context.translate(130,250);
drawTree(context);
context.restore();
//保存canvas的状态并绘制路径
context.save();
context.translate(260,500);
context.scale(2,2);
drawTree(context);
context.restore();
context.translate(-10,350);
context.beginPath();
//第一条曲线向右上方弯曲
context.moveTo(0,0);
context.quadraticCurveTo(170,-50,260,-190);
//第二条曲线
context.quadraticCurveTo(310,-250,410,-250);
//使用棕色的粗线条来绘制路径
context.strokeStyle='#663300';
context.lineWidth=20;
context.stroke();
}
window.addEventListener("load",drawTrails,true);
</script>
<body>
<canvas id="trails" style="border:1px solid;" width="400" height="600">
</canvas>
</body>
</html>
[/code]
2011-5-14 11:26 danny