canvas绘图（一）

最新推荐文章于 2025-05-22 13:45:07 发布

原创最新推荐文章于 2025-05-22 13:45:07 发布 · 533 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#canvas #绘图

HTML 专栏收录该内容

28 篇文章

订阅专栏

这篇博客详细介绍了canvas的基本绘图操作，包括绘制矩形、圆形、多角度图形、文字以及图片的方法，提供了丰富的参数说明和效果展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

canvas绘制矩形1：

 <canvas width="500" height="300">您的浏览器不支持canvas</canvas>
    <script>
        //获取标签
        var cas = document.querySelector('canvas');
        //获取绘制环境
        var ctx = cas.getContext('2d');
        //开始路径
        ctx.beginPath();
        //路径
        ctx.moveTo(100,100);
        ctx.lineTo(250,100);//画路径
        ctx.lineTo(250,200);
        ctx.lineTo(100,200);
        //结束路径
        ctx.closePath();
        //填充
        ctx.fillStyle='#ff0';
        ctx.fill();
    </script>

lineTo(x,y)参数：

x 绘制位置x
y 绘制位置y

canvas绘制矩形2：

 <canvas width="500" height="300">您的浏览器不支持canvas</canvas>
    <script>
        //获取标签
        var cas = document.querySelector('canvas');
        //获取绘制环境
        var ctx = cas.getContext('2d');
        ctx.fillStyle='#ff0';
        ctx.fillRect(100,100,100,100);
    </script>

fillRect(a,b,c,d)参数：
* a 绘制位置x
* b 绘制位置y
* c 绘制宽
* d绘制高

效果：
这里写图片描述

canvas绘制圆形：

 <canvas width="500" height="300">您的浏览器不支持canvas</canvas>
    <script>
        //获取标签
        var cas = document.querySelector('canvas');
        //获取绘制环境
        var ctx = cas.getContext('2d');
        //开始路径
        ctx.beginPath();
        //路径
        ctx.arc(250,150,100,0,360);
        //结束路径
        ctx.closePath();
        //填充
        ctx.fillStyle='#ff0';
        ctx.fill();
    </script>

效果图：
这里写图片描述

canvas绘制多角度图形

 <canvas width="500" height="300">您的浏览器不支持canvas</canvas>
    <script>
        //获取标签
        var cas = document.querySelector('canvas');
        //获取绘制环境
        var ctx = cas.getContext('2d');
        //开始路径
        ctx.beginPath();
        //路径
        ctx.moveTo(250,150);
        ctx.arc(250,150,100,toDeg(0),toDeg(270));
        //结束路径
        ctx.closePath();
        //填充
        ctx.fillStyle='red';
        ctx.fill();

        /*角度转弧度*/
        function toDeg(r){
            return r*Math.PI/180;
        }

arc（a,b,c,d,e）参数：
* a 绘制x
* b 绘制y
* c 圆半径
* d 圆开始角度
* e 圆结束角度

效果图：
这里写图片描述

canvas绘制文字

<canvas width="500" height="300">您的浏览器不支持canvas</canvas>
<script>
    //获取标签
    var cas = document.querySelector('canvas');
    //获取绘制环境
    var ctx = cas.getContext('2d');
    ctx.font = '20px pinghei';
    ctx.textAlign = 'center';
    ctx.fillText('zww',250,150);
</script>

fillText(a,b,c)参数：

a 绘制内容
b 绘制x
c 绘制y

效果：
这里写图片描述

canvas绘制图片

<canvas width="500" height="300">您的浏览器不支持canvas</canvas>
<script>
    //获取标签
    var cas = document.querySelector('canvas');
    //获取绘制环境
    var ctx = cas.getContext('2d');
    //导入图片路径
    var img = new Image();
    img.src = './qq1.png';
    img.onload = function(){
        /*绘制图片*/
        ctx.drawImage(img,0,0,200,100);
    }

</script>