View on GitHub

baidu-ife

百度前端学院的练习及笔记

canvas

基本用法

<canvas width="500" height="500" id="drawing"></canvas>
// 1. 取得元素
var drawing = document.getElementById("drawing");
// 2. 传入"2d", 取得2D上下文(context)对象
if (drawing.getContext) {
    var content = drawing.getContext("2d");

    // n. 导出图像
    var imgURL = drawing.toDataURL("image/png");
}

2D上下文用法

坐标原点为(0, 0)

颜色和宽度(填充和描边)

// 画笔颜色
context.strokeStyle = "red";
// 填充颜色
context.fillStyle = "#00FFFF";
// 画笔宽度
context.lineWidth = 5;

矩形

方法 颜色 说明
strokeRect() strokeStyle 画矩形边
fillRect() fillStyle 填充矩形
clearRect() - 清除矩形区域

参数均为四个: 起点的xy坐标, 终点的xy坐标

路径

开始

// 开始, 当需要另一根线/图形时使用
context.beginPath();

路径方法

方法 参数 说明
arc 圆心x,y坐标、半径、起始结束角度(弧度)、逆顺时针(true/false) 弧线
arcTo 经过点x,y坐标、结束点x,y坐标、半径 从上一点绘制弧线,过一个坐标,指定半径到达一个坐标
lineTo 终点坐标 过上一点画到终点
moveTo 终点坐标 移动游标, 不绘图
bezierCurveTO 控制点1坐标、控制点2坐标、终点坐标 从上一点过控制点1、2到终点画bezier曲线
quadraticCurveTo 控制点坐标、终点坐标 从上一点过控制点到终点画二次曲线
rect 起始点坐标、宽度、高度 矩形路径

闭合

当没有封闭时, 将闭合

// 闭合路径
context.closePath();

上色

方法 说明
fill() 用fillStyle填充
stroke() 用strokeStyle填充

判断

isPointInPath(): 判断一个点是否位于路径上

文本

设置文本样式

// 样式
context.font = "bold 14px Arial";
// 文本对齐方式
context.textAlign = "center"; //start/end
// 文本基线
context.textBaseLine = "middle"; //top/hanging/alphabetic/ideographic/bottom

上文本

方法 说明
fillText() 用fillStyle填充(更多)
strokeText() 用strokeStyle填充

变换

基本变换

方法 参数 说明
rotate() 弧度 旋转
scale() x,y轴的缩放比例 缩放
translate() 新的坐标原点坐标 更改坐标原点

存档

通过save()保存设置, 通过restore()恢复设置

图像

drawImage()

参数(方式一):

要绘制的图像、起始点x,y坐标、宽,高度

参数(方式二):

  1. 一个image元素/另一个canvas元素
  2. 原图像的x坐标
  3. 原图像的y坐标
  4. 原图像的宽度
  5. 原图像的高度
  6. 目标图像的x坐标
  7. 目标图像的y坐标
  8. 目标图像的宽度
  9. 目标图像的高度

阴影

box-shadow

  1. shadowColor: 阴影颜色
  2. shadowOffsetX: x轴阴影偏移量
  3. shadowOffsetY: y轴阴影偏移量
  4. shadowBlur: 模糊像素数

渐变

background-color: linear-gradient()

创建canvasGradient实例

//一般
var gradient = context.createLinearGradient(30, 30, 70, 70);
//径向
gradient = context.createRadialGradient(30, 30, 70, 70);

参数:
一般: 起点x,y坐标、终点x,y坐标
径向渐变: 起点圆心x,y坐标和半径、终点圆心x,y坐标和半径

注意: 一般情况, 渐变是从(0,0)开始, 参数只是截取

指定色标

gradient.addColorStop(0, "black");
gradient.addColorStop(0, "blue");

上色与绘制

将canvasgradient对象赋予fillStyle/strokeStyle

模式

用重复的图像来填充或描边, 获得图像->装备给fillStyle/strokeStyle

//获得
pattern = context.createPattern(image, "repeat"); //repeat-x/repeat-y/no-repeat

注意: 一般情况, 模式是从(0,0)开始, 参数只是截取