canvas-第一天

回顾一下绘图步骤：

1.获取canvas 对象

2.调用getContext（‘2d’）

3.基本的绘图命令：

//  画一个矩形
    pencil.fillStyle = "#ff0000";
    pencil.fillRect(0, 0, 100, 100);

//  画一条线
    pencil.moveTo(120, 0); //设置开始路径
    pencil.lineTo(200,100);//直线到的位置
    pencil.stroke();//笔触 

//  画一个圆
    pencil.beginPath();
    pencil.arc(320,50,40,0,2*Math.PI);
    pencil.stroke();//笔触
//  文本
    pencil.font= "30px Arial";
    pencil.fillText("HELLO WORLD", 0, 200);

正式开始：

1.绘制一条交叉线

    pencil.moveTo(0, 0);
    pencil.lineTo(300,300);

    pencil.moveTo(300, 0);
    pencil.lineTo(0,300);

    pencil.stroke();//笔触

2.基本绘图方法

（1）getContext（‘2d’）//2d 是平面图形 'webgl'是立体图形

（2）moveTo() lineTo 绘制起点和终点

（3）stroke（）方法用于连线将描述的所有点按照指定顺序连接起来

（4）fill（）填充

3.直线图形

三角形：

        
        pencil.moveTo(10, 10);
        pencil.lineTo(110,110);
        pencil.lineTo(10,110);
        pencil.lineTo(10,10);
        pencil.stroke();

正方形：

        pencil.moveTo(10, 10);
        pencil.lineTo(110,10);
        pencil.lineTo(110,110);
        pencil.lineTo(10,110);
        pencil.lineTo(10,10);
        pencil.stroke();

梯形：

        pencil.moveTo(10, 10);
        pencil.lineTo(60,10);
        pencil.lineTo(110,110);
        pencil.lineTo(10,110);
        pencil.lineTo(10,10);
        pencil.stroke();

在pencil.stroke();上添加pencil.fill();即可

中空矩形：

     var canvas = document.getElementById("demoCanvas");
        var pencil = canvas.getContext("2d");
        function draw(startX, startY, width, height, lineWidth, strokeStyle) {
            pencil.moveTo(startX, startY);
            pencil.lineTo(startX + width, startY);
            pencil.lineTo(startX + width, startY + height);
            pencil.lineTo(startX, startY + height);
            pencil.closePath();
            pencil.lineWidth = lineWidth;
            pencil.strokeStyle = strokeStyle;
            pencil.stroke();
        }

        draw(10, 10, 100, 100, 6, 'skyblue');
        pencil.moveTo( 35, 35 );
        pencil.lineTo( 35, 55 );
        pencil.lineTo( 55, 55 );
        pencil.lineTo( 55, 35 );
        pencil.closePath();

        // 一起填充
        pencil.fill();

猜你喜欢