Canvas画布

Canvas · 浏览次数 : 32

小编点评

**内容概述** 该页面介绍了使用 Canvas 来实现动画的技术。 **主要内容** * Canvas 是一个新的画布,可以用于在 HTML5 中实现动画。 * Canvas 比 Flash 在性能方面更加友好,因为它不需要安装任何插件。 * Canvas 可以绘制各种图形,包括矩形、线、路径和弧度。 * Canvas 的像素化过程允许我们从画布上再次拿到已经绘制的内容。 **主要技术** * HTML5 canvas * Canvas 绘制 API * JavaScript **示例** 该页面展示了如何使用 Canvas 绘制一个矩形填充,以及一个路径,这些图形使用 `ctx.fillStyle` 和 `ctx.stroke()` 方法绘制。 **关键要点** * Canvas 是一个用于动画的强大工具。 * Canvas 比 Flash 在性能和易用性方面更加友好。 * Canvas 可以用来绘制各种图形,包括矩形、线、路径和弧度。 * Canvas 的像素化过程允许我们从画布上再次拿到已经绘制的内容。

正文

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

之前Web上的动画都是使用Flash实现的。比如动画,广告,游戏等等,基本上都是Flash实现的。 Flash是有缺点的,需要安装Adobe Flash Player, 漏洞多,重量大,卡顿不流程等。 Html5提出了一个新的canvas标签,彻底颠覆了Flash的主导地位。现在无论广告,动画,游戏

鸿蒙HarmonyOS实战-ArkUI组件(Canvas)

一、Canvas Canvas组件是一种图形渲染组件,它提供了一个画布(canvas),开发者可以在上面绘制各种图形、文本等。Canvas组件通常用于创建游戏、数据可视化等需要动态绘制图形的应用程序。 Canvas组件提供了多个API,开发者可以使用这些API进行绘制操作。常用的API包括绘制矩

解析Html Canvas的卓越性能与高效渲染策略

一、什么是Canvas 想必学习前端的同学们对Canvas 都不陌生,它是 HTML5 新增的“画布”元素,可以使用JavaScript来绘制图形。 Canvas元素是在HTML5中新增的标签用于在网页实时生成图像,并且可以操作图像内容,基本上它是一个可以用JavaScript操作的位图(bitma

在Vue中使用Canvas绘制背景

好家伙, 在vue中使用canvas绘制与在html中使用canvas绘制大致相同, 但又有所区别 法一(无图片资源): vue中canvas的使用 - 掘金 (juejin.cn) 找到cancas元素; 创建context对象;getContext() 方法返回一个用于画布上绘图环境;参数 ‘2

Canvas简历编辑器-我的剪贴板里究竟有什么数据

Canvas图形编辑器-我的剪贴板里究竟有什么数据 在这里我们先来聊聊我们究竟应该如何操作剪贴板,也就是我们在浏览器的复制粘贴事件,并且在此基础上聊聊我们在Canvas图形编辑器中应该如何控制焦点以及如何实现复制粘贴行为。 在线编辑: https://windrunnermax.github.io/

流程图渲染方式:Canvas vs SVG

我们是袋鼠云数栈 UED 团队,致力于打造优秀的一站式数据中台产品。我们始终保持工匠精神,探索前端道路,为社区积累并传播经验价值。 本文作者:霁明 背景 我们产品中会有一些流程图应用,例如审批中心的审批流程图: 我们数栈产品内的流程图,基本都是使用的 mxGraph 实现的,mxGraph 使用了S

Canvas图形编辑器-数据结构与History(undo/redo)

Canvas图形编辑器-数据结构与History(undo/redo) 这是作为 社区老给我推Canvas,于是我也学习Canvas做了个简历编辑器 的后续内容,主要是介绍了对数据结构的设计以及History能力的实现。 在线编辑: https://windrunnermax.github.io/C

Canvas好难,如何让研发低成本实现Web端流程图设计功能

摘要:本文由葡萄城技术团队于博客园原创并首发。转载请注明出处:[葡萄城官网](https://www.grapecity.com.cn/),葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。 # 前言 相信大家在职场中经常会用到流程图,在互联网行业,绘制流程图不论在产品的设计阶段,还是后

Vue简单自定义Canvas验证码组件。

在您的Vue项目中,是否曾遇到过需要增加验证码来增强账户安全性的情况?这个Vue通用Canvas验证码组件!采用Canvas,实现了高度自定义和灵活的验证码生成方式,让您的网站或应用轻松应对各类验证码需求。

WPF/C#:如何实现拖拉元素

前言 在Canvas中放置了一些元素,需要能够拖拉这些元素,在WPF Samples中的DragDropObjects项目中告诉了我们如何实现这种效果。 效果如下所示: 拖拉过程中的效果如下所示: 具体实现 xaml页面 我们先来看看xaml: