springleo's blog

# Canvas基础

canvas 看起来和 img 元素很相像，唯一的不同就是它并没有 src 和 alt 属性。实际上，canvas 标签只有两个属性—— width和height。

canvas 元素创造了一个固定大小的画布，canvas起初是空白的。为了展示，首先脚本需要找到渲染上下文，然后在它的上面绘制。你可以通过使用它的getContext() 方法来访问绘画上下文。

var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d'); // 画图基础

# 概念

# xy

栅格的起点为左上角（坐标为（0,0））。所有元素的位置都相对于原点定位。

# 绘制形状

# 1. 绘制矩形

canvas只支持一种原生的图形绘制（马上显现在canvas上，即时生效）：矩形。所有其他的图形的绘制都至少需要生成一条路径。canvas提供了三种方法绘制矩形：

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

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

# 2. 绘制路径

路径绘制图形步骤：

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

函数

  • beginPath()，路径的第一步。 新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径。
  • closePath()，不是必需的。 闭合路径。
  • stroke()，没有闭合的形状不会自动闭合。 通过线条来绘制图形轮廓。
  • fill()，没有闭合的形状都会自动闭合。 通过填充路径的内容区域生成实心的图形。

# 总结

  1. 画矩形
    • fillRect
  2. 画路径
    • 基础
      • beginPath()。常和moveTo（将笔触移动到指定的坐标x以及y上）搭配
      • closePath() 和开始路径形成闭合路径。
      • fill() 填充
      • stroke() 画线
    • 画图形
      • arc(x, y, radius, startAngle, endAngle, anticlockwise)
      • lineTo(x, y) 绘制直线

画路径，一定是遇到stroke/fill方法，才开始绘制。

生成闭合路径（如三角形边框），需要closePath + stroke()组合。当然，如果你本身是不需要闭合的图形，则直接使用stroke即可。

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

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

# 样式和颜色

  • 颜色
    • fillStyle
    • strokeStyle
  • 样式
    • globalAlpha
    • lineWidth
    • globalCompositeOperation 遮盖策略
// 这些 fillStyle 的值均为 '橙色'
ctx.fillStyle = "orange";
ctx.fillStyle = "#FFA500";
ctx.fillStyle = "rgb(255,165,0)";
ctx.fillStyle = "rgba(255,165,0,1)";

// 设置透明度值
ctx.globalAlpha = 0.2;

// 当前绘线的粗细
ctx.lineWidth = 1;

// 设置遮盖策略：交集清除
ctx.globalCompositeOperation = 'destination-out'

# 绘制元素

  1. 图片
    • drawImage(imageOrCanvas, x, y)。image 是 image 或者 canvas 对象，x 和 y 是其在目标 canvas 里的起始坐标。
  2. 文本
    • fillText(text, x, y [, maxWidth]) 在指定的(x,y)位置填充指定的文本，绘制的最大宽度是可选的.
    • strokeText(text, x, y [, maxWidth]) 在指定的(x,y)位置绘制文本边框，绘制的最大宽度是可选的.
var img = new Image();
img.src = 'images/backdrop.png';
img.onload = function(){
    ctx.drawImage(img,0,0);
}

ctx.font = "48px serif";
ctx.fillText("Hello world", 10, 50);

数据结构 →