Shinkai005

V1

2022/04/23阅读:11主题:红绯

学习过程中一些小点

学习过程中一些小点

  1. setInterval 不能传递参数. 如果参数不变,可以修改window.setInterval 使其传递参数.
  2. Canvas.globalCompositeOperation 用法
  3. random函数使用
  4. ctx.requestAnimationFrame使用

random函数使用

function getRndInteger(min, max{
  return Math.floor(Math.random() * (max - min + 1) ) + min;
}

setInterval重构

const _sto = setInterval;
window.setInterval = function (callback,timeout,params){
  const args = Array.prototype.slice.call(arguments,2);
  const _cb = function ({
    callback.apply(null,args);
  }
  _sto(_cb,timeout);
}

setInterval 并不是迭代产生的, 所以,传参的情况只适用于参数每次都不变化,也就是说本身这个方法就不需要传参的;

传参是为了参数每次都变化...

他其实是在你执行setInterval的时候,把参数就写死了. 即使你在函数内部修改参数的值,依旧不会变.

Canvas.globalCompositeOperation 用法

问题描述, 我把生成画布函数给单独写出来,传入id然后返回画布和画笔,其他一切正常,就是不能用globalCompositeOperation,但是改成下面的CanvasRenderingContext2D就行.奇怪.完整代码在最后.

image-20220422001409984
image-20220422001409984

注意看这个代码: 先声明globalCompositeOperation再改,

image-20220422004031390
image-20220422004031390

思考一下有什么问题? 我们正常来看不会觉得有什么问题~

但是如果有第二张画布.

image-20220422004230694
image-20220422004230694

那么就没办法显示了.

玩一个新的东西如果找不到点缺点drawback,就不叫好好学了

为什么这样?

我打印了一下ctx发现. 其实 globalCompositionOperation 其实根本不是ctx1和ctx2的他们用的都是他们祖先的.

也就是说 ctx1修改了这个值,ctx2一样会变.

因此也就能推出来,为什么标准写法.两个图形的中间. 因为第一个图形不管怎样都会显示出来,然后第二个图形会根据globalCompositionOperation值判断自己的位置.

分类:

前端

标签:

JavaScript

作者介绍

Shinkai005
V1

公众号:深海笔记Shinkai