了解 canvas

[Lmagic16]

了解canvas

canvas 坐标系统
canvas 基本用法

canvas 基础

<canvas> 元素创造了一个固定大小的画布，它公开了一个或多个渲染上下文，其可以用来绘制和处理要展示的内容。
<canvas> 标签只有两个属性—— width和height, 当没有设置宽度和高度的时候，canvas会初始化宽度为300像素和高度为150像素。

 <canvas id="tutorial" width="150" height="150"></canvas>

<canvas> 元素有一个叫做 getContext() 的方法，可以获得这个上下文。

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

画布栅格（canvas grid）的起点为左上角（坐标为（0,0））

canvas 用途

1. 绘制图形（矩形，三角形，直线，圆弧和曲线）

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

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

其中x与y指定了在canvas画布上所绘制的矩形的左上角（相对于原点）的坐标。width和height设置矩形的尺寸

2）绘制路径
通过绘制路径来绘制图形

a. 首先，你需要创建路径起始点。
b. 然后你使用画图命令去画出路径。
c. 之后你把路径封闭。
d. 一旦路径生成，你就能通过描边或填充路径区域来渲染图形。

beginPath()
// 新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径。
closePath()
// 闭合路径之后图形绘制命令又重新指向到上下文中。
stroke()
// 通过线条来绘制图形轮廓。
fill()
// 通过填充路径的内容区域生成实心的图形。

例如绘制三角形：

    ctx.beginPath();
    ctx.moveTo(75, 50);
    ctx.lineTo(100, 75);
    ctx.lineTo(100, 25);
    ctx.fill();

2.绘制样式
fillStyle = color
设置图形的填充颜色。

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

globalAlpha = transparencyValue
这个属性影响到 canvas 里所有图形的透明度，有效的值范围是 0.0 （完全透明）到 1.0（完全不透明），默认是 1.0。

lineWidth = value
设置线条宽度。

createLinearGradient(x1, y1, x2, y2) 渐变
createLinearGradient 方法接受 4 个参数，表示渐变的起点 (x1,y1) 与终点 (x2,y2)。

shadowOffsetX = float
shadowOffsetX 和 shadowOffsetY 用来设定阴影在 X 和 Y 轴的延伸距离，它们是不受变换矩阵所影响的。负值表示阴影会往上或左延伸，正值则表示会往下或右延伸，它们默认都为 0。

3.绘制文本
fillText(text, x, y [, maxWidth])
在指定的(x,y)位置填充指定的文本，绘制的最大宽度是可选的.

strokeText(text, x, y [, maxWidth])
在指定的(x,y)位置绘制文本边框，绘制的最大宽度是可选的.

font = value
当前我们用来绘制文本的样式. 这个字符串使用和 CSS font 属性相同的语法. 默认的字体是 10px sans-serif。

textAlign = value
文本对齐选项. 可选的值包括：start, end, left, right or center. 默认值是 start。

textBaseline = value
基线对齐选项. 可选的值包括：top, hanging, middle, alphabetic, ideographic, bottom。默认值是 alphabetic。

direction = value
文本方向。可能的值包括：ltr, rtl, inherit。默认值是 inherit。

4.使用图片
引入图像到canvas里需要以下两步基本操作：

1）获得一个指向HTMLImageElement的对象或者另一个canvas元素的引用作为源，也可以通过提供一个URL的方式来使用图片（参见例子）
2）使用drawImage()函数将图片绘制到画布上

5.变形、裁剪、合成

6.动画
绘制动画

7.像素操作
事实上，你可以直接通过ImageData对象操纵像素数据，直接读取或将数据数组写入该对象中。

var myImageData = ctx.createImageData(width, height);

基本 API

• moveTo(x, y) 将笔触移动到指定的坐标x以及y上。
• lineTo(x, y) 绘制一条从当前位置到指定x以及y位置的直线。
• arc(x, y, radius, startAngle, endAngle, anticlockwise)
  画一个以（x,y）为圆心的以radius为半径的圆弧（圆），从startAngle开始到endAngle结束，按照anticlockwise给定的方向（默认为顺时针）来生成。
• arcTo(x1, y1, x2, y2, radius)
  根据给定的控制点和半径画一段圆弧，再以直线连接两个控制点。
• quadraticCurveTo(cp1x, cp1y, x, y)
  绘制二次贝塞尔曲线，cp1x,cp1y为一个控制点，x,y为结束点。
  可使用二次贝塞尔曲线来渲染对话气泡
• bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
  绘制三次贝塞尔曲线，cp1x,cp1y为控制点一，cp2x,cp2y为控制点二，x,y为结束点。
  可使用三次贝塞尔曲线来绘制心形。
• rect(x, y, width, height)
  绘制一个左上角坐标为（x,y），宽高为width以及height的矩形。
• clip() 创建一个新的裁切路径