// 画一个矩形
function demo() {
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    context.fillStyle = "#FF0000";
    context.fillRect(50, 50, 150, 100);
}

// 绘制一个线条
// context.moveTo(x, y) 起点 moveTo 的点到 终点 lineTo 的点之间画一条直线
// context.lineTo(x, y) 如果没有moveTo那么第一次lineTo的效果和moveTo一样
// 每次lineTo后如果没有moveTo，那么下次lineTo的开始点为前一次lineTo的结束点
function demo1() {
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    context.strokeStyle = "#ff0000";

    context.moveTo(50, 200);
    context.lineTo(250, 450);
    context.stroke();
}

// 绘制直角三角形
function demo2() {
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext('2d');

    context.strokeStyle = "#ff0000";
    context.moveTo(20, 20);
    context.lineTo(20, 70);
    context.lineTo(70, 70);
    context.lineTo(20, 20);
    context.stroke();
}

// 圆角连线
// lineJoin   设置线交汇处的样式  miter(尖角默认) bevel(斜角)  round(圆角)
// lineCap      定义线条的端点      butt(平 默认) round(圆)   square(方)
function demo3() {
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext('2d');

    context.beginPath();
    context.moveTo(100, 8);
    context.lineTo(180, 8);
    context.closePath();
    context.lineWidth = 8;
    context.strokeStyle = "#00ff00";

    context.lineJoin = "round";
    context.stroke();

    context.beginPath();
    context.moveTo(100, 20);
    context.lineTo(100, 80);
    context.lineTo(180, 80);
    context.lineTo(180, 20);
    context.lineTo(100, 20);
    context.closePath();        // 闭合路径
    context.lineWidth = 10;
    context.strokeStyle = "rgba(0, 255, 0, 0.5)";
    context.lineJoin = "round";
    context.stroke();
}

// 绘制矩形
// context.fillRect(x,y,width,height) 
// strokeRect(x,y,width,height)
// x 起点横坐标 y 起点纵坐标  width 宽度  height 高度
function demo4() {
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");

    // 填充颜色
    context.fillRect(20, 20, 60, 60);
    // 边框
    context.strokeRect(100, 20, 60, 60);
}

// demo()
// demo1()
// demo2()
demo3()