Blend mode
Filter
Có 2 trường hợp:
Sử dụng CSS áp dụng lên các element trong HTML
background-blend-mode
mix-blend-mode
globalCompositeOperation
Cú pháp:
context2d.globalCompositeOperation = < blend-mode > || < composite-mode >
Các giá trị của blend mode
< blend-mode > = normal | multiply | screen | overlay |
darken | lighten | color-dodge | color-burn | hard-light |
soft-light | difference | exclusion | hue | saturation |
color | luminosity
Ví dụ:
Blend mode trên Canvas
Blend mode chưa được hỗ trợ nhiều trên các trình duyệt
background-blend-mode: Chrome 35
mix-blend-mode: enabled "Experimental Web Platform Features" trong chrome://flags.
background-blend-mode: Firefox 30
mix-blend-mode: Firefox 31
Safari 8
background-blend-mode: Opera 22
mix-blend-mode: enabled "Experimental Web Platform Features" trong opera://flags.
Filter là gì?
Cú pháp
.filter-me { filter: [fitler-function] [other-filter-function]; }
Filter function
blur || brightness || contrast || url drop ||-shadow || grayscale || hue-rotate || invert || opacity
.filter-me { filter: blur(20px); }
filter: blur([pixels | percentage])
filter: sepia([number | percentage])
filter: saturate([number | percentage])
filter: brightness([number | percentage])
filter: contrast([number | percentage])
filter: url()
filter: drop-shadow(x y radius color)
filter: grayscale([number | percentage])
filter: hue-rotate(angle)
filter: invert([number | percentage])
filter: opacity([number | percentage])
Filter demo
Drop-shadow example
Hỗ trợ một số bộ lọc filter trong IE8
Cú pháp: filter: < filter-function >
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50)
filter: progid:DXImageTransform.Microsoft.blur(pixelradius=3)
filter: progid:DXImageTransform.Microsoft.MotionBlur(Strength=30,Direction=45)
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)
Filter properties on IECảm ơn