canvas的基础应用

canvas的一些基本应用

        //获取画板元素
        let canvas = document.getElementById("canvas")
        //创建一饿context对象
        let ctx = canvas.getContext("2d")

        //设置canvas和屏幕一样大小
        canvas.width = document.documentElement.clientWidth;
        canvas.height = document.documentElement.clientHeight;

1.绘制一个矩形

  //1.画矩形
        //设置颜色
        ctx.fillStyle = '#c000d0';
        //画一个矩形   距离画板左上角0 0 的位置画一个200的矩形
        ctx.fillRect(100, 100, 100, 100);  //充填方式

2.绘制一根线条

        //2.画线
        //开始一条新的路径
        ctx.beginPath();
        //定义线条开始坐标
        ctx.moveTo(250, 200);
        //定义线条结束坐标
        ctx.lineTo(300, 300);
        //绘制线条
        ctx.stroke();

3.绘制一个圆形

 //3.画圆
        //开始一条新的路径
        ctx.beginPath();
        ctx.arc(400, 200, 40, 0, 2 * Math.PI)
        //绘制线条
        ctx.stroke();

4.绘制一个文本

//4.文本
        //设置文字大小
        ctx.font = '20px sans-serif';
        //设置文字内容
        ctx.fillText("我是canvas", 400, 400);

5.绘制一个空心文字

 //5.空心文字
        //开始一条新的路径
        ctx.beginPath();
        ctx.font = "20px Arial";
        //设置空心文本
        ctx.strokeText("我是空心的", 200, 400);

6.线性渐变

 //6.线性渐变
        ctx.beginPath()
        //创建一个渐变线条
        let gradient = ctx.createLinearGradient(400, 400, 600, 400);
        gradient.addColorStop(0, 'red');
        gradient.addColorStop(1, "yellow")
        ctx.fillStyle = gradient
        ctx.fillRect(500, 500, 100, 100)
        //绘制线条
        ctx.stroke()

7.径向渐变

  //7.径向渐变
        ctx.beginPath()
        let radia = ctx.createRadialGradient(175,570,20,175,570,50);
        radia.addColorStop(0, 'rgba(255,0,0,0.75)')
        radia.addColorStop(0.5, 'rgba(0,255,0,0.75)')
        radia.addColorStop(1, 'rgba(0,0,255,0.75)')
        ctx.fillStyle = radia
        ctx.fillRect(100,500,150,150)
        //绘制线条
        ctx.stroke()