canvas基本用法

一、创建canvas

    
    


    
        我们在设置 canvas 之前需要首先监测用户电脑是否支持 canvas
    
    

如图

image.png

二、修改 Canvas 的画布

image.png

三、获取绘制环境

我们可以通过 var ctx = canvas_1.getContext("2d"); 来去获取到我们的绘制环境。

image.png

四、绘制的坐标轴

横轴向右是正，纵轴向下是正。

image.png

五 、绘制直线

绘制直线满足的条件
线的起点
线的终点
线的颜色
线的宽度

image.png

直线样式

  // 直线填充
  // 开始绘制
        ctx.beginPath();
        //设置绘制起点
        ctx.moveTo(0, 0);
        //设置绘制下一个点
        ctx.lineTo(300, 400);
        // //设置绘制下一个点
        ctx.lineTo(400, 100);
        // //设置线的宽度
        ctx.lineWidth = 10;
        // //结束绘制
        ctx.closePath();
        // // 设置填充样式
        ctx.fillStyle = "green";
        // //设置绘制的样式
        ctx.strokeStyle = "red";
        ctx.fill()
        ctx.stroke()

image.png

设置边角的样式及绘制矩形

image.png

绘制字符串

image.png

设置阴影

image.png