最新要闻

广告

手机

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

 警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

家电

  1. 首页
  2. 移动通信
  3. 内容

观察：Canvas画布

来源：博客园


(相关资料图)

之前Web上的动画都是使用Flash实现的。比如动画，广告，游戏等等，基本上都是Flash实现的。Flash是有缺点的，需要安装Adobe Flash Player, 漏洞多，重量大，卡顿不流程等。Html5提出了一个新的canvas标签，彻底颠覆了Flash的主导地位。现在无论广告，动画，游戏都可以使用canvas实现了。Canvas是一个轻量级的画布，使用Canvas进行JS编程。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>
Canvas的像素化使用canvas绘制的图形一旦绘制成功了，canvas就像素化了它们，canvas没有能力从画布上再次拿到这个图形，也就是说我们是没有方法去修改已经画到画布上的内容了。这也是canvas比较轻量级的原因，Flash则可以通过api对已经上画布的内容进行再次绘制。如果想让这个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>
动画是一系列静态画面的连续播放，我们把每一次绘制的静态画面叫做“一帧”，时间间隔表示的是帧的间隔。Canvas动画因为canvas不能修改已经绘制到屏幕的图像，所以我们要维护一组对象的状态和属性，通过对象生成对应的动画帧页面，在动画时将对象状态通过清屏-更新-绘制的流程进行更新页面。所以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>
Canvas绘制API利用canvas可以绘制矩形填充，矩形边框，自定义路径等。绘制路径的作用是为了设置一个不规则的多边形状态，路径是闭合的。使用路径绘制的步骤如下：1.打开路径2.设置路径起点3.使用命令画出路径4.封闭路径5.填充或绘制已经封闭的路径
      请升级浏览器    <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>

关键词： 连续播放 所有属性