第十五章 使用 Canvas 绘图

使用 Canvas 绘图

1. 基本用法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<canvas id="drawing" width="200" height="200"></canvas>

var drawing = document.getElementById("drawing");

// 确定浏览器支持 <canvas> 元素
if(drawing.getContext){
// 取得图像的数据 URI
var imgURI = drawing.toDataURL("");

// 显示图像
var image = document.createElement("img");
image.src = imgURI;
document.body.appendChild(image);
}

2. 2D 上下文

  • 填充和描边

    1
    2
    3
    4
    5
    var drawing = document.getElementById("drawing");

    var context = drawing.getContext("2d");
    context.strokeStyle = "red";
    context.fillStyle = "blue"
  • 绘制矩形

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    var drawing = document.getElementById("drawing");

    var context = drawing.getContext("2d");
    // 绘制红色矩形
    context.fillStyle = "red";
    context.fillRect(10, 10, 50, 50);

    // 绘制半透明的蓝色矩形
    context.fillStyle = "rgba(0, 0, 255, 0.5)";
    context.fillRect(30, 30, 50, 50);

    // 在两个矩形重叠的地方清除一个小矩形
    context.clearRect(40, 40, 10, 10);

    // 绘制红色描边矩形
    context.strokeStyle = "red";
    context.strokeRect(10, 10, 50, 50);
  • 绘制路径

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    var drawing = document.getElementById("drawing");

    var context = drawing.getContext("2d");

    // 开始路径
    context.beginPath();

    // 绘制外圆
    context.arc(100, 100, 99, 0, 2 * Math.PI, false);

    // 绘制内圆
    context.moveTo(194, 100);
    context.arc(100, 100, 94, 0, 2 * Math.PI, false);

    // 绘制分针
    context.moveTo(100, 100);
    context.lineTo(100, 15);

    // 绘制时针
    context.moveTo(100, 100);
    context.lineTo(35, 100);

    // 描边路径
    context.stroke();
  • 绘制文本

    1
    2
    3
    4
    context.font = "bold 14px Arial";
    context.textAlign = "center";
    context.textBaseline = "middle";
    context.fillText("12", 100, 20);
  • 变换

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    var drawing = document.getElementById("drawing");

    var context = drawing.getContext("2d");

    // 开始路径
    context.beginPath();

    // 绘制外圆
    context.arc(100, 100, 99, 0, 2 * Math.PI, false);

    // 绘制内圆
    context.moveTo(194, 100);
    context.arc(100, 100, 94, 0, 2 * Math.PI, false);

    // 变换原点
    context.translate(100, 100);

    // 旋转表针
    context.rotate(1);

    // 绘制分针
    context.moveTo(0, 0);
    context.lineTo(0, -85);

    // 绘制时针
    context.moveTo(0, 0);
    context.lineTo(-65, 0);

    // 描边路径
    context.stroke();
  • 绘制图像

    1
    2
    var image = document.image[0];
    context.drawImage(image, 10, 10);
  • 阴影

    1. shadowColor:用 CSS 颜色格式表示的阴影颜色,默认为黑色
    2. shadowOffsetX:形状或路径 x 轴方向的阴影偏移量,默认为0
    3. shadowOffsetY:形状或路径 y 轴方向的阴影偏移量,默认为0
    4. shadowBlur:模糊的像素值,默认为0,即不模糊
  • 渐变

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    // 线性渐变
    var gradient = context.createLinearGradient(30, 30, 70, 70);
    // 径向渐变
    var gradient = context.createRadialGradient(55, 55, 10, 55, 55, 30);
    gradient.addColorStop(0, "white");
    gradient.addColorStop(1, "black");

    // 绘制红色矩形
    context.fillStyle = "red";
    context.fillRect(10, 10, 50, 50);

    // 绘制渐变矩形
    context.fillStyle = gradient;
    context.fillRect(30, 30, 50, 50);
  • 模式:其实就是重复图像

    1
    2
    3
    4
    5
    6
    var image = document.image[0], 
    pattern = context.createPattern(image, "repeat");

    // 绘制矩形
    context.fillStyle = pattern;
    context.fillRect(10, 10, 150, 150);
  • 使用图像数据

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    // 获取图像数据
    var imageData = context.getImageData(10, 5, 50, 50);
    ``
    - 合成
    ```js
    // 绘制红色矩形
    context.fillStyle = "red";
    context.fillRect(10, 10, 50, 50);

    // 修改全局透明度
    context.globalAlpha = 0.5;

    // 绘制蓝色矩形
    context.fillStyle = "rgba(0, 0, 255, 1)";
    context.fillRect(30, 30, 50, 50);

    // 重置全局透明度
    context.globalAlpha = 0;

globalCompositionOperation 表示后绘制图形怎样与先绘制图形结合,其值如下:

  1. source-over:(默认值)后绘制图形位于先绘制图形上方
  2. source-in:后绘制图形与先绘制图形仅重叠部分可见
  3. source-out:后绘制图形与先绘制图形仅不重叠部分可见
  4. source-atop:后绘制图形与先绘制图形重叠部分可见,先绘制图形不受影响
  5. destination-over:后绘制图形位于先绘制图形下方,只有之前透明像素下的部分才可见
  6. destination-in:后绘制图形位于先绘制图形下方,两者不重叠的部分完全透明
  7. destination-out:后绘制图形擦除与先绘制图形重叠的部分
  8. destination-atop:后绘制图形位于先绘制图形下方,两者不重叠的部分,先绘制图形变透明
  9. lighter:后绘制图形与先绘制图形重叠部分的值相加,使该部分变亮
  10. copy:后绘制图形完全替代与之重叠的先绘制图形
  11. xor:后绘制图形与先绘制图形重叠的部分执行”异或“操作

3. WebGL

  • 类型化数组
    1. 视图
    2. 类型化视图
  • WebGL 上下文
    1. 常量
    2. 方法命名
    3. 准备绘图
    4. 视口与坐标
    5. 缓冲区
    6. 错误
    7. 着色器
    8. 编写着色器
    9. 编写着色器程序
    10. 为着色器传入值
    11. 调试着色器和程序
    12. 绘图
    13. 纹理
-------------本文结束 感谢您的阅读-------------
您的支持将鼓励我继续创作!