3、在Canvas下做图2

2012-10-18

3、在Canvas上做图21、提取成函数drawTreefunction drawTree(context) {var trunkGradientcontext.createLi

3、在Canvas上做图2
1、提取成函数

drawTree

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();}

添加放大的树全部代码：

<!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>

结果：

2、加阴影
在DrawTree中加入画阴影的代码：

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();}

结果：

3、加入文本
加入如下代码

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();

显示结果：

4、应用阴影，字体
添加如下代码：

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();

结果：

全部代码：

<!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>

2011-5-14 11:26 danny

热点排行

Web前端

3、在Canvas下做图2