H5 新特性03

2017-08-14  本文已影响0人  社会你码ge

Canvas 进阶

变换--位移

    translate(x, y)

变换-旋转

    rotate(deg)

变换-缩放

    scale(scalex, scaley)

阴影

    shadowOffsetX

    shadowOffsetY

    shasowColor

    shadowBlur

透明度

    globalAlpha 值 0~1小数

绘图环境的恢复

    save()

    restore()

渐变

    createLinearGradient(x1, y1, x2, y2)

    createRadialGradient(x1, y1, r1, x2, x2, r2 )

    addColorStop(位置, 颜色)

填充图片

    createPattern(img, "repeat/no-repeat/repeat-x/repeat-y")

输出base64 编码

    canvas.toDateURL("mime类型", "0~1") image/jpeg          image/gif iamge/png

线条样式

    lineCap butt/square/round

    lineJoin miter/bevel/round

第三方Canvas 库 Konva

    常见的第三方库

        konva.js

        tree.js (3d引擎)

        egret

        echarts 图标插件

上一篇下一篇

猜你喜欢

热点阅读