H5 新特性03

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 图标插件

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 转载请声明 原文链接 关注公众号获取更多资讯 这篇文章主要总结H5的一些新增的功能以及一些基础归纳,这里只是一个提...
    前端进阶之旅阅读 9,114评论 22 225
  • 一、canvas简介 1.1 什么是canvas?(了解) 是HTML5提供的一种新标签 Canvas是一个矩形区...
    Looog阅读 3,975评论 3 40
  • 一、什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像 画布是...
    EndEvent阅读 726评论 0 1
  • 【canvas】 《2.6.5 面向对象基础复习补充:》 创建对象的方式: * var o = { name: '...
    夜幕小草阅读 401评论 0 0
  • 一、简介 HTML5 中的定义:“它是依赖分辨率的位图画布,你可以在 canvas 上面绘制任何图形,甚至加载照片...
    destiny0904阅读 10,608评论 1 4