H5 新特性02

anvas 绘制图片

        基础绘制 drawImage(img, x, y)

        绘制图片设置大小 drawImage(img, x, y. width, height)

        裁剪图片绘制到画布 drawImage(img, sx, sy, swidth, sheight, x, y, width, height)

Canvas 高级操作 -- 样式设计

       阴影

               shadowColor 属性 阴影颜色

               shadowBlur 属性 阴影模糊值

               shadowOffsetX 属性 阴影水平方向偏移量

               shadowOffsetY 属性 阴影垂直方向偏移量

    渐变

               createLinearGradient(x1, y1, x2, y2) 创建线性渐变

               createRadialGradient(x1, y1, r1, x2, y2, r2) 创建径向渐变

               addColorStop(位置, 颜色) 添加色标 该方法属于渐变对象

    绘制背景图

               createPattern() 创建一个填充背景图

    设置透明度

               globalAlpha

Canvas 高级操作 -- 变换

    绘图环境

            save() 保存当前绘图环境 状态

            restore() 恢复之前保存的绘图环境 (释放)

    位移

            translate(x, y)

    缩放

            scale(number, mumber)

    旋转

            rotate(angle)

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

推荐阅读更多精彩内容

  • 来源: http://www.douban.com/group/topic/14820131/ 调整变量格式: f...
    MC1229阅读 11,845评论 0 5
  • 一:canvas简介 1.1什么是canvas? ①:canvas是HTML5提供的一种新标签 ②:HTML5 ...
    GreenHand1阅读 10,178评论 2 32
  • 转载请声明 原文链接 关注公众号获取更多资讯 这篇文章主要总结H5的一些新增的功能以及一些基础归纳,这里只是一个提...
    前端进阶之旅阅读 12,951评论 22 225
  • 一、canvas简介 1.1 什么是canvas?(了解) 是HTML5提供的一种新标签 Canvas是一个矩形区...
    Looog阅读 9,351评论 3 40
  • 【canvas】 《2.6.5 面向对象基础复习补充:》 创建对象的方式: * var o = { name: '...
    夜幕小草阅读 2,967评论 0 0