canvas

可以使用Javascript来绘制图形。
是一个 HTML 元素。
浏览器支持度也不错。

基本属性

1 2	<canvas id=“canvasId” width=“150” height=“150”> </canvas>

默认初始值：
width 300px ； height：150px
css 的设置：
（1）width 属性和 height 属性，比 css 设置更有效果。
（2）margin border background 等属性不会影响 canvas 的实际效果。
渲染上下文：
（1）含义：固定大小的 2D 画布。
（2）API： getContext() ：获取渲染上下文和绘画功能。接受一个参数 - 上下文的类型。

1 2	var canvas = document.getElementById(‘canvasId’) canvas.getContext(‘2d’)

检查 canvas 支持性：

var canvas = document.getElementById('tutorial');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
// drawing code here
 } else {
// canvas-unsupported code here
}

常见 API

可以绘制的基本形状 : 矩形、三角形、直线、圆弧和曲线。
（1）栅格：起点为左上角，单位为像素。
（2）绘制矩形和路径：
矩形 API：
x y 指定了在 canvas 画布上绘制的左上角（相对于原点）的坐标。
width heighgt 设置矩形的尺寸。
（1）fillRect (x, y, width, height)：绘制一个填空的矩形
（2）storkeRect (x, y, width, height) 绘制一个矩形的边框
（3）clearRect (x, y, width, height) 清除指定矩形区域，让清除部分完全透明
（4）rect (x, y, width, height) 绘制一个左上角坐标为（x,y），宽高为 width以及 height 的矩形。
路径 API：
x y 指定了在 canvas 画布上绘制的左上角（相对于原点）的坐标。
（1）beginPath : 开始绘制一个新的形状路径
（2）moveTo (x , y)：将笔触移动到指定的坐标 x 以及 y
（3）lineTo (x, y)：绘制一条从当前位置到指定x 以及 y 的直线
（4）closePath：结束路径。使用 fill 时就不需要调用它，如果是描边 stroke时，则需要用。
（5）stroke：描边。
（6）fill：填充。

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

详细参数介绍：
x,y 为绘制圆弧所在圆上的圆心坐标。radius 为半径。startAngle 以及 endAngle 参数用弧度定义了开始以及结束的弧度。这些都是以 x 轴为基准。参数 anticlockwise 为一个布尔值。为 true 时，是逆时针方向，否则顺时针方向。

二次贝赛尔曲线和三次贝赛尔曲线：
用来绘制复杂有规律的曲线。
（1）quadraticCurveTo (cp1x, cp1y, x, y)
绘制二次贝塞尔曲线，cp1x , cp1y 为一个控制点，x,y 为结束点。

（2）bezierCurveTo (cp1x, cp1y, cp2x, cp2y, x, y)
绘制三次贝塞尔曲线，cp1x, cp1y 为控制点一，cp2x, cp2y 为控制点二，x,y 为结束点。

绘画历史记录 path2D

path2D 对象，可用来缓存或记录绘画命令。

new Path2D();     // 空的Path对象
new Path2D(path); // 克隆Path对象
new Path2D(d);    // 从SVG建立Path对象

API :
path2D.addPath(path)

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

    var rectangle = new Path2D();
    rectangle.rect(10, 10, 50, 50);

    var circle = new Path2D();
    circle.moveTo(125, 35);
    circle.arc(100, 35, 25, 0, 2 * Math.PI);

    ctx.stroke(rectangle);
    ctx.fill(circle);
  }
}

使用样式和颜色

添加色彩：fillStyle 和 strokeStyle

API:
ctx.fillStyle = color色值
ctx.strokeStyle = color色值

// 这些 fillStyle 的值均为 '橙色'
ctx.fillStyle = "orange";
ctx.fillStyle = "#FFA500";
ctx.fillStyle = "rgb(255,165,0)";
ctx.fillStyle = "rgba(255,165,0,1)";

透明度 Transparentcy、rgba
属性 globalAlpha
用法：
ctx.globalAlpha = transparentcyValue （0 - 1）
ctx.fillStyle = rgba(255,255,255, transparentcyValue （0 - 1）)

线 style

lineWidth ：线条宽度（线条粗细）
lineCap：决定线段端点显示的样子（butt round square）butt 默认
lineJoin：图形中两线段连接处所显示的样子（round bevel miter）miter 默认
虚线：
setLineDash: 用一个数组，指定线段与间隙的交替
lineDashOffset：设置起始偏移量

demo：实现虚线背景选区边框

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

function draw() {
  ctx.clearRect(0,0, canvas.width, canvas.height);
  ctx.setLineDash([4, 2]);
  ctx.lineDashOffset = -offset;
  ctx.strokeRect(10,10, 100, 100);
}

function march() {
  offset++;
  if (offset > 16) {
    offset = 0;
  }
  draw();
  setTimeout(march, 20);
}

march();

剪切
API： ctx.clip() 利用创建的路径，生成可裁剪区域，并把当前工作区域与裁剪区域绑定。

// 橡皮擦功能
ctx.beginPath()
ctx.save()
ctx.clip()
ctx.clearRect(0, 0, canvas.width, canvas.height)
ctx.restore()

填充或描边的渐变

createLinearGradient 和 createRadialGradient 赋给图形的 fillStyle 或 strokeStyle 属性。

createLinearGradient(x1, y1, x2, y2)
createLinearGradient 方法接受 4 个参数，表示渐变的起点 (x1,y1) 与终点 (x2,y2)。
createRadialGradient(x1, y1, r1, x2, y2, r2)
createRadialGradient 方法接受 6 个参数，前三个定义一个以 (x1,y1) 为原点，半径为 r1 的圆，后三个参数则定义另一个以 (x2,y2) 为原点，半径为 r2 的圆。
gradient.addColorStop(position, color)
addColorStop 方法接受 2 个参数，position 参数必须是一个 0.0 与 1.0 之间的数值，表示渐变中颜色所在的相对位置。例如，0.5 表示颜色会出现在正中间。color 参数必须是一个有效的 CSS 颜色值（如 #FFF， rgba(0,0,0,1)，等等）。

// 线性黑白渐变
var lineargradient = ctx.createLinearGradient(0,0,150,150);
lineargradient.addColorStop(0,'white');
lineargradient.addColorStop(1,'black');

图案样式 Patterns

createPattern(image, type) ：循环实现图案的效果。
该方法接受两个参数。Image 可以是一个 Image 对象的引用，或者另一个 canvas 对象。Type 必须是下面的字符串值之一：repeat，repeat-x，repeat-y 和 no-repeat。

// onload 确保图案加载好
function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');

  // 创建新 image 对象，用作图案
  var img = new Image();
  img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png';
  img.onload = function() {

    // 创建图案
    var ptrn = ctx.createPattern(img, 'repeat');
    ctx.fillStyle = ptrn;
    ctx.fillRect(0, 0, 150, 150);

  }
}

阴影 Shadows

shadowOffsetX = float
shadowOffsetX 和 shadowOffsetY 用来设定阴影在 X 和 Y 轴的延伸距离，它们是不受变换矩阵所影响的。负值表示阴影会往上或左延伸，正值则表示会往下或右延伸，它们默认都为 0。
shadowOffsetY = float
shadowOffsetX 和 shadowOffsetY 用来设定阴影在 X 和 Y 轴的延伸距离，它们是不受变换矩阵所影响的。负值表示阴影会往上或左延伸，正值则表示会往下或右延伸，它们默认都为 0。
shadowBlur = float
shadowBlur 用于设定阴影的模糊程度，其数值并不跟像素数量挂钩，也不受变换矩阵的影响，默认为 0。
shadowColor = color
shadowColor 是标准的 CSS 颜色值，用于设定阴影颜色效果，默认是全透明的黑色。

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

  ctx.shadowOffsetX = 2;
  ctx.shadowOffsetY = 2;
  ctx.shadowBlur = 2;
  ctx.shadowColor = "rgba(0, 0, 0, 0.5)";

  ctx.font = "20px Times New Roman";
  ctx.fillStyle = "Black";
  ctx.fillText("Sample String", 5, 30);
}

绘制文本

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

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  ctx.font = "48px serif";
  ctx.fillText("Hello world", 10, 50);
}

canvas 改变文本样式：

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。

1
2
3

ctx.font = "48px serif";
ctx.textBaseline = "hanging";
ctx.strokeText("Hello world", 0, 100);

canvas 获取文本的属性对象

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  var text = ctx.measureText("foo"); // TextMetrics object
  text.width; // 16;
}

使用图像

图片源可使用 PNG、GIF 或者 JPEG ，甚至是 canvas 生成的图片

HTMLImageElement
这些图片是由Image()函数构造出来的，或者任何的元素

var img = new Image();   // 创建img元素
img.onload = function(){
  // 执行drawImage语句
}
img.src = 'myImage.png'; // 设置图片源地址
// img.src = 'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw==';

HTMLVideoElement
用一个HTML的

HTMLCanvasElement
可以使用另一个
ImageBitmap
这是一个高性能的位图，可以低延迟地绘制，它可以从上述的所有源以及其它几种源中生成。
crossOrigin 属性，可请求加载其他域名的图片，而不会污染 canvas
drawImage(image, x, y)：其中 image 是 image 或者 canvas 对象，x 和 y 是其在目标 canvas 里的起始坐标。

缩放 Scaling
drawImage(image, x, y, width, height)
这个方法多了2个参数：width 和 height，这两个参数用来控制当向canvas画入时应该缩放的大小

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  var img = new Image();
  img.onload = function(){
    for (var i=0;i<4;i++){
      for (var j=0;j<3;j++){
        ctx.drawImage(img,j*50,i*38,50,38);
      }
    }
  };
  img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
}

切片: 类似雪碧图
imageSmoothingEnabled: 制是否在缩放图像时使用平滑算法
过度缩放图像可能会导致图像模糊或像素化。开启可能会让合成的图片更清晰。

保存

canvas.toDataURL(’image/png‘)
默认设定。创建一个PNG图片。
Default setting. Creates a PNG image.
canvas.toDataURL(’image/jpeg‘, quality)
创建一个JPG图片。你可以有选择地提供从0到1的品质量，1表示最好品质，0基本不被辨析但有比较小的文件大小。
canvas.toBlob(callback, type, encoderOptions)
这个创建了一个在画布中的代表图片的Blob对像。

mdn