HTML5 Canvas简述

日期:2021-02-26 类型:科技新闻 

关键词:h5平台,手机端网页,手机端网页模板,免费的h5场景制作平台,h5制作工具

<canvas>是1个新的HTML元素,这个元素能够被Script語言(一般是JavaScript)用来绘图图型。比如能够用它来画图、生成图像、或做简易的(和不那末简易的)动漫。右面的图像展现了1些<canvas>的运用示例,大家可能在此实例教程中看到她们的完成。

<canvas>最开始在iPhone企业(Apple)的Mac OS X Dashboard上被引进,然后被运用于Safari。根据Gecko1.8的访问器,比如Firefox 1.5,也适用这个新元素。元素<canvas>是WhatWG Web applications 1.0也便是大伙儿都了解的HTML 5规范标准的1一部分。

在本实例教程中,我将试着讲述怎样在你自身的网页页面中应用<canvas>元素。出示的示例应当会给你些清楚定义,即用<canvas>能做些甚么的。这些示例也可做为你运用<canvas>的起始点。

刚开始应用以前
用元素<canvas>其实不难,要是你具备HTML和 JavaScript的基本专业知识。

如上所述,其实不是全部当代访问器都适用<canvas>元素,因此你必须 Firefox 1.5或升级版本号、或别的根据Gecko的访问器比如Opera 9、或近期版本号的Safari才可以看到全部示例的姿势。

<canvas>元素

Let's start this tutorial by looking at the <canvas> element itself.
让大家从<canvas>元素的界定刚开始吧。

<canvas id="tutorial" width="150" height="150"></canvas>

This looks a lot like the <img> element, the only difference is that it doesn't have the src and alt attributes. <canvas>看起来很像<img>,唯1不一样便是它不含 srcalt 特性。The <canvas> element has only two attributes - width and height. These are both optional and can also be set using DOM properties or CSS rules.它仅有两个特性,widthheight,两个全是可选的,而且都可以以 DOM 或 CSS 来设定。 When no width and height attributes are specified, the canvas will initially be 300 pixels wide and 150 pixels high.假如不特定width 和 height,默认设置的是宽300像素高150像素。The element can be sized arbitrarily by CSS, but during rendering the image is scaled to fit its layout size.   (If your  renderings seem distorted, try specifying your width and height attributes explicitly in the <canvas> attributes, and not with CSS.)尽管能够根据 CSS 来调剂canvas的尺寸,但3D渲染图象会放缩来融入合理布局的(假如你发现3D渲染結果看上去形变了,无须1味依靠CSS,能够尝试显式特定canvas的width 和 height 特性值)。

The id attribute isn't specific to the <canvas> element but is one of default HTML attributes which can be applied to (almost) every HTML element (like class for instance). It's always a good idea to supply an id because this makes it much easier to identify it in our script.
id  特性并不是<canvas>专享的,就像规范的HTLM标识1样,任何1个HTML元素都可以以特定其 id 值。1般,为元素特定 id 是个非常好的主张,这样使得在脚本制作中运用更为便捷。

The <canvas> element can be styled just like any normal image (margin, border, background, etc). These rules however don't affect the actual drawing on the canvas. We'll see how this is done later in this tutorial. When no styling rules are applied to the canvas it will initially be fully transparent. <canvas>元素能够像一般照片1样特定其款式(边距,边框,情况这些)。但是这些款式其实不会对canvas具体转化成的图象造成甚么危害。下面大家会看到怎样运用款式。假如不特定款式,canvas默认设置是透明的。

替用內容

Because the <canvas> element is still relatively new and isn't implemented in some browsers (such as Firefox 1.0 and Internet Explorer), we need a means of providing fallback content when a browser doesn't support the element.

由于 <canvas> 相对性较新,一些访问器并没完成,如Firefox 1.0 和 Internet Explorer,因此大家必须为那些不适用canvas的访问器出示替用显示信息內容。

Luckily this is very straightforward: we just provide alternative content inside the canvas element. Browsers who don't support it will ignore the element completely and render the fallback content, others will just render the canvas normally.
For instance we could provide a text description of the canvas content or provide a static image of the dynamically rendered content. This can look something like this:

大家只必须立即在canvas元素内插进替用內容便可。不适用canvas的访问器会忽视canvas元素而立即3D渲染替用內容,而适用的访问器则会一切正常地3D渲染canvas。比如,大家能够把1些文本或照片填入canvas内,做为替用內容:

<canvas id="stockGraph" width="150" height="150">
  current stock price: $3.15 +0.15
</canvas>

<canvas id="clock" width="150" height="150">
  <img src="images/clock.png" width="150" height="150"/>
</canvas>

完毕标识 </canvas> 是务必的

In the Apple Safari implementation, <canvas> is an element implemented in much the same way <img> is; it does not have an end tag. However, for <canvas> to have widespread use on the web, some facility for fallback content must be provided. Therefore, Mozilla's implementation requires an end tag (</canvas>).

在Apple Safari里,<canvas>的完成跟<img>很类似,它其实不沒有完毕标识。但是,以便使 <canvas> 能在web的全球里普遍可用,必须给替用內容出示1个容身之所,因而,在Mozilla的完成里完毕标识(</canvas>)是务必的。

If fallback content is not needed, a simple <canvas id="foo" ...></canvas> will be fully compatible with both Safari and Mozilla -- Safari will simply ignore the end tag.

假如沒有替用內容,<canvas id="foo" ...></canvas> 对 Safari 和 Mozilla 是彻底适配的—— Safari 会简易地忽视完毕标识。

If fallback content is desired, some CSS tricks must be employed to mask the fallback content from Safari (which should render just the canvas), and also to mask the CSS tricks themselves from IE (which should render the fallback content).

假如有替用內容,那末能够用1些 CSS 技能来为而且仅为 Safari 掩藏替用內容,由于那些替用內容是必须在 IE 里显示信息但不必须在 Safari 里显示信息。

3D渲染左右文(Rendering Context)

<canvas> creates a fixed size drawing surface that exposes one or more rendering contexts, which are used to create and manipulate the content shown. We'll focus on the 2D rendering context, which is the only currently defined rendering context. In the future, other contexts may provide different types of rendering; for example, it is likely that a 三d context based on OpenGL ES will be added.

<canvas> 建立的固定不动规格的制图画面对外开放了1个或好几个3D渲染左右文(rendering context),大家能够根据它们来操纵要显示信息的內容。大家潜心于2D 3D渲染上,这也是现阶段唯1的挑选,将会在未来会加上根据OpenGL ES 的 三d 左右文。

The <canvas> is initially blank, and to display something a script first needs to access the rendering context and draw on it. The canvas element has a DOM method called getContext, used to obtain the rendering context and its drawing functions. getContext() takes one parameter, the type of context.

<canvas> 原始化是空白的,要在上面用脚本制作画图最先必须其3D渲染左右文(rendering context),它能够根据 canvas 元素目标的 getContext 方式来获得,另外获得的也有1些画图用的涵数。getContext() 接纳1个用于叙述其种类的值做为主要参数。

var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');

In the first line we retrieve the canvas DOM node using the getElementById method. We can then access the drawing context using the getContext method.

上面第1行根据 getElementById 方式获得 canvas 目标的 DOM 连接点。随后根据其 getContext 方式获得其画图实际操作左右文。

查验访问器的适用

The fallback content is displayed in browsers which do not support <canvas>; scripts can also check for support when they execute. This can easily be done by testing for the getContext method. Our code snippet from above becomes something like this:

除在那些不适用  的访问器上显示信息替用內容,还能够根据脚本制作的方法来查验访问器是不是适用 canvas 。方式很简易,分辨 getContext 是不是存之际可。

var canvas = document.getElementById('tutorial');
if (canvas.getContext){
  var ctx = canvas.getContext('2d');
  // drawing code here
} else {
  // canvas-unsupported code here
}

编码模版

Here is a minimalistic template, which we'll be using as a starting point for later examples. You can download this file to work with on your system.

大家会用下面这个最简化的编码模版来(后续的示例必须用到)做为刚开始,你能够 免费下载文档 到当地备用。

<html>
  <head>
    <title>Canvas tutorial</title>
    <script type="text/javascript">
      function draw(){
        var canvas = document.getElementById('tutorial');
        if (canvas.getContext){
          var ctx = canvas.getContext('2d');
        }
      }
    </script>
    <style type="text/css">
      canvas { border: 1px solid black; }
    </style>
  </head>
  <body onload="draw();">
    <canvas id="tutorial" width="150" height="150"></canvas>
  </body>
</html>

If you look at the script you'll see I've made a function called draw, which will get executed once the page finishes loading (via the onload attribute on the body tag). This function could also have been called from a setTimeout, setInterval, or any other event handler function just as long the page has been loaded first.

仔细的你会发现我提前准备了1个名为 draw 的涵数,它会在网页页面装载结束以后实行1次(根据设定 body 标识的 onload 特性),它自然还可以在 setTimeout,setInterval,或别的恶性事件解决涵数中被启用。

1个简易的事例

To start off, here's a simple example that draws two intersecting rectangles, one of which has alpha transparency. We'll explore how this works in more detail in later examples.

做为刚开始,来1个简易的吧——绘图两个交叠的矩形框,在其中1个是有alpha全透明实际效果。大家会在后边的示例中详尽的让你掌握它是怎样运行的。

<html>
 <head>
  <script type="application/x-javascript">
    function draw() {
      var canvas = document.getElementById("canvas");
      if (canvas.getContext) {
        var ctx = canvas.getContext("2d");

        ctx.fillStyle = "rgb(200,0,0)";
        ctx.fillRect (10, 10, 55, 50);

        ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
        ctx.fillRect (30, 30, 55, 50);
      }
    }
  </script>
 </head>
 <body onload="draw();">
   <canvas id="canvas" width="150" height="150"></canvas>
 </body>
</html>