Canvas

123

 //canvas 是没有绘图能力的  所有的绘图都是js代码写的
    let liner_canvas = document.getElementById('liner');
    //然后，创建 context 对象：他拥有绘图的方法
    let content_2d = liner_canvas.getContext('2d');
    content_2d.fillStyle="#FF0000";
    content_2d.fillRect(0,0,150,75); // 方法定义了矩形当前的填充方式

    /**- 线 moveTo(x,y)开始 lineTo(x,y) 结束-**/
    content_2d.beginPath();
    content_2d.moveTo(170,0);
    content_2d.lineTo(200,70);
    content_2d.lineWidth = 1;
    content_2d.strokeStyle = 'green';
    content_2d.stroke();

    /**- 圆 arc(x,y,r,start,stop) X.Y圆心的位置 -**/
    content_2d.beginPath();
    content_2d.arc(210 + 50,20 + 50,50,0,Math.PI * 2);
    content_2d.strokeStyle = 'purple';
    content_2d.stroke();

    /**- 文本 -**/
    content_2d.beginPath();
    content_2d.strokeStyle = 'pink';
    content_2d.font="30px Arial";
    content_2d.fillText("Hello World",310,50);
    content_2d.strokeText("Hello World",310,100);

    /**- 渐变 -**/
    // 线性
    var gra = content_2d.createLinearGradient(0,200,200,200);
    gra.addColorStop(0,'gray');
    gra.addColorStop(1,'red');
    content_2d.fillStyle = gra;
    content_2d.fillRect(0,200,200,300);

    // 扩散性 fillRect(x,y,w,h) 开始圆和结束圆的大小
    var gra = content_2d.createRadialGradient(320,350,80,320,350,200);
    gra.addColorStop(0,'gray');
    gra.addColorStop(1,'red');
    content_2d.fillStyle = gra;
    content_2d.fillRect(220,200,200,300);


    /**- 将一张图会知道canvas上面 drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)-**/
    var img = document.getElementById('img');
    content_2d.drawImage(img,530,200);


    /**- 绘制表格 -**/
    content_2d.beginPath();
    content_2d.strokeStyle = '#f40';
    let tableW = 10,tableH = 10;
    for (let i = 0; i < 11;i++){
        content_2d.moveTo(0,530 + i * 10);
        content_2d.lineTo(100,530 + i * 10);

        // 横线
        content_2d.moveTo(i * 10,530);
        content_2d.lineTo(i * 10,630);
    }
    content_2d.stroke();