html5 画布缩放_HTML5画布简介

html5 画布缩放

Canvas is one of the most powerful features of HTML5, but also (in my experience) one of the most easily misunderstood. Before embarking on a fresh series about what the HTML5 Canvas API can achieve, I thought it might be helpful to explain just what it is, and what it’s not.

Canvas是HTML5最强大的功能之一，但(以我的经验)也是最容易被误解的功能之一。 在开始有关HTML5 Canvas API可以实现的功能的新系列之前，我认为解释一下什么是什么，什么不是什么可能会有所帮助。

I’ve called canvas “the world’s fastest Etch-a-Sketch”. It is an arbitrary drawing space on a web page, defined by a <canvas> element. This space can be filled, very quickly, with pixel information, via JavaScript. The HTML5 element by itself does nothing, other than setting the stage:

我称画布为“世界上最快的蚀刻画”。 它是网页上的任意绘图空间 ，由<canvas>元素定义。 通过JavaScript可以非常快速地用像素信息填充该空间。 HTML5元素本身不做任何事情，除了设置阶段外：

<canvas id="sketch">
</canvas>

We can style this <canvas> space:

我们可以为这个<canvas>空间设置样式：

#sketch {
	width: 100%; min-height: 22%;
	border: 1px solid red;
}

But again, the result isn’t much:

但同样，结果并不多：

To draw on the canvas area, we must use JavaScript to identify the element, determine the “context” of our drawing, and draw using an appropriate method. Added to the end of the page, in a <script>, a very simple example:

要在画布区域上绘制，我们必须使用JavaScript来识别元素，确定绘制的“上下文”，然后使用适当的方法进行绘制。 在页面末尾的<script>中添加了一个非常简单的示例：

var etchasketch = document.getElementById("sketch"),
drawspace = etchasketch.getContext("2d");
drawspace.fillRect(0,0,150,100);

Which produces:

产生：

A few things to note:

注意事项：

• There is also a 3d context for drawing on the canvas, known as WebGL.
  在画布上还有一个用于绘制的3d上下文，称为WebGL。

• Like most other aspects of the box model, <canvas> coordinates are measured from the top left corner of the element, so the rectangle drawn in this example starts from that point.

  像的大多数其它方面盒模型 ， <canvas>坐标是从元件的左上角测量，所以在矩形从该点该例子开始绘制。

• Like SVG, the default fill color is assumed to be black.

  与SVG一样，默认填充颜色被假定为黑色。

• As <canvas> is an HTML5 element, it can be layered and positioned like any other.

  由于<canvas>是HTML5元素，因此可以像放置其他元素一样对其进行分层和定位 。

canvas和SVG有什么区别？ (What’s The Difference Between canvas And SVG?)

Canvas is sometimes confused with SVG, possibly because both technologies allow web developers to draw on pages. However, the two differ markedly:

有时将Canvas与SVG混淆，可能是因为这两种技术都允许Web开发人员在页面上绘图。 但是，两者明显不同：

• Canvas is resolution dependent: that is, canvas drawings are based upon pixels, not vector shapes.

  画布取决于分辨率 ：也就是说，画布绘图基于像素 ，而不是矢量形状。

• SVG is written as markup; canvas is created solely in JavaScript.

  SVG写为标记 ; canvas 仅使用JavaScript创建。

• Canvas animation might be compared to that “Etch-A-Sketch”: to draw a new animation frame, the <canvas> area is wiped clean and a new frame drawn in. SVG, on the other hand, moves DOM elements as individual addressable shapes to create animation.

  可以将Canvas动画与“ Etch-A-Sketch”进行比较：绘制一个新的动画帧，将<canvas>区域擦拭干净并绘制一个新帧。另一方面，SVG将DOM元素作为可单独寻址的对象进行移动。 形状来创建动画。

A good part of what makes canvas so powerful is the speed of modern JavaScript, which is able to draw pixels inside the <canvas> space very quickly, far faster than the human eye can follow. This makes canvas very useful for real-time applications like games, image manipulation, and interactive data visualization.

使得画布如此强大的一个重要方面是现代JavaScript的速度，它能够非常快地在<canvas>空间内绘制像素，远快于人眼可以看到的速度。 这使得画布对于实时应用程序(如游戏，图像处理和交互式数据可视化)非常有用。

分频器 (Crossovers)

You’ll find that the HTML5 Canvas API - the specification that controls how <canvas> and it’s associated JavaScript works - crosses over with other web technologies:

您会发现HTML5 Canvas API(控制<canvas>及其相关JavaScript的工作方式的规范)与其他Web技术交叉了：

• canvas implements gradients, transforms and blend modes, just as CSS does.
  画布可以实现渐变，变换和混合模式，就像CSS一样。
• like SVG, it has stroke and fill styles for its drawings, and can also create paths.
  像SVG一样，它具有工程图的描边和填充样式，还可以创建路径。

These similarities can get confusing; the important thing to remember is that canvas implements each of these in its own way, in the <canvas> context, using JavaScript, on a pixel-by-pixel basis.

这些相似之处可能会造成混淆。 要记住的重要一点是，canvas在<canvas>上下文中使用JavaScript以逐像素的方式以自己的方式实现这些功能。

浏览器支持 (Browser Support)

<canvas> has broad support in all browsers: IE9 and all modern browsers support the basic API.

<canvas>在所有浏览器中都有广泛的支持：IE9和所有现代浏览器都支持基本API。

辅助功能 (Accessibility)

As a method of drawing arbitrary pixels on the screen, canvas has some real challenges in accessibility. The basic approach is to provide a fallback description, in markup, in the element itself:

作为在屏幕上绘制任意像素的一种方法，画布在可访问性方面存在一些实际挑战。 基本方法是在元素本身的标记中提供后备描述：

<canvas id="sketch">
    <p>A black rectangle.</p>
</canvas>

This inner text won’t be rendered by any browser that supports <canvas>, but will be read by accessibility devices and software. Other browsers will render the <canvas> element as normal.

此内部文本不会由任何支持<canvas>浏览器呈现，但将由辅助功能设备和软件读取。 其他浏览器将正常渲染<canvas>元素。

There’s much more we can do with accessibility and <canvas>, especially when it comes to interaction - as well as with the Canvas API itself, of course - but that will be in future articles.

我们可以使用可访问性和<canvas>做更多的事情，尤其是在交互方面，当然还有Canvas API本身，但这将在以后的文章中介绍。

翻译自: https://thenewcode.com/19/Introduction-to-HTML5-canvas

html5 画布缩放