CSS paint 实现Material Design Button

效果:

See the Pen by NINE () on .

CSS PAINT API

CSS Paint API,是API集合Houdini中的一部分,可以用来绘制图像,并作为需要设置image的css属性的值,比如background-image,border-image。

其他API如Layout API来实现布局,Parser API解析CSS表达式等。不过整体来......

使用JavaScript修改CSS变量

原文地址:

随便看到的顺便记一下,虽然比较短小

这是一段css变量(通常称为自定义属性)

:root {

--mouse-x: 0px;

--mouse-y: 0px;

}

你可能用它来设置定位

.mover {

left: var(--mouse-x);

top: var(--mouse-y);

}

要使用JavaScript来修改变量值,可以这样:

l......

Selection文本选择

Selection对象表示用户选择的文本范围或插入符号的当前位置

使用window.getSlection获取Selection对象

const selection = window.getSelection();

anchor指向开始选择的地方,focus指向结束的地方;

range是文档中连续的一部分,chrome中只能选一个区域,rangeCount是1,如果可以选......

class与构造函数

关于E6之前的"构造函数"

[[prototype]]和prototype

对象有一个[[prototype]]的属性,在有些浏览器中可以用__proto__获得,对象在创建时,这个属性会被赋一个非空值(大部分情况),[[protopype]]最终会指向Object.prototype

const a = {};

a.__proto__

// {construct......

Ajax

之前的实现AJAX的方式:

XMLHttpRequest

IE7及以上版本支持,老版本用ActiveXObject

属性

timeout

超时时间(毫秒)

status

请求的状态码,完整的可以参考:

statusText

响应状态,如 '200 OK'

readyState

状态

描述

......

canvas drawImage

本来是写头像截取的,由于参数弄错了搞半天没写对...记一下...

语法

CanvasRenderingContext2D.drawImage()

ctx.drawImage(image, dx, dy);

ctx.drawImage(image, dx, dy, dWidth, dHeight);

ctx.drawImage(image, sx, sy, sWidth, sHeight......

遍历对象属性

for (variable in object) { ... }

遍历对象本身的和从原型链上继承的可枚举的,非符号属性。(enumberable, non-Symbol)

Array、Object这样的从内置的构造函数创建的对象,会从Object.prototype和String.prototype继承不可枚举的属性(String,Number,Boolean,Object,Array,......

requestAnimationFrame动画

页面动画效果通常是使用CSS3的animation,transition,或者在JavaScript中使用setTimeout | setInterval来持续改变某个CSS属性的值来实现。window还有一个API,用来实现高性能的帧动画,那就是requestAnimationFrame。

requestAnimationFrame语法

window.requestAnimationFram......