Canvas图形绘画标签

Canvas图形绘画标签

---

• canvas定义

  • canvas标签用来定义图形，是一个图形容器，常常用来进行绘图操作，要与js搭配使用。

• 创建一个画布容器

  • width,height定义画布容器大小

  • <canvas id="myCanvas" width="500" height="400" style="border:1px solid #000">
    </canvas>
    

• canvas本身没有绘图能力，绘图操作要在js里进行

  1. 通过js获取canvas元素对象

     var canvas = document.getElementById("myCanvas")
     

  2. 创建context对象，context对象拥有多种绘制方法，一般通过调用获取的canvas元素对象下的方法

     var cxt = canvas.getContext("2d")
     

  3. 实例线条

     //开始一条路径
     ctx.beginPath();
     //将画笔移动到指定起始坐标点上
     ctx.moveTo(100,100);
     //添加一个点，创建从上一个点到该点的线条
     ctx.lineTo(300,100);
     ctx.lineTo(100,200);
     //创建起始坐标点到最终坐标点的路径
     ctx.closePath();
     //执行绘制
     ctx.stroke();
     

     

  4. 实例矩形

     rect(x,y,width,height)

     ​ x，y分别为矩形左上角纵横坐标点

     ​ width，height为矩形的宽高

     //开始一条路径
     ctx.beginPath();
     //创建矩形
     ctx.rect(100,100,200,200);
     //填充颜色
     ctx.fillStyle="red";
     ctx.fill();
     //执行绘制
     ctx.stroke();
     

     

  5. 实例圆形

     arc(x,y,r,sAngle,eAngle,counterclockwise)方法创建弧/曲线

     • x，y分别为圆的中心的纵横坐标
     • r为圆的半径
     • sAngle起始角，以弧度计。（弧的圆形的三点钟位置是0度）
     • eAngle结束角，以弧度计
     • counterclockwise可选。规定顺序时针还是逆时针绘图。false为顺时针，true为逆时针。

     //开始一条路径
     ctx.beginPath();
     //创建原型
     ctx.arc(100,100,50,0,2*Math.PI);
     //执行绘制
     ctx.stroke();
     

     

来源：CSDN

作者：浏星者

链接：https://blog.csdn.net/qq_45740562/article/details/103845513