canvas标签

Canvas

    创建
    canvas需要创建后再获取才能使用

        html:(标准)

        <canvas></canvas>

  

        d3:（个人习惯）

        var canvas_js = document.getElementById('js');
        var canvas_d3 = d3.selectAll("#ceshi").append("canvas");

   

关于d3

    d3.js v4版本支持canvas。目前还在使用v3版本。所以此处用于记录其中的各种问题。

        上述的d3创建canvas。canvas_d3为d3封装的对象。使用过d3的应该习以为常的使用下列语法，但是canvas中需要注意是不可取的。因为d3_v3不支持canvas~~~

    //创建
    var canvas_d3 = d3.selectAll("#ceshi").append("canvas");
    canvas_d3.width = 200;//报错哦。
    //个人解决办法
    //1.单个属性
    canvas_d3[0][0].width = 200;
    //2.一劳永逸
    var canvas_d3 = >d3.selectAll("#ceshi").append("canvas")[0][0];
    canvas_d3.width = 200;

     

基本API

    width( ) && height( )

        设置宽高

    getContext( )

        获取画布。专业点的说法就是渲染上下文，通过使用 document.getElementById() 方法来为 元素得到DOM对象。一旦有了元素对象，你可以通过使用它的getContext() 方法来访问绘画上下文。

        //js
        var canvasjs = document.getElementById('js');
        canvasjs.getContext('2d');
        //d3
        var canvasd3 = d3.selectAll("body").append("canvas")[0][0];
        canvasd3.getContext("2d");

          

        参数:
        ‘2d’ ：初学嘛。只好2D渲染了。

    栅格

        画布栅格（canvas grid）太专业了。。。空间坐标和d3一致，默认左上角为原点。

    绘制基本图形

        矩形
        canvas默认支持的图形只有矩形，并提供三种绘制矩形API。

            fillRect(x,y,width,height)：填充
            strokeRect(x,y,width,height)边框

                需要注意的是：边框线默认宽度2px;且向边外扩充1px;就是说我在（20，20）处画了一个80*80的边框矩形，但是实际显示区域是（19，19）处起线宽2px，内部79*79的矩形。

            clearRect(x,y,width,height)清除
            代码
            //ctx_js
            //绘制填充矩形
            ctx_js.fillRect(20, 20, 80, 80);
            //绘制矩形的边框
            ctx_js.strokeRect(120, 20, 80, 80);
            //清除一个矩形区域
            ctx_js.clearRect(70, 20, 80, 80);
            //
            //ctx_d3
            //绘制填充矩形
            ctx_d3.fillRect(20, 20, 80, 80);
            //绘制矩形的边框
            ctx_d3.strokeRect(120, 20, 80, 80);
            //清除一个矩形区域
            ctx_d3.clearRect(70, 20, 80, 80);
            语法基本一致了，之后就不做区别了

    绘制路径

        基本步骤

            beginPath():创建起点
            画图命令画出路径
            closePath:封闭路径，组合图形时，多个独立路径一定要闭合后再绘制新的路径，或者在路径命令中闭合
            fill()或stroke()：路径生成后，可以通过描边（stroke）或者填充（fill）来渲染图形

    画图命令

        **线**lineTo(x,y);
        **圆**arc(x,y,radius,startAngle,endAngle,anticlockwise);
        **贝塞尔曲线**quadraticCurveTo(cp1x,cp1y,x,y);

    Path2D()