HTML5--Canvas

 

 * Canvas

   * 绘制图形

     * 绘制文字

       * 方法

         * fillText(text,x,y) - 实心文字

          * text - 绘制的文字内容

          * x和y - 绘制的坐标值

        * strokeText(text,x,y) - 空心文字

       * 属性

         * font - 类似于CSS中的font属性

        * textAlign - 设置文字的水平方向对齐

          * left - 左对齐

          * center - 水平居中

          * right - 右对齐

        * textBaseline - 设置文字的垂直方向对齐

          * top - 顶部对齐

          * middle - (垂直)居中对齐

          * bottom - 底部对齐

          * hanging - 悬挂基线

          * alphabetic - 字母基线

         * 注意

          * 无论是水平方向还是垂直方向对齐,基准线对齐,并不是文字对齐

          * 无论是水平方向还是垂直方向对齐,并不是必要的属性(不使用也是可以的)

     * 阴影效果

       * shadowColor - 设置阴影颜色

       * shadowOffsetX - 设置水平方向阴影

       * shadowOffsetY - 设置垂直方向阴影

       * shadowBlur - 设置阴影的模糊程度

     * 创建路径

       * (标识)方法

         * beginPath() - 表示开始创建路径

        * closePath() - 表示结束创建路径

       * 设置方法

         * rect(x,y,width,height) - 设置矩形形状

          * x和y - 设置矩形的左上角坐标值

          * width和height - 设置矩形的宽度和高度

        * arc(x,y,radius,startAngle,endAngle,direction) - 设置圆形形状

          * x和y - 设置圆形的圆心坐标值

          * radius - 设置圆形的半径

          * startAngle和endAngle - 设置圆形的起始位置

          * direction - 按照顺时针或逆时针绘制

       * 绘制方法

         * stroke() - 绘制轮廓

        * fill() - 绘制填充

     * 绘制线条(直线和折线、多边形) - 创建路径

       * moveTo(x,y) - 设置这条线的起点坐标值

       * lineTo(x,y) - 设置这条线的终点(折点)坐标值

   * 设置线条

     * lineWidth - 设置线条的宽度

       * 默认值为1(px)

     * lineCap - 设置线条端点的形状

       * butt - 默认值,平直

       * round - 圆角

       * square - 正方向

     * lineJoin - 设置两条线焦点的形状

       * miter - 默认值,尖角

       * round - 圆角

       * bevel - 斜角

     * miterLimit - 配合lineJoin使用

       * lineJoin设置为miter,该属性值设置尖角的延伸范围

 * Canvas处理图片

   * 绘制图片

     * drawImage(img,x,y) - 按照图片原大小加载

       * img - 当前加载(绘制)的图片

       * x和y - 绘制图片的坐标值(左上角)

     * drawImage(img,x,y,width,height) - 按照指定大小加载图片

       * img - 当前加载(绘制)的图片

       * x和y - 绘制图片的坐标值(左上角)

       * width和height - 设置绘制图片显示的宽度和高度

     * 注意

       * 必须保证图片加载完毕(onload事件)后,再绘制图片

   * 平铺图片

     * createPattern(img,type)

       * img - 平铺的图片

       * type - 平铺的方式

         * repeat - 平铺

        * no-repeat - 不平铺

        * repeat-x - 水平方向平铺

        * repeat-y - 垂直方向平铺

     * 注意

       * 必须保证图片加载完毕(onload事件)后,再绘制图片

   * 切割图片

     * clip() - 切割(按照创建路径使用)

   * 画布方法

     * scale(x,y) - 缩放(缩小或放大)

       * x - 表示水平方向的缩放

       * y - 表示垂直方向的缩放

       * 参数的取值

         * 如果为1的话,表示不缩放(原大小)

        * 如果小于1的话,表示缩小

        * 如果大于1的话,表示放大

     * translate(x,y) - 重新定位(x,y)

       * x和y - 新的坐标值

       * 注意 - x和y是相对于上次定位坐标值

     * rotate(旋转角度) - 旋转画布

       * 公式为 degrees * Math.PI / 180;

 * Chart.js - Canvas的JS库

   * 作用 - 提供各种图表

   * 如何使用

     * 在HTML页面中引入Chart.js文件

     * 在HTML页面中定义<canvas>元素

     * 在javascript代码中

       * 获取<canvas>元素

       * 创建画布对象

         var context = canvas.getContext("2d");

       * 通过画布对象,创建Chart对象

         var chart = new Chart(context);

       * 利用Chart对象调用API方法

         var data = [];

        chart.Pie(data);

   * 提供6种图表

     * 柱状图 - Bar(data,options)

     * 饼状图 - Pie(data,options)

     * 曲线图 - Line(data,options)

     * 环形图 - Doughnut(data,options)

     * 雷达图 - Radar(data,options)

     * 极地区域图 - PolarArea(data,options)

 * 作业

   * 位置、大小、颜色都随机的圆形

   * 将Chart.js其他4种图表实现一遍

 * 扩展内容

   * 前端Web开发时,建议使用以下几种浏览器

     * Chrome - 两个版本 - 版本更新过于频繁

       * 开发版本

         * 功能较新

        * 不稳定

       * 正式版本

         * 功能较旧

        * 稳定

       * Chrome OS

     * Firefox - 两个版本

       * 开发版本 - (开发)功能多

       * 正式版本

       * FireFox OS - 移动操作系统

         * 开发使用HTML|CSS|JAVASCRIPT

     * Safari

  * 内向问题

    * 面试 - 你认为你的性格,是外向还是内向?

      * 内向 - 沟通能力比较差,团队协作出问题

      * 外向 - 担心工作时,不够专心

    * 良好的沟通能力

      * 程序员 - 形成程序员思维

      * 都是学习和培养

  * Markdown编辑器

    * 支持Markdown文件的扩展名为".md"

  * 前面的内容忘记

    * 个人建议 - 在案例中复习

posted @ 2015-12-13 15:35  白艳风  阅读(140)  评论(0编辑  收藏  举报