canvas基础知识点（一）

2024年4月19日 106次阅读 来源: paney129

  1. 给canvas设置宽高：
    canvas标签的宽高默认是300*150,是一个行内块元素
    可以在canvas标签上通过width，height来设置
    可以在js中给dom对象设置：

      mycanvas.width = 500
  mycanvas.height = 500

    注意：不要通过css来调整canvas的宽高,导致内部的canvas画布被拉伸，图形变形

    1. 获取画笔工具：
      canvas绘图都是通过canvas标签的画笔来进行的

      var ctx = canvas.getContext(‘2d’)

      注意，不要写成getContent，里面传入的参数目前也只有2d这一种情况

3、 描边和填充

canvas绘制图形都是绘制的路径，看不见摸不着的一种东西，需要进行描边或填充之后才能看到真正的图形
如果绘制图形的路径在绘制完成后没有闭合，继续绘制路径的时候会首尾相连
在填充的时候如果路径依然没有闭合，会将路径的闭合区域填充

ctx.fill()//填充
ctx.stroke()//描边

可以调整ctx.strokeStyle,ctx.fillStyle属性来更改填充，描边的颜色，值为颜色值（rgb,rgba,word,16进制）
    1. 绘制矩形
      ctx.rect(x,y,w,h)
      canvas的坐标系起点是左上角，x轴向右正方向，y轴向下正方向
      x,y代表的是矩形起点（左上角）的位置，w,h就是宽高
      可以使用strokeRect,fillRect方法直接绘制一个填充、描边的矩形

    1. 清楚矩形区域以及动画原理
      ctx.clearRect(x,y,w,h)可以清除某一个矩形区域的图形
      canvas实现动画的原理就是不断的绘制和擦除来实现

         var ctx = canvas.getContext("2d")
   let x=0,y=0;
   ctx.fillRect(x,y,50,50)    
   setInterval(function () {
       //绘制新的图形前擦掉之前的
       ctx.clearRect(0,0,canvas.width,canvas.height)
       x++;y++;
       //不断绘制新图形
       ctx.fillRect(x,y,50,50)
   },30)
        原文作者：paney129
        原文地址: https://segmentfault.com/a/1190000013044884
        本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
    点赞