canvas教程

MDN的Canvas教程，十分实用；

绘制方法

canvas仅支持两种形式的图形绘制：矩形和路径；

绘制矩形

canvas提供了三种方法绘制矩形：

fillRect(x, y, width, height)，绘制一个填充的矩形；

strokeRect(x, y, width, height)，绘制一个矩形的边框；

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

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

rect(x, y, width, height)

该函数可以绘制一个矩形，横纵坐标和宽高作为参数；

绘制路径

图形的基本元素是路径。路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。一个路径，甚至一个子路径，都是闭合的。使用路径绘制图形需要一些额外的步骤。

1. 首先，你需要创建路径起始点；beginPath()，新建一条路径（注意此时啥都没画，只是相当于初始化了一支画笔）
2. 然后你使用画图命令去画出路径；moveTo(x, y)，参数是坐标，该函数把画笔移动到某个坐标位置，但也不会画出任何东西，相当于初始化了起始坐标；
3. 之后你把路径封闭；closePath()，这个方法会通过绘制一条从当前点到开始点的直线来闭合图形。如果图形是已经闭合了的，即当前点为开始点，该函数什么也不做。
4. 一旦路径生成，你就能通过描边或填充路径区域来渲染图形；stroke()通过线条来绘制图形轮廓。fill()通过填充路径的内容区域生成实心的图形。

注意：当你调用fill()函数时，所有没有闭合的形状都会自动闭合，所以你不需要调用closePath()函数。但是调用stroke()时不会自动闭合。

样式和颜色

色彩

色彩相关的两个属性：

fillStyle = color设置图形的填充颜色。

strokeStyle = color设置图形轮廓的颜色。

全局，透明度相关的属性：globalAlpha = transparencyValue

这个属性影响到 canvas 里所有图形的透明度，有效的值范围是 0.0 （完全透明）到 1.0（完全不透明），默认是 1.0。对于需要批量配置同个透明度的场景适用；

线型Line styles

lineWidth = value设置线条宽度。

lineCap = type设置线条末端样式。

lineJoin = type设定线条与线条间接合处的样式。

miterLimit = value限制当两条线相交时交接处最大长度；所谓交接处长度（斜接长度）是指线条交接处内角顶点到外角顶点的长度。

getLineDash()返回一个包含当前虚线样式，长度为非负偶数的数组。

setLineDash(segments)设置当前虚线样式。

lineDashOffset = value设置虚线样式的起始偏移量。

记录相关API

绘制线段

lineTo(x, y)

从当前位置到(x, y)坐标位置画一条线段；画个三角形：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
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.fill();

  // 描边三角形
  ctx.beginPath();
  ctx.moveTo(125, 125);
  ctx.lineTo(125, 45);
  ctx.lineTo(45, 125);
  // 注意要封闭路径
  ctx.closePath();
  ctx.stroke();
  }
}

绘制弧线

arc(x, y, radius, startAngle, endAngle, anticlockwise)

该函数可以画出圆弧，前两个参数表示圆心所在的坐标；radius表示半径长度；随后是开始和结束的弧度；最后一个参数是bool，true表示逆时针，false表示顺时针；

quadraticCurveTo(cp1x, cp1y, x, y)

该函数可以绘制二次贝塞尔曲线，挺麻烦的就不介绍了；

bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)这个函数可以绘制三次贝塞尔曲线。

getContext

参数

·contextType·，字符串，上下文类型，常用的有2d；

·contextAttributes·，对象，上下文属性，2d对应的属性有：

alpha: boolean值表明canvas包含一个alpha通道. 如果设置为false, 浏览器将认为canvas背景总是不透明的, 这样可以加速绘制透明的内容和图片.

• ← Previous Post
• Next Post →