HTML5 Canvas 第二篇

书接上文,原谅我写博客新手,并且还是这种总结性的文章.虽然是自己的学习笔记,但也不能这么潦草.这篇开始,好好排版,删掉废话.归纳总结为主.

首先,回顾一下.

页面中加入的canvas

  <canvas id="diag" style="border:1px solid" width="200" height="200"> 
  </canvas>

相应的绘制对角线的JS代码

function draw(){
  var canvas = document.getElementById('diag');
  var context = canvas.getContext('2d');
  
  context.beginPath();
  context.moveTo(70,140);
  context.lineTo(140,70);
  
  context.stroke();
}
window.addEventListener("load", draw, true);

所呈现的图像

OK,这次主要是用一下变换的方式来重新绘制一下.并且用路径绘出树,用曲线绘制出跑道.

2.1 变换

修正---在绘制系统中的说法就是变换.可以将变换当做介于开发人员发出的指令和canvas显示结果之间的一个修正层.不管开发时是否需要,他都是存在的.

在应用时可以被顺序应用、组合或者随意覆盖.关于可重用代码有一条重要的建议:一般绘制都应从原点(0,0)开始,应用变换(缩放、平移、旋转等),然后不断修改代码直至达到希望的效果.

代码:用变换的方式在canvas上绘制对角线

function draw(){
  var canvas = document.getElementById('diag');
  var context = canvas.getContext('2d');
  //保存当前绘图状态
  context.save();
  //想右下方移动绘图上下文
  context.translate(70,140);
  //以原点为起点,绘制与前面相同的线段
  context.beginPath();
  context.moveTo(0,0);
  context.lineTo(70,-70);
  
  context.stroke();
}

从第三句开始讲,保存未修改的context,这样即使进行了绘制和变换,也可以恢复到初始的状态.

下一步,translate函数的调用是当平移行为发生时,我们提供的变换座标会被加到结果座标(对角线)上去,结果就是将要绘制的对角线移动到了新的位置上.不过是在绘制操作结束之后.

应用平移后的绘制.

绘制后的对角线和前面的一模一样.

2.2 路径

顾名思义就是绘制一条线条.路径可以代表你所想在canvas上呈现的任何图像,可以要多复杂就有多复杂,多线条、曲线段、甚至是子路径.

讲一下那三个最常调用也是这节要绘制树冠轮廓的函数.

beginPath() 就是用来通知canvas将要开始绘制一个新的图形了.canvas需要据此来计算图形的内部和外部范围,以便完成后续的填充和描边.

movaTo(x,y) 不绘制,只是将当前位置移动到新目标上(x,y)

lineTo(x,y) 不仅将当前位置移动到新的目标(x,y),而且要在两个座标之间画一条直线.

接下来,讲一个特殊的路径函数 closePath() 和lineTo很像,唯一的差别就是closePath会将路径的起始座标作为目标座标.还会通知canvas当前绘制的图像已经闭合或者形成了完全封闭的区域.若想绘制子路径,就可以在调用beginPath重新绘制新路径并完全清除之前的所有路径.

代码:绘制树冠的轮廓

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

代码:在canvas上绘制树的轮廓

function draw(){
  var canvas = document.getElementById('diag');
  var context = canvas.getContext('2d');
  
  context.save();
  context.translate(130,250);
  //创建表现树冠的路径
  createPath(context);
  //绘制当前路径
  context.stroke();
  context.restore();
}

还是先获取canvas的上下文对象,保存以便后使用,将当前位置变换到新位置,画树冠,绘制到canvas上,最后恢复上下文的初始对象.

如图:

2.3 描边样式

先上代码:使用描边样式

  //加宽线条
  context.lineWidth = 4;
  //平滑路径的结合点
  context.lineJoin = 'round';
  //将颜色改为棕色
  context.strokeStyle = '#663300';
  //最后,绘制树冠
  context.stroke();

首先,将线条宽度加粗到4像素.其次,将lineJoin属性设置为round,修改当前形状中线段的连接方式(还有 bevel、miter).最后,通过strokeStyle属性改变线条的颜色(还可以用于生成特殊效果的图案或渐变色).

还有一个属性 lineCap 属性值为:butt,square,round.以此来制定线条末端的样式.

如图:

2.4 填充

代码:使用填充样式

  //将绿色填充树冠
  context.fillStyle = '#339900';
  context.fill();

fill函数就可以让canvas对当前图形中所以的闭合路径内部的像素点进行填充,效果如下:

由于我们是先描边后填充,所以填充会覆盖一部分描边路径.填充就是把路径轮廓内部的所以像素全部填充,所以会覆盖描边路径的一半.如果希望看到完整路径,可以在绘制路前填充.

代码:填充矩形区域

  //棕色为填充色
  context.fillStyle = '#663300';
  //填充用作树干的矩形区域
  context.fillRect(-5,-50,10,50);

效果如图:

这次和上次不一样的是,我们不用lineTo画出边角,而是使用fillRect一步到位画出整个树干.fillRect(x,y,w,h) (x,y)是点座标,w宽度,h高度. 与这个函数差不多的还有strokeRect(基于给出的位置画出矩形的轮廓)、clearRect(清除矩形域内的所以内容并将它恢复到初始状态,即透明色).

2.5 绘制曲线

我们使用最简单的曲线函数--二次函数,来绘制小路.

代码:绘制曲线

  //保存之前的状态并绘制路径
  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();
  //恢复状态
  context.restore();

quadraticCurveTo函数绘制曲线的起点是当前座标.带有两组参数,第二组是指曲线的终点.第一组代表控制点(control point).所谓的控制点位于曲线的旁边(不在曲线之上),其作用相当于对曲线产生一个拉力.通过调整控制点的位置,就可以改变曲线的曲率.

效果如图: