【canvas知识】canvas的基本使用

最新推荐文章于 2024-06-04 10:27:09 发布

饭啊饭°

最新推荐文章于 2024-06-04 10:27:09 发布

阅读量935

点赞数 1

分类专栏：计算机小知识文章标签： javascript

本文链接：https://blog.csdn.net/weixin_44337386/article/details/124237843

版权

文章目录

一、canvas基本画图
二、canvas绘制矩形
三、canvas绘制圆形
四、清除画布与绘制文字
五、绘制一个柱状图

一、canvas基本画图

canvas作为html中的一个标签，可以在网页上生成一块画布，其中，画布是网页的元素，但是画布上的东西不是，浏览器认为canvas是个图片，可以右键保存。
画布有默认的宽和高，是300*150大小，画布的宽高不能通过style设置，只能通过canvas自己的属性设置。下面是一个基本画布的代码。

<style>
    * {
   
        margin: 0;
        padding: 0;
    }
    canvas {
   
        border:1px solid black
    }
</style>

<body>
    <canvas width="600" height="800"></canvas>
</body>

画笔是通过js编写的，画布的横纵坐标如下所示

下面通过代码认识画笔。

let canvas = document.querySelector('canvas')   //获取画布元素
let ctx = canvas.getContext('2d')  //创建画笔
console.log(ctx);    //可以看到画笔的属性
ctx.moveTo(100,100)    //画笔的起始位置
ctx.lineTo(200,200)   //画笔的下一位置
ctx.lineTo(100,200)  

ctx.fillStyle='red'   // 图像填充颜色

ctx.strokeStyle = 'purple'  // 线段颜色
ctx.lineWidth = '10'    //线段宽度
ctx.fill()       //展示属性
ctx.closePath()