zoukankan      html  css  js  c++  java
  • Html5 Canvas笔记(3)-Canvas状态

    Canvas状态是即时存储的Canvas上下文数据,我们可以随时进行存储。关于Canvas状态,有必要了解以下四大相关内容:

    Canvas的绘图模式

    Canvas的绘图模式是即时绘图模式,该模式下会每一帧完全重绘画布上的位图,如果Canvas不能自己保存及恢复状态数据,那么程序员就得自己维护所有显示对象每一帧的状态数据!这应该就是Canvas状态的必要性及由来。

    Canvas状态保存的数据

    变换矩阵信息:

    2d变形、3d变形所使用到的函数,如rotate()、setTransform()等

    当前剪贴区域:

    画布属性当前值:

    globalAlpha、globalCompositeOperation、strokeStyle、textAlign、textBaseline、lineCap、lineJoin、lineWidth、miterLimit、fillStyle、font、shadowBlur、shadowColor、shadowOffsetX、shadowOffsetY

    不在Canvas状态内的数据

    当前绘制路径当前位图不在Canvas状态控制范围

    也就是说,在我们绘制路径或者图形时,可以首先保存下Canvas状态;在绘制路径及图形完成后,再加载一次Canvas状态数据,这样可以避免全部重绘整个画布图形内容。

    Canvas状态数据的保存与恢复

    Canvas状态的保存

    1 context.save();

    Canvas状态的恢复

    1 context.restore();
  • 相关阅读:
    linux下查找文件及查找包含指定内容的文件常用命令
    小程序与h5之前切换频繁时候,点击无反应
    vue项目微信分享之后路由链接被破坏问题
    async-await用法
    小程序input组件获得焦点时placeholder内容有重影
    es6语法在ios低版本的支持性
    h5页面避免两个页面反复跳转死循环
    小程序getLocation出现的各种问题汇总
    小程序组件跳转页面存在兼容问题
    nigix反向代理
  • 原文地址:https://www.cnblogs.com/alexywt/p/4735242.html
Copyright © 2011-2022 走看看