Canvas 绘图上下文

Canvas 虽然一直被称之为 画布,当我们千万不要认为它就是现实生活中的一张画布,而是应该理解为 Photoshop 中的图层集合

Canvas 绘图机制

我们先来看一张图

首先使用 translate(x,y) 平移后绘制了一个橘黄色的矩形,然后我们想在距离屏幕左上角 (50,100) 的位置绘制一个蓝色的矩形

可为什么绘制结果竟然是在平移后的坐标系里绘制?

因为对 Canvas 的几何变换是终身生效的,除非再次调用几何变换重新设置

那么假如我们要把原点重新回到 (0,0) 点,然后绘制新的图形呢?

translate(-x,-y) 的慢慢地平移回去?

肯定不是,我们可以在做平移变换之前将当前 canvas 的状态进行保存

Canvas 图层

Canvas 为我们提供了 图层(Layer) 的支持,Layer(图层) 是按 "栈结构" 来进行管理的

当我们调用 save() 方法,会保存当前 Canvas 的状态然后作为一个 Layer(图层),添加到 Canvas栈 中,

而当我们调用 restore() 方法的时候,会恢复之前 Canvas 的状态,而此时 Canvas 的图层栈 会弹出栈顶的那个 Layer,后继的 Layer 来到栈顶,此时的 Canvas 回复到此栈顶时保存的 Canvas 状态

简单说就是 save() 往栈压入一个 Layer,restore()弹出栈顶的一个Layer,这个 Layer 代表Canvas的 状态!

也就是说可以 save() 多次,也可以 restore() 多次,但是 restore() 的调用次数 不能大于 save() 否则会引发错误

绘制状态

保存到栈中的绘制状态有下面部分组成

  1. 当前的变换矩阵

  2. 当前的剪切区域

  3. 当前的虚线列表

  4. 以下属性当前的值

    strokeStyle
    fillStyle
    globalAlpha
    lineWidth
    lineCap
    lineJoin
    miterLimit
    lineDashOffset
    shadowOffsetX
    shadowOffsetY
    shadowBlur
    shadowColor
    globalCompositeOperation
    font
    textAlign
    textBaseline
    direction
    imageSmoothingEnabled
    

Canvas save() 方法

ctx.save() 方法用于将画布的当前状态保存到栈中

语法

void ctx.save();

范例

下面的代码使用 save() 方法保存默认的状态,然后平移 (100,100) 绘制一个绿色矩形后,恢复之前的状态,最后再使用默认的设置绘制一个矩形

<!DOCTYPE html>
<meta charset="utf-8"> 
<canvas id="canvas-1" width="400" height="300">
</canvas>
<script>
var c   = document.getElementById("canvas-1");
var ctx = c.getContext("2d");
ctx.save();
ctx.translate(100,100);
ctx.fillStyle = "green"
ctx.fillRect(50,50,100,50);
ctx.restore();
ctx.fillRect(50,50,100,50);
</script>

运行结果如下

Canvas 基础教程

关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2018 简单教程 twle.cn All Rights Reserved.