常用canvas元素的操作

耿玉
173 阅读4分钟

1 canvas元素的api

canvas元素并没有提供很多的api,有两个属性三个方法需要我们掌握，分别是width,height.getContext(),toDataURL(),toBlob()

    <canvas id="canvas" height="300" width="600"></canvas>

1.1 属性

  • width: 宽度属性，设置canvas的宽度
  • height: 高度属性，设置canvas的高度

canvas看起来和<img/>很像，但canvas并没有src 和alt属性，其实canvas只有width和height这两个属性，这些属性都是可选的。当没有设置canvas元素宽高的时候，canvas默认的宽高时300px和150px。id属性并不是<canvas>元素所特有的，而是每一个HTML元素（比如class元素）都默认具有的属性。

1.2 方法

  • getContext()
  • toDataURL(type)
  • toBlob()

getContext()这个方法时用来绘图上下文的功能，getContext只有一个参数，及上下文格式。对于2D绘图，为了获取接口对象，只需再canvas调用getContext并提供一个’2d‘参数，如下：

    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');

代码的第一行使用getElementByid方法去取得DOM元素对象，一旦有了元素对象，你可以通过getContext()方法来访问绘图上下文。

2 canvas绘图环境

获取2d绘图环境只需向canvas元素的getContext()传入2d,获取3D绘图环境只需传入3d。3d绘图环境遵循WebGL标准，webGL基于openGL-ES 2.0标准。一般我们只是用2d绘图环境，下面内容也是基于此。

2.1 canvas状态保存于恢复

在绘图操纵时，很多时候想要临时的设置某些属性的值，比如改变lineWidth、颜色等等，然后在后续操作使用完毕后，继续使用上一次的绘图属性，这种情况下我们可以使用save()和restore()两个方法进行绘图环境的“保存”、“恢复”操作。

function drawGrid(strokeStyle, fillstyle){
    ctx.save();
    ctx.lineWidth = '1px';
    
    // drwaw the grid
    
    ctx.restore(); // 回复上一次的绘图状态
}

save()和restore()方法可以嵌套使用：

ctx.lineWidth = '1px'; // 初始设置线宽为1px
ctx.save(); // 保存绘图状态
    ctx.lineWidth = '2px'; 
    // 此处以 lineWidth = '2px' 绘制
    // draw something

    ctx.save(); // 保存绘图状态
        ctx.lineWidth = '3px;'
        // 此处以 lineWidth = '3px' 绘制
        // draw something
    ctx.restore();
        
    // 此处恢复 lineWidth = '2px' 
    
ctx.restore(); 

// 此处恢复初始 lineWidth = '1px' 绘制

canvas采用立即绘图模式来绘制图形的，

2.2 绘制

绘制矩形
fillRect(x, y, width, height) // 绘制一个填充的矩形
strokeRect(x, y, width, height)  // 绘制一个矩形的边框
clearRect(x, y, width, height)  //清除指定矩形区域，让清除部分完全透明

上面提供的方法之中每一个都包含了相同的参数。x与y指定了在canvas画布上所绘制的矩形的左上角（相对于原点）的坐标。width和height设置矩形的尺寸。

例子：

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

    ctx.fillRect(25, 25, 100, 100);
    ctx.clearRect(45, 45, 60, 60);
    ctx.strokeRect(50, 50, 50, 50);
  }
}
绘制路径
  1. 首先，你需要创建路径起始点。
  2. 然后你使用画图命令去画出路径。
  3. 之后你把路径封闭。
  4. 一旦路径生成，你就能通过描边或填充路径区域来渲染图形。
    beginPath()     //新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径。
    closePath()     //闭合路径之后图形绘制命令又重新指向到上下文中。
    stroke()    //通过线条来绘制图形轮廓。
    fill()  // 通过填充路径的内容区域生成实心的图形。

生成路径的第一步叫做beginPath()。本质上，路径是由很多子路径构成，这些子路径都是在一个列表中，所有的子路径（线、弧形、等等）构成图形。而每次这个方法调用之后，列表清空重置，然后我们就可以重新绘制新的图形。

第二步就是调用函数指定绘制路径，

第三，就是闭合路径closePath(),不是必需的。这个方法会通过绘制一条从当前点到开始点的直线来闭合图形。如果图形是已经闭合了的，即当前点为开始点，该函数什么也不做。

eg：绘制一个三角形

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

    ctx.beginPath();
    ctx.moveTo(75, 50);
    ctx.lineTo(100, 75);
    ctx.lineTo(100, 25);
    ctx.fill();
  }
}
移动笔触
    moveTo(x, y)    //将笔触移动到指定的坐标x以及y上。
线
lineTo(x, y)    //绘制一条从当前位置到指定x以及y位置的直线。
圆弧
    // 画一个以（x,y）为圆心的以radius为半径的圆弧（圆）
    // 从startAngle开始到endAngle结束，按照anticlockwise给定的方向（默认为顺时针）来生成。  
    arc(x, y, radius, startAngle, endAngle, anticlockwise)

完。

avatar
文章
阅读
粉丝