zoukankan      html  css  js  c++  java
  • canvas基础知识

    canvas基础知识

    ## CanvasDOM对象

    #### 获取绘图环境
    ```
    canvas.getContext();
    ```

    #### 设置宽和高
    ```
    canvas.width = 500;
    canvas.height = 500;
    ```

    ## Context绘图对象

    #### 设置路径的起点
    ```
    context.moveTo(x, y);
    ```

    #### 画路径点
    ```
    context.lineTo(x, y);
    ```

    #### 根据当前路径进行描边
    ```
    context.stroke();
    ```

    #### 根据当前路径进行填充
    ```
    context.fill();
    ```

    #### 清除路径
    ```
    context.beginPath();
    ```

    #### 闭合路径
    > 从当前路径的结束点到起始点连一条路径
    ```
    context.closePath();
    ```

    #### 清除画布
    ```
    context.clearRect(x, y, w, h);
    ```

    #### 画矩形路径
    ```
    context.rect(x, y, w, h);
    ```

    #### 画描边矩形
    > 该方法不会产生任何路径
    ```
    context.strokeRect(x, y, w, h);
    ```

    #### 画填充矩形
    > 该方法不会产生任何路径
    ```
    context.fillRect(x, y, w, h);
    ```

    #### 设置线条虚实样式
    ```
    context.setLineDash([5, 3...]);
    ```

    #### 获取线条虚实样式
    ```
    context.getLineDash();
    ```

    ## Context属性

    #### 描边色
    ```
    context.strokeStyle = 颜色值;
    ```

    #### 填充色
    ```
    context.fillStyle = 颜色值;
    ```

    #### 线宽
    ```
    context.lineWidth = 10;
    ```

    #### 线帽
    > 默认值为butt。
    ```
    context.lineCap = 'butt' || 'round' || 'square';
    ```

    #### 线交点
    > 默认值为miter。
    ```
    context.lineJoin = 'miter' || 'round' || 'bevel';
    ```

    #### 虚线偏移量
    ```
    context.lineDashOffset = 5;
    ```

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
      *{
        margin:0 ;
        padding:0;
      }
      canvas{
        border: 1px solid #f00;
         500px;
        height: 500px;
      }
    </style>
    </head>
    <body>
      <canvas id = "cvs"></canvas>
      <script type="text/javascript">
      var cvs = document.getElementById("cvs");
      var ctx = cvs.getContext("2d");
      //清除之前路径,开启新路径
      ctx.beginPath();
      ctx.moveTo( 110, 10 );
      ctx.lineTo( 160, 60 );
      ctx.lineTo( 60, 60 );
      ctx.lineTo( 110, 10 );
      //消除锯齿
      ctx.lineTo( 160, 60 );
      //设置线条颜色,颜色设置,必须放在绘制之前
      ctx.strokeStyle = "blue";
      //设置线宽,线宽设置,必须放在绘制之前
      ctx.lineWidth = 6;
      // 有了closePath,绘图直线图形时,最后一条边就可以省去了
      ctx.closePath();
      //设置填充颜色
      ctx.fillStyle = "red";
      //开始填充
      ctx.fill();
      //开始描边
      ctx.stroke();

    /*
    * 非零环绕原则:
    * 是用来判断哪些区域属于路径内( 计算结果非0,即为路径内 )。
    * 在路径包围的区域中,随便找一点,向外发射一条射线,
    * 和所有围绕它的边相交,
    * 然后开启一个计数器,从0计数,
    * 如果这个射线遇到顺时针围绕,那么+1,
    * 如果遇到逆时针围绕,那么-1,
    * 如果最终值非0,则这块区域在路径内。
    *
    * 备注:基数边的区域一定在路径内。
    */

    /*
    * 描边的时候,会占用原图形的一部分( 线宽的一半 )。
    * 所以,日常开发中,为了让线宽符合要求,
    * 最好先填充,再描边,防止填充时覆盖掉线宽的一半。
    */

    /*
    * canvas在绘制线条的时候,会向左向右偏移线宽的一半,然后进行绘制。
    * 如果线宽为奇数,那么边缘的颜色值,会缩减一半。
    * */

    /*
    * 设置线帽样式:
    * ctx.lineCap = ‘butt' 、'round'、'square'
    * butt是默认值,
    * round线头是圆的,
    * square线头两段各增加线宽的一半。
    * */

    /*
    * 设置线交点样式:
    * ctx.lineJoin = ‘miter' 、'round'、'bevel'
    * miter是默认值,两边向外延伸相交为尖尖角,
    * round是圆头,
    * bevel两边相连为一个斜面。

     


    * */

      </script>
    </body>
    </html>

    画弧形

    画扇形

     画饼图

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    canvas {
    border:1px solid red;
    }
    </style>
    </head>
    <body>
    <canvas id="cvs" width="500" height="500"></canvas>
    <script>
    (function( w ) {

    // 把角度转换为弧度
    function angleToRadian( angle ) {
    return Math.PI / 180 * angle;
    }

    // 混入式继承
    function extend( o1, o2 ) {
    for ( var key in o2 ) {
    // 只有o2自己的属性才会copy到o1身上
    if ( o2.hasOwnProperty( key ) ) {
    o1[ key ] = o2[ key ];
    }
    }
    }

    /*
    * constrcutor { Pipe } 饼图构造函数
    * param { x: number } 圆心x轴坐标
    * param { y: number } 圆心y轴坐标
    * param { r: number } 圆半径
    * param { data: Array } 绘制饼图所需的数据
    * */
    function Pipe( x, y, r, data ) {

    this.x = x;
    this.y = y;
    this.r = r;
    this.data = data;

    // 一组颜色
    this.colors = [ 'orange', 'orchid', 'palegoldenrod', 'palegreen', 'paleturquoise', 'peru', 'pink' ];
    }

    // 给原型扩充方法
    extend( Pipe.prototype, {

    // 绘制饼图
    draw: function() {

    // 在外面保存一下this
    var self = this;

    // 数据的总和
    var num = 0;
    this.data.forEach( function( val ) {
    num += val;
    });

    // 一个数据值所占用的角度
    var baseAngle = 360 / num;

    // 假设一开始就绘制了一个起始为0,结束为0的扇形
    var startAngle = 0,
    endAngle = 0;

    // 画扇形
    this.data.forEach( function( val, i ) {

    // 每次进来,计算当前扇形的起始角度和结束角度

    // 下一个扇形的起始角度,是当前扇形的结束角度
    startAngle = endAngle;
    // 这个结束角度 = 上一个扇形的结束角度 + 当前数值所对应的角度
    endAngle = endAngle + baseAngle * val

    // 第一个扇形
    ctx.beginPath();
    ctx.moveTo( self.x, self.y );
    ctx.arc( self.x, self.y, self.r, angleToRadian( startAngle ), angleToRadian( endAngle ) );
    ctx.closePath();
    ctx.fillStyle = self.colors[ i ];
    ctx.fill();
    });
    }
    } );

    // 把构造函数暴露到全局
    w.Pipe = Pipe;

    }( window ));

    var cvs = document.getElementById('cvs');
    var ctx = cvs.getContext('2d');

    var pipe = new Pipe( 200, 200, 80, [ 10, 30, 50, 60, 20 ] );
    pipe.draw();
    </script>
    </body>
    </html>

  • 相关阅读:
    jquery正则表达式验证:正整数(限制长度)
    H5页面快速搭建之高级字体应用实践
    如何用Python写一个贪吃蛇AI
    HashMap多线程并发问题分析
    为RecyclerView打造通用Adapter 让RecyclerView更加好用
    学好Mac常用命令,助力iOS开发
    使用 Realm 和 Swift 创建 ToDo 应用
    看Facebook是如何优化React Native性能
    利用github搭建个人maven仓库
    Objective-C Runtime之着魔的UIAlertView
  • 原文地址:https://www.cnblogs.com/2016-zck/p/9489513.html
Copyright © 2011-2022 走看看