canvas基础知识点(一)

canvas基础知识点(一)

canvas说简单点就是一个标签，跟<img> 标签很类似，但是没有src 属性，<canvas> 标签只有两个属性：height和width ；说复杂点，canvas 可以绘制图形、绘制文本、绘制图像、制作动画等都是妥妥的，在此只讨论绘制图形，其他的就不多说了。

注：canvas默认的初始宽度为300像素，高度为150像素，所以如果你用css设置的宽度和高度跟这个比例不一致，你会发现你画的图形是扭曲的，明明画个圆显示出来却是个椭圆，所以建议你最好还是在canvas 的属性里定义宽高。

一、基础用法

<canvas id="canvas" width="150" height="150">
  <p>抱歉，你的浏览器尚不支持canvas标签。</p>
</canvas>

对于不支持canvas标签的元素，p元素的内容就会显示出来，而支持canvas的浏览器，则不会显示canvas标签中间的元素。

<canvas>标签创造了一个画布，接下来就是使用JS来绘制了。

var canvas = document.getElementById('canvas');
if (canvas.getContext){
  var ctx = canvas.getContext('2d');//使用getContext() 方法来获取绘画上下文
  // drawing code here
}

上面的if判断不是必须的，只是笔者习惯再检查一下canvas的支持性，建议你也这么做。

二、常用方法

(一)、绘制形状

1. fillRect(x,y,width,height):绘制一个填充的矩形，x、y是矩形的左上顶点的坐标，width、height分别是矩形的宽和高；

2. strokeRect(x,y,width,height):绘制一个矩形的边框,参数同上;

3. clearRect(x,y,width,height):清除指定矩形区域，让清除部分完全透明。

   以上三种是绘制矩形的，接上面的代码：

   // drawing code here
   ctx.fillRect(25,25,100,100);
   ctx.clearRect(40,40,60,60);
   ctx.strokeRect(50,50,50,50);

效果如下：

1. arc(x,y,radius,startAngle,endAngle,anticlockwise):画一个以（x,y）为圆心的以radius为半径的圆弧（圆），从startAngle开始到endAngle结束，按照anticlockwise给定的方向（默认为顺时针）来生成。

2. arcTo(x1,y1,x2,y2,radius):根据给定的控制点和半径画一段圆弧，再以直线连接两个控制点。

   以上两种是绘制圆弧的方法，例子：

   //描边圆
   ctx.arc(80,80,50,0,2*Math.PI,false);
   ctx.stroke();
   
   // //填充圆
   ctx.fill();

   效果分别如下：

   
   

(二)、绘制路径

路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。以下是所要用到的函数；

1. beginPath():新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径;

2. closepath():闭合之前的路劲，闭合之后图形绘制命令又重新指向到上下文中；

3. stroke():通过线条来绘制图形轮廓；

4. fill():通过填充路径的内容区域生成实心的图形；

5. moveTo(x,y):将笔触移动到指定的坐标x、y上，这个点就是当前路径的起点坐标;

6. lineTo(x,y):绘制一条从当前位置到指定x以及y位置的直线,x、y 代表直线结束的点的坐标。

使用路径绘制形状的的一般步骤：
(1).创建路径的起始点；

(2).使用画图命令画出路径；

(3).把路径闭合；

(4).通过描边或填充路径区域来渲染图形；

例如，画一个三角形：

function draw() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext){
    var ctx = canvas.getContext('2d');

    ctx.beginPath();
    ctx.moveTo(100,100);
    ctx.lineTo(150,55);
    ctx.lineTo(100,25);
    ctx.fill();
  }
}

效果如下：

画两个三角形：

function draw() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext){
    var ctx = canvas.getContext('2d');

    // 填充三角形
    ctx.beginPath();
    ctx.moveTo(25,25);
    ctx.lineTo(105,25);
    ctx.lineTo(25,105);
    ctx.fillStyle = "red";  //定义填充的颜色
    ctx.fill();

    // 描边三角形
    ctx.beginPath();
    ctx.moveTo(125,125); //使用moveTo() 将笔触移动到一个新的起点
    ctx.lineTo(125,45);
    ctx.lineTo(45,125);
    ctx.closePath();
    ctx.lineWidth = 3; //定义线的粗细
    ctx.stroke();
  }
}

上例中用到了fillStyle和lineWidth两个属性，分别是用来定义填充颜色和描边线宽度的，类似的还有strokeStyle,用来定义描边线的颜色。

效果如下：