canvas是什么意思

一、canvas是什么意思

1、Canvas是HTML5的一个重要特性，它提供了一种通过JavaScript绘制图形和图像的方式，创建交互式图形和动画。Canvas是一个矩形区域，你可以在上面使用JavaScript绘制2D图形，如线条、形状、文字和图像。它为开发者提供了强大的工具来创建图形化内容，并与用户进行交互。

2、绘图区域：Canvas是一个矩形区域，可以在HTML页面中通过<canvas>元素来创建。你可以指定它的宽度和高度，然后在这个区域内绘制图形。

3、2D绘图上下文：要在 Canvas上绘制图形，你需要获取一个2D绘图上下文，这可以通过JavaScript的Canvas API来实现。上下文对象提供了绘制线条、填充颜色、绘制文字等功能。

4、图形绘制：你可以使用绘图上下文对象来绘制各种图形，如直线、矩形、圆形、文本和图片。这允许你创建各种图形效果和可视化内容。

5、动画：Canvas使得创建动画变得容易，你可以通过多次更新Canvas上的内容来实现动画效果。

6、交互性：你可以为Canvas上的图形添加事件处理程序，允许用户与图形交互，例如点击、拖动、缩放等。

7、Canvas通常用于创建图表、图形编辑器、游戏和各种可视化应用程序。它提供了对图形渲染的直接控制，使开发者能够创建高度自定义的用户界面和交互式内容。Canvas是Web开发中强大的工具之一，用于实现各种视觉效果和动态内容。

二、html5 javascript实现canvas里边多图层显示怎么弄

html5中的canvas本身的API是不存在图层概念的。要想实现实现多图层功能，必须要使用多个canvas对象，不过这些canvas对象，是在内存中的，而不是在html的元素树中。每个canvas维持一个图层就可以，然后主canvas是负责显示最后的合成的效果。

var layer1=document.createElement('canvas');

var layer1_canvas=layer1.getContext('2d');

var layer2=document.createElement('canvas');

var layer2_canvas=layer1.getContext('2d');

layer1_canvas.drawSomething();

layer2_canvas.drawSomething();

canvas.save()//用来显示的canvas

canvas.globalCompositeOperation="destination-over";//设置多个图层如何混合，这个可以百度canvas混合模式，这个和PS是相近的

canvas.drawImage(layer1,0,0,800,600,0,0,800,600)

canvas.drawImage(layer2,0,0,800,600,0,0,800,600)

这样就把两个图层绘制在一个图层中，单独改变任一个图层都不会改变其他图层。不明白可追问。

三、canvas简介以及常用性能优化

HTML5的 Canvas元素使用 JavaScript在网页上绘制图像。

画布是一个矩形区域，您可以控制其每一像素。

Canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

在 Canvas中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。

SVG基于 XML，这意味着 SVG DOM中的每个元素都是可用的。您可以为某个元素附加 JavaScript事件处理器。

在 SVG中，每个被绘制的图形均被视为对象。如果 SVG对象的属性发生变化，那么浏览器能够自动重现图形。

-能够以.png或.jpg格式保存结果图像

-最适合图像密集型的游戏，其中的许多对象会被频繁重绘

-最适合带有大型渲染区域的应用程序（比如谷歌地图）

-复杂度高会减慢渲染速度（任何过度使用 DOM的应用都不快）

当我们在绘制的一个元素（文字、图形）的时候，首先要对这个元素规定它的颜色，文字字体，然后在进行绘制，不然不会生效。

场景：假设您有一个游戏，其UI位于顶部，中间是游戏性动作，底部是静态背景。

方法：可以将游戏分成三个<canvas>层。 UI将仅在用户输入时发生变化，游戏层随每个新框架发生变化，并且背景通常保持不变

好处：避免了固定组件的重复渲染。

设备屏幕上的像素（逻辑像素），我们可以当做是正常的像素（css中设置的像素），你可以正常使用它。如果你画一个100px的东西，他也就是一个100px的东西。但是，在出现了一些高分辨率屏幕的手机之后，一个属性devicePixelRatio就一起出现了。它允许我们去查询设备像素比。在这里我们需要抛出一个名词逻辑像素，也就是在css设置的100px时，在iphone6/7/8(devicePixelRatio为3)上，实际渲染的是300px的物理像素。比例为3：1

但是这对于我们开发者的影响是什么呢？早些时候，我们注意到当我们向这种高分辨率的屏幕添加img的时候，我们的图形受到devicePixelRatio的影响变得非常模糊。

如何解决这个问题呢？如果我把img的宽和高分别与devicePixelRatio相乘，得到的大小画进屏幕中，在对齐进行缩放devicePixelRatio的大小。Img就会以一种高清的方式呈现。

但是此方法有个问题就是既然同比将画布和内容进行了放大，然后在进行缩放，那么绘制出来的图片大小就会相应的增大。建议根据需求来判断是否需要进行高清操作。

canvas动画的本质是不断地擦除和重绘，再结合一些时间控制的方法达到动画的目的

显示器刷新频率是60Hz，最平滑动画的最佳循环间隔是1000ms/60，约等于16.6ms

而 requestAnimationFrame就是根据显示器刷新频率来的，这是浏览器专门为动画提供的API，在运行时浏览器会自动优化方法的调用，节省系统资源，提高系统性能，如果页面不是激活状态下的话， requestAnimationFrame()会被暂停调用以提升性能和电池寿命。

执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，返回一个 requestID，该回调会在浏览器下一次重绘之前执行

取消一个先前通过调用window. cancelAnimationFrame()方法添加到计划中的动画帧请求，接受一个 requestID

canvas每条线都有一条无限细的中线，线由中线两个伸展。

解决问题的根源起点应该在0.5的地方，这也是为什么x,y需要+0.5。当x,y做过计算不一定是整数的时候可能+0.5又出现模糊的情况。所以做一个取整可以保证不会出现模糊的情况

由于我们具备「把图片中的某一部分绘制到 Canvas上」的能力。

在平常的html中，我们会把多个对象放在一张图片里面，以减少请求数量。这通常被称为「精灵图」。然而，这实际上存在着一些潜在的性能问题。使用 drawImage绘制同样大小的区域，数据源是一张和绘制区域尺寸相仿的图片的情形，和比起数据源是一张较大图片（我们只是把数据扣下来了而已）的情形，前者的开销要小一些。可以认为，两者相差的开销正是「裁剪」这一个操作的开销。

虽然看上去开销相差并不多，但是 drawImage是最常用的 API之一，我认为还是有必要进行优化的。优化的思路是，将「裁剪」这一步骤事先做好，保存起来，每一帧中仅绘制不裁剪。

我们可以先把待绘制的区域裁剪好，保存起来，这样每次绘制时就能轻松很多

drawImage方法的第一个参数不仅可以接收 Image对象，也可以接收另一个 Canvas对象。而且，使用 Canvas对象绘制的开销与使用 Image对象的开销几乎完全一致。我们只需要实现将对象绘制在一个未插入页面的 Canvas中，然后每一帧使用这个 Canvas来绘制。