canvas的基础应用

关注

原创最新推荐文章于 2026-09-26 10:02:26 发布 300 阅读 AI 写同款· GEO 优化 ›

js学习之canvas的基础与应用(一) 2.作画成矩形：ctx.rect(x,y,长,宽)x与y表示作画矩形的左上角的顶点在使用这种方式时也要注意路径的问题ctx.fillRect(x,y,长,宽）这表示自动填充这个矩形的内部颜色，默认情况下内部填充的颜色是黑色，采用这种方式时不需要注意路径的问题ctx.strokeRect(x,y,长,宽),自动进行描边，这种方式不需要注意路径问题ctx.clearRect(x,y,长,宽)表示擦除当前的矩形的区域。下面就是贝塞尔曲线的应用。下面就是一个实际的例子，上面也有代码的注释。阅读详情

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()