【无标题】学好canvas只需要一篇文章

文章目录

• 前言
• 一、canvas是什么？
• 二、canvas操作
  • 1.画线
  • 2.画曲线
  • 3.画三角形
  • 4.画矩形
  • 5.画圆形
  • 6.画椭圆
• 总结

canvas画布主要就是要找坐标

---

前言

---

一、canvas是什么？

canvas是一个可自定义width、height的矩形画布，画布左上角为坐标原点，以像素为单位，水平向右为x轴，垂直向下为y轴，画布内所有元素的位置基于原点进行定位。

二、canvas操作

        //1. 获取一个画布（要创建一个画布对象）
        //2. 创建一个画布上下文对象
        //3. 告诉程序绘画路径开始
        //4. 绘制图形的起始点(坐标)
        //5. 绘制图形的连接点
        //6. 设置图形的样式
        //7. 描边

1.画线

找到起始坐标即可，canvas画布操作大致相同，以画线为例

代码如下（示例）：

 <canvas id="canvas" width="500px" height="500px">您的游览器版本太低,不支持画布,请更新游览器</canvas>
    <script type="text/javascript">
    
        var canvas = document.getElementById("canvas"); // 1.获取一个画布(要创建一个画布对象)

        var context = canvas.getContext("2d"); //2.创建一个画布的下文对象

        context.beginPath(); //3.告诉程序绘画路径开始

        context.moveTo(0, 0); //4.绘制图形的起始点(坐标)

        context