认识Canvas(一)

认识Canvas标签

  1. canvas标签是HTML5新增的一个html标签,只能在现代浏览器中使用,如果浏览器不支持canvas标签,就会把canvas标签当成一个普通的div标签来处理
  2. canvas标签具有默认宽高:300*150,水平方向上有300个像素点,垂直方向上有150个像素点
  3. 给canvas标签设置宽高
    1. 通过html标签的属性来设置宽高——>会增加canvas中的像素点的个数
    2. 通过样式设置宽高——>不会增加像素点的个数,只是扩大了像素点的体积

绘制直线

  1. 绘制直线
    1. 获取canvas标签
    2. 获取canvas的2d上下文:var ctx=canvas.getContext(“2d”)
    3. 设置直线的起点
    4. 从起点到终点拉一条直线
    5. 描边
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      //1、获取canvas标签
      var canvas=document.getElementById("canvas");
      //2、获取canvas标签的上下文(工具箱)
      var ctx=canvas.getContext("2d");//获取2d上下文
      //3、设置绘制的起点
      //——>canvas画布的0,0在画布的左上角顶点,沿着水平方向向右延伸,就是x轴的正方向,沿着垂直方法向下延伸,就是y轴的正方向
      ctx.moveTo(1,100);
      //4、向指定位置拉一条直线
      ctx.lineTo(300,100);
      //5、描边——>默认以黑色的宽度为1px的线条
      ctx.stroke();

fill()

  1. 绘制实心矩形

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>$Title$</title>
    </head>
    <body>
    <canvas id="canvas" width="800" height="600" style="border:1px solid red"></canvas>
    </body>
    <script>
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    //1、设置绘制的起点:
    ctx.moveTo(50,50);
    //2、拉直线
    ctx.lineTo(50,200);
    ctx.lineTo(300,200);
    ctx.lineTo(300,50);
    //3、闭合路径
    //ctx.closePath();
    //4、修改填充的颜色
    ctx.fillStyle="pink";
    //5、默认以黑色的背景填充该矩形
    ctx.fill();//在fill方法内部会自动帮助我们闭合路径
    //6、描边
    ctx.strokeStyle="blue";
    ctx.stroke();
    </script>
    </html>
  2. 非零环绕原则
    认识Canvas1

闭合路径:closePath

  1. 在stroke的时候自动帮助我们闭合路径,将绘制的起点和绘制的终点连接起来
  2. 在fill的时候默认会帮助我们闭合路径

开启新路径:beginPath

  1. Canvas是基于状态的绘制,状态保存了:绘制的方式,绘制的颜色,绘制的线宽等等属性。。。这些信息
  2. 如果当绘制的时候遇到了不同状态的时候就需要开辟一个新的路径:beginPath()
    1. 需要在一个canvas画布中同时绘制一个蓝色边框的三角形和一个红色边框的矩形
    2. 为了方便起见,绘制具有不同状态(描边色不同、填充色不同)的图形,都先beginPath

线型相关的属性

  1. lineWidth:线宽
    1. 线宽的计算规则
      1. 线宽为1:以线段的中轴线分别向外1px的虚影
      2. 线宽为2,:以线段的中轴线分别向外延伸1px
      3. 线宽为3:以线段的中轴线分别向外延伸1px,同时增加1px的虚影
      4. 线宽为4,:以线段的中轴线分别向外延伸2px
      5. 以此类推
    2. 具有默认线宽:1px
  2. setLineDash([])
    1. 数组中只有一个元素([3]):表示实线部分和虚线部分的长度均为该值
    2. 数组中有多个元素:数组里面的索引为偶数项为实线部分的长度,奇数项索引是虚线部分的长度 [1,3] 0;1 1:3
    3. [1,3,5] //1——>3——>5——>1——>3
1
2
3
4
5
6
7
8
9
10
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.moveTo(50,50);
ctx.lineTo(300,50);
ctx.setLineDash([10,3]);
//为正数,表示实线部分向左偏移指定像素的距离
// ctx.lineDashOffset=3;
//为负数,表示实线部分向右偏移指定的像素的距离
// ctx.lineDashOffset=-5;
ctx.stroke();
  1. getLineDash:返回一个数组,就是上面通过setLineDash传入的值
  2. lineDashOffset
  3. lineCap——>设置线帽:butt(默认值)、round、square
  4. lineJoin——>设置不同线条交叉的方式:miter(默认)、round、bevel

填充和描边的颜色

  1. strokeStyle
  2. fillStyle

×

可以的话,我想喝杯咖啡续命

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

文章目录
  1. 1. 认识Canvas标签
  2. 2. 绘制直线
  3. 3. fill()
  4. 4. 闭合路径:closePath
  5. 5. 开启新路径:beginPath
  6. 6. 线型相关的属性
  7. 7. 填充和描边的颜色