• 理解Canvas原理


    Canvas原理

    Canvas我们把它翻译成画布,从字面意思我们就可以知道,不就是可以在上面画东西的布吗。好像很简单,没什么好说的。先看图:

    从这几幅图我们可以看到以下几点:

    1.每个小方格我们可以看作一个像素点。

    2.Canvas和Screen的长和宽决定他们的图像,数据存储都可以看作是矩形数组(或Map)集合的大小,存储图像的容器就长的是这个样子,它是矩形,也许有不规则的特殊屏,目前我只见过矩形的。

    3.我们最终看到的画面是屏幕,Canvas的绘画数据最终是要填充给屏幕数据。

    那么现在先来回顾一下计算机原理:

    我不喜欢用太多的文字来解释,看看百科找来了这张图片,我相信能帮我们更好的去理解。

    结合这张图,我们可以知道:输出设备它只读屏幕最终数据,Canvas数据只是写入屏幕数据的一个缓存。为什么数据不直接写入屏幕数据,后面会讲跳帧具体说明。

    canvas有如下几个特点:

    Canvas在线程中的位置及联系:

    帧速率是每秒主线程重绘的次数,一般每秒>=24帧人眼就区分不了重绘刷新了,这样就可以看到一个连续的动画。

    什么是跳帧?

    当Canvas绘画所需的时间大于一次循环更新所需的时间,我们的下一帧就不绘画了,把时间留给上一帧绘画,以此保证上一帧绘画完整。如果两帧的时间还画不完说明fm需要调节。

    我们程序常说的先更新后绘画,这个绘画都是程序绘画,并不是输出绘画。输出绘画和主线程是分离的,他是单独的一个线程。

    转发自:https://blog.csdn.net/qq372072753/article/details/54629610

  • 相关阅读:
    手写vite
    单点登录的实现原理
    vue中和react中key的用法
    手写MVVM
    rtvue-lowcode:一款基于uniapp框架和uview组件库的开源低代码开发平台
    博图TIA中ModbusRTU_CRC校验程序的实现
    博图TIA中ModbusRTU Over TCP/IP通讯的实现
    webpack之file-loader和url-loader的区别
    Webpack中Loader和Plugin的区别?编写Loader,Plugin的思路?
    spark-sql 与hive 常用函数
  • 原文地址:https://www.cnblogs.com/fangsmile/p/9415660.html
Copyright © 2020-2023  润新知