canvas-第一天04部分

1.画一个渐变的矩形

        var canvas = document.getElementById("demoCanvas");
        var pencil = canvas.getContext("2d");
/*
* setLineDash(): 缓冲（断点）设置，用于产生断点效果，该方法的参数是一个数字或一段数字组成的数组
* 第一个参数是第一条的长度（4）
* 第二个参数是间距的长度（4）
* 第三个参数是第二条的长度（4）*/

        pencil.setLineDash([4, 2, 1]);

        let i; len = 255;
        for( i = 0; i <= len; i++){
            pencil.beginPath();
            pencil.moveTo(10, 10+i);
            pencil.lineTo(210, 10+i);
//            红色通道值一次累加
            pencil.strokeStyle = 'rgb('+0+','+i+','+255+')';
            pencil.stroke();
        }

2.画虚线

        var canvas = document.getElementById("demoCanvas");
        var pencil = canvas.getContext("2d");
        /*
        * 设置画线时候的空白部分和实线部分的大小
        * pencil.setLineDash([5,3])*/
        pencil.lineDashOffset = 3;
        pencil.setLineDash([4, 3, 2]);
        pencil.moveTo(10, 10);
        pencil.lineTo(310, 10);
        pencil.stroke();

        pencil.beginPath();
        pencil.setLineDash([4, 3]);
        pencil.moveTo(10, 210);
        pencil.lineTo(310, 210);
        pencil.stroke();

3.绘制坐标轴

        var canvas = document.getElementById("demoCanvas");
        var pencil = canvas.getContext("2d");

        /*坐标轴距离画布边界的距离*/
        let padding ={
            top: 20,
            right: 20,
            bottom: 20,
            left: 20
        };
        /*坐标轴中箭头的宽和高*/
        let arrow = {
            width: 12,
            height: 20
        };

       /*求坐标轴上顶点的坐标*/
       let vertexTop ={
            x: padding.left,
            y: padding.top
       };
       /*求坐标轴原点的坐标*/
       let origin = {
            x: padding.left,
            y: canvas.height - padding.bottom
       };
       /*求坐标轴的右顶点的坐标*/
       let vertexRight ={
           x: canvas.width - padding.right,
           y: canvas.height - padding.bottom
       };
        /*
        * 绘制坐标轴的两条线*/
        pencil.moveTo(vertexTop.x, vertexTop.y);
        pencil.lineTo(origin.x, origin.y);
        pencil.lineTo(vertexRight.x, vertexRight.y);
        pencil.stroke();

        /*绘制上顶点箭头*/
        pencil.beginPath();
        pencil.moveTo(vertexTop.x, vertexTop.y);
        pencil.lineTo(vertexTop.x - arrow.width/2, vertexTop.y + arrow.height);
        pencil.moveTo(vertexTop.x, vertexTop.y);
        pencil.lineTo(vertexTop.x + arrow.width/2, vertexTop.y +arrow.height);
        pencil.stroke();

        /*绘制右顶点箭头*/
        pencil.beginPath();
        pencil.moveTo(vertexRight.x, vertexRight.y);
        pencil.lineTo(vertexRight.x - arrow.height, vertexRight.y - arrow.width/2);
        pencil.moveTo(vertexRight.x, vertexRight.y);
        pencil.lineTo(vertexRight.x - arrow.height, vertexRight.y + arrow.width/2);
        pencil.stroke();

        var canvas = document.getElementById("demoCanvas");
        var pencil = canvas.getContext("2d");

        /*坐标轴距离画布边界的距离*/
        let padding ={
            top: 20,
            right: 20,
            bottom: 20,
            left: 20
        };
        /*坐标轴中箭头的宽和高*/
        let arrow = {
            width: 12,
            height: 20
        };

       /*求坐标轴上顶点的坐标*/
       let vertexTop ={
            x: padding.left,
            y: padding.top
       };
       /*求坐标轴原点的坐标*/
       let origin = {
            x: padding.left,
            y: canvas.height - padding.bottom
       };
       /*求坐标轴的右顶点的坐标*/
       let vertexRight ={
           x: canvas.width - padding.right,
           y: canvas.height - padding.bottom
       };
        /*
        * 绘制坐标轴的两条线*/
        pencil.moveTo(vertexTop.x, vertexTop.y);
        pencil.lineTo(origin.x, origin.y);
        pencil.lineTo(vertexRight.x, vertexRight.y);
        pencil.stroke();

        /*绘制上顶点箭头*/
        pencil.beginPath();
        pencil.moveTo(vertexTop.x, vertexTop.y);
        pencil.lineTo(vertexTop.x - arrow.width/2, vertexTop.y + arrow.height);
        pencil.lineTo(vertexTop.x, vertexTop.y + arrow.height/2);
        pencil.lineTo(vertexTop.x + arrow.width/2, vertexTop.y +arrow.height);
        pencil.closePath();
        pencil.fill();


        /*绘制右顶点箭头*/
        pencil.beginPath();
        pencil.moveTo(vertexRight.x, vertexRight.y);
        pencil.lineTo(vertexRight.x - arrow.height, vertexRight.y - arrow.width/2);
        pencil.lineTo(vertexRight.x - arrow.height/2, vertexRight.y);
        pencil.lineTo(vertexRight.x - arrow.height, vertexRight.y + arrow.width/2);
        pencil.closePath();
        pencil.fill();

4.指定位置添加多个点

        var canvas = document.getElementById("demoCanvas");
        var pencil = canvas.getContext("2d");

        /*坐标轴距离画布边界的距离*/
        let padding ={
            top: 20,
            right: 20,
            bottom: 20,
            left: 20
        };
        /*坐标轴中箭头的宽和高*/
        let arrow = {
            width: 12,
            height: 20
        };

       /*求坐标轴上顶点的坐标*/
       let vertexTop ={
            x: padding.left,
            y: padding.top
       };
       /*求坐标轴原点的坐标*/
       let origin = {
            x: padding.left,
            y: canvas.height - padding.bottom
       };
       /*求坐标轴的右顶点的坐标*/
       let vertexRight ={
           x: canvas.width - padding.right,
           y: canvas.height - padding.bottom
       };
        /*
        * 绘制坐标轴的两条线*/
        pencil.moveTo(vertexTop.x, vertexTop.y);
        pencil.lineTo(origin.x, origin.y);
        pencil.lineTo(vertexRight.x, vertexRight.y);
        pencil.stroke();

        /*绘制上顶点箭头*/
        pencil.beginPath();
        pencil.moveTo(vertexTop.x, vertexTop.y);
        pencil.lineTo(vertexTop.x - arrow.width/2, vertexTop.y + arrow.height);
        pencil.lineTo(vertexTop.x, vertexTop.y + arrow.height/2);
        pencil.lineTo(vertexTop.x + arrow.width/2, vertexTop.y +arrow.height);
        pencil.closePath();
        pencil.fill();


        /*绘制右顶点箭头*/
        pencil.beginPath();
        pencil.moveTo(vertexRight.x, vertexRight.y);
        pencil.lineTo(vertexRight.x - arrow.height, vertexRight.y - arrow.width/2);
        pencil.lineTo(vertexRight.x - arrow.height/2, vertexRight.y);
        pencil.lineTo(vertexRight.x - arrow.height, vertexRight.y + arrow.width/2);
        pencil.closePath();
        pencil.fill();

//        pencil.fillRect(origin.x + 100, origin.y - 100, 2, 2);
        /*在坐标轴中指定位置花点， 坐标算法
        * 点的x轴， 原点x坐标+点到原点的水平距离
        * 点的y轴， 原点y坐标-点到原点的距离*/
        /*在坐标轴中画如下4个点*/
        let points = [[ 10, 10], [40, 20], [50, 30], [80,40]];
        /*在指定位置画点*/
        points.forEach(function (arr) {
            pencil.fillRect(origin.x + arr[0],origin.y - arr[1], 2, 2);
        });
        /*在坐标轴中根据点的坐标画折线*/
        pencil.beginPath();
        points.forEach(function (arr) {
            pencil.lineTo(origin.x +arr[0]+1, origin.y -arr[1]+1)
        });
        pencil.stroke();

5.关于map的使用

* 语法：数组.map(function(val, index, arr){return 1;})
* 返回值：把回调return的值组成一个数组

数组.map

canvas-第一天04部分

猜你喜欢