H5 新特性01

Canvas 基础

canvas应用领域

    游戏

    可视化数据（图表）

    banner、炫酷效果

    地图

    模拟器，平台工具（在线PS）

canvas元素

  属性

    width

    height

  获取绘图环境

    getContext(2d/webgl)

  基本图像绘制

    路径

        beginPath() 开启路径

        closePath() 关闭路径 自动闭合路径

    绘制起始点

        moveTo(x, y)

    直线

        lineTo(x, y)

    描边

        属性 strokeStyle

        属性 lineWidth

        stroke()

    填充

        属性 fillStyle

        fill()

    快速矩形

        rect(x,y,w,h) 快速矩形路径

        fillRect(x,y,w,h) 快速填充矩形、路径自成一体

        strokeRect(x,y,w,h) 快速描边矩形

        clearRect(x, y, w, h) 删除矩形

    圆弧

        arc(x, y, r, start, end, true/false);

    文字

        strokeText(text, x, y) 描边文字

        fillText(text, x, y) 填充文字

        font 同css的font属性

        textAlign: start/end/left/right/center 水平对齐方式

        textBaseline: alphabetic/top/bottom/middle 垂直对齐方式

    清除画布

        clearRect(0, 0, 画布宽, 画布高)

        canvas.width = canvas.width

补充

    弧度

        1 弧度 = 角度 / 180 * π