日常学习之canvas(2)

先补充上一个正方形在创建完画布上下文对象之后可以使用context.fillRect(x,y,width,height)来设置一个四方形；

利用canvas画一个虚线和圆

 //1. 获取一个画布（要创建一个画布对象）

    var canvas=document.getElementById("canvas");

    // 2. 创建一个画布上下文对象

    var context=canvas.getContext("2d");

    // //3. 告诉程序绘画路径开始

    context.beginPath();

    // //4. 绘制图形的起始点(坐标)

    context.moveTo(0,0);

   

    // //5. 绘制图形的连接点

    context.lineTo(0,200);

    // //6. 设置图形的样式

    context.strokeStyle="red";

//利用setLineDash([大小,间隔]);设置虚线

   context.strokeStyle="red";

   context.setLineDash([10,10]);

    // //7. 描边

    context.stroke();

效果图:

圆

     //1. 获取一个画布（要创建一个画布对象）
    var canvas=document.getElementById("canvas");
    // 2. 创建一个画布上下文对象
    var context= canvas.getContext("2d");
    // //3. 告诉程序绘画路径开始
    context.beginPath();
    //利用arc(x,y,半径,弧度,math.pi,布尔值);
    context.arc(100,100,50,0,2*Math.PI,true);
    //4描边
    context.stroke();

效果图: