Canvas画布

Posted 滴水微澜

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Canvas画布相关的知识,希望对你有一定的参考价值。

之前Web上的动画都是使用Flash实现的。比如动画,广告,游戏等等,基本上都是Flash实现的。
Flash是有缺点的,需要安装Adobe Flash Player, 漏洞多,重量大,卡顿不流程等。 
Html5提出了一个新的canvas标签,彻底颠覆了Flash的主导地位。现在无论广告,动画,游戏都可以使用canvas实现了。Canvas是一个轻量级的画布,使用Canvas进行JS编程。
 
Canvas基本使用
<body>
  <!-- canvas画布的宽高设置需要使用 属性,如果使用css会导致绘制内容变形 -->
  <canvas id="canvasId"   >
    低版本提示语,支持canvas标签的浏览器看不到
  </canvas>

  <script>
    var canvas = document.getElementById(\'canvasId\')
    // 获取2d画布
    var ctx = canvas.getContext(\'2d\')
    // 设置填充色
    ctx.fillStyle=\'red\'
    // 填充一个矩形
    ctx.fillRect(10,20,100,100)

    console.log(ctx);

    console.log(canvas);
  </script>
</body>
Canvas的像素化
使用canvas绘制的图形一旦绘制成功了,canvas就像素化了它们,canvas没有能力从画布上再次拿到这个图形,也就是说我们是没有方法去修改已经画到画布上的内容了。这也是canvas比较轻量级的原因,Flash则可以通过api对已经上画布的内容进行再次绘制。
如果想让这个canvas图形移动(被修改),必须按照清屏-更新-渲染的逻辑进行编程,简单说就是重新再画一次。<body>
  <canvas id="myCanvasId"   >
    请升级浏览器
  </canvas>
  
  <script>
    var canvas = document.getElementById(\'myCanvasId\')
    var ctx = canvas.getContext(\'2d\')

    ctx.fillStyle = \'blue\'
    ctx.fillRect(100, 100, 100, 100)

    var left = 100
    setInterval(() => 
      // 1.清屏
      ctx.clearRect(0, 0, 500, 500)
      // 2.更新
      left++
      // 3.渲染
      ctx.fillRect(left, 100, 100, 100)
    , 10);

  </script>
  
</body>
动画是一系列静态画面的连续播放,我们把每一次绘制的静态画面叫做“一帧”,时间间隔表示的是帧的间隔。
 
Canvas动画
因为canvas不能修改已经绘制到屏幕的图像,所以我们要维护一组对象的状态和属性,通过对象生成对应的动画帧页面,在动画时将对象状态通过清屏-更新-绘制的流程进行更新页面。所以canvas采用的是面向对象编程的。
面向对象动画,定义一个类,里面维护着动画所需要的所有属性和状态,然后实例化多个对象,对应维护多个动画状态和属性。
<body>
  <canvas id="myCanvasId"   >
    请升级浏览器
  </canvas>

  <script>
    var canvas = document.getElementById(\'myCanvasId\')
    var ctx = canvas.getContext(\'2d\')

    // 定义一个类
    function Rect(x, y, w, h, color) 
      this.x = x
      this.y = y
      this.w = w
      this.h = h
      this.color = color
    
    // 添加类方法
    Rect.prototype.update = function () 
      this.x++;
    
    Rect.prototype.render = function() 
      ctx.fillStyle=this.color
      ctx.fillRect(this.x, this.y, this.w, this.h)
    
    // 实例化
    var r1 = new Rect(10, 100, 100, 100, \'blue\')
    var r2 = new Rect(10, 300, 100, 200, \'red\')

    setInterval(() => 
      ctx.clearRect(0, 0, 500, 500)
      // 第一个对象
      r1.update()
      r1.render()
      // 第二个对象
      r2.update()
      r2.render()
    , 10);

  </script>
</body>
Canvas绘制API
利用canvas可以绘制矩形填充,矩形边框,自定义路径等。
绘制路径的作用是为了设置一个不规则的多边形状态,路径是闭合的。使用路径绘制的步骤如下:
1.打开路径
2.设置路径起点
3.使用命令画出路径
4.封闭路径
5.填充或绘制已经封闭的路径
<body>
  <canvas id="myCanvasId"   >
    请升级浏览器
  </canvas>

  <script>
    var canvas = document.getElementById(\'myCanvasId\')
    var ctx = canvas.getContext(\'2d\')
    console.log(ctx);

    // 画矩形填充
    ctx.fillStyle=\'red\'
    ctx.fillRect(50,100,100,100)

    // 画矩形框
    ctx.strokeStyle=\'blue\'
    ctx.strokeRect(200,100,100,100)
      
    // 画路径
    // 1.打开路径
    ctx.beginPath();
    // 2.移动绘制点
    ctx.moveTo(50, 400);
    // 3.描述行进路径
    ctx.lineTo(100, 450);
    ctx.lineTo(200, 300);
    // 4.闭合路径
    ctx.closePath();
    // 5.绘制路径
    // ctx.strokeStyle = \'brown\'
    // ctx.stroke();
    // 或
    ctx.fillStyle = \'pink\'
    ctx.fill();
  
    // 画弧度
    // 1.开启路径
    ctx.beginPath()
    // 2.画圆弧
    // 400, 400为起点,  50为半径,  0, 1为开始结束弧度(圆有2Pi个弧度约等于7个弧度), false为顺时针画;
    ctx.arc(400, 400, 50, 0, 1, false);
    // 3.绘制路径
    // ctx.closePath()
    // stroke()画实际路径,fill()会自动加colsePath()画出的是闭合路径。
    ctx.strokeStyle=\'green\'
    ctx.stroke()
      
    
  </script>
</body>

 

 
 
 
 

以上是关于Canvas画布的主要内容,如果未能解决你的问题,请参考以下文章

如何在固定的canvas画布内缩放

新手用canvas画布画啥比较好

python canvas画布

vue中判断canvas画布是不是为空

自定义View中改变画布(canvas)状态在画图

Canvas清除画布的3种方法