Canvas入门实例02：简单的直线

本文示例canvas最基本的path操作：画一条直线。

function drawScreen(){
  var context = theCanvas.getContext('2d');
  
  context.strokeStyle = '#000000';
  context.lineWidth = 10;
  context.lineCap = 'square';
  context.beginPath();
  context.moveTo(20, 0);
  context.lineTo(100, 0);
  context.stroke();
  context.closePath();
}

 

 

1) 每个Canvas上下文仅有一个当前path；

2) 通过beginPath()方法开始一个path，closePath()方法结束一个path;

3) path有两个最基本的方法: moveTo() 、lineTo();

4) lineCap属性有三个值：

    butt: (默认)边缘是平的，与当前线条垂直。

    round: 边缘是个半圆，该半圆的直径是当前线条的长度。

    square: 边缘是长方形，该长方形的长是当前线条的宽度，宽是当前线条的宽度的一半。

5) lineWidth属性用来设置线条的宽度(ps:目前Chrome下奇数宽度渲染效果会有些模糊)

6) strokeStyle属性定义当前线条的颜色及样式。