2、在Canvas上做图

wavaya · 发表于 2013-2-7 20:52:28

在Canvas上做图

1、绘制树冠轮廓

<!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 drawTrails () {var canvas=document.getElementById("trails");var context=canvas.getContext("2d");context.save();context.translate(130,250);//创建表现树冠的路径createCanopyPath(context);//绘制当前路径context.stroke();context.restore();}window.addEventListener("load",drawTrails,true);</script><body><canvas id="trails" style="border:1px solid;" width="400" height="400"></canvas></body></html>

效果是画出树的外冠

2、描边样式
增加代码
//创建表现树冠的路径createCanopyPath(context); //加宽线条 context.lineWidth=4; //平滑路径 context.lineJoin='round'; //将颜色改成棕色 context.strokeStyle='#663300'; //绘制当前路径context.stroke();

结果：

3、填充样式
增加填充代码
//将填充色设置为绿色并填充树冠context.fillStyle='#339900';context.fill();//绘制当前路径context.stroke();
结果：

4、填充矩形区域
增加填充矩形区域代码
//将填充色设置为绿色并填充树冠context.fillStyle='#339900';context.fill();//将填充色设为棕色context.fillStyle="#663300";//填充用作树干的矩形区域context.fillRect(-5,-50,10,50);//绘制当前路径context.stroke();
结果：

5、绘制曲线
添加曲线
//绘制当前路径context.stroke();context.restore();//保存canvas的状态并绘制路径context.save();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();}
结果：

2011-5-14 9:13 danny

所有代码清单：
<!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 drawTrails () {var canvas=document.getElementById("trails");var context=canvas.getContext("2d");context.save();context.translate(130,250);//创建表现树冠的路径createCanopyPath(context);//加宽线条context.lineWidth=4;//平滑路径context.lineJoin='round';//将颜色改成棕色context.strokeStyle='#663300';//将填充色设置为绿色并填充树冠context.fillStyle='#339900';context.fill();//将填充色设为棕色context.fillStyle= '#663300';//填充用作树干的矩形区域context.fillRect(-5,-50,10,50);//绘制当前路径context.stroke();context.restore();//保存canvas的状态并绘制路径context.save();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="400"></canvas></body></html>

		自动登录	找回密码
密码			立即注册