suchen

Heim  >  Artikel  >  Web-Frontend  >  Canvas-Grundlagen

Canvas-Grundlagen

高洛峰
高洛峰Original
2016-11-03 16:58:411123Durchsuche

1.元素

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

替换内容

元素不同于在其中的Canvas-Grundlagen标签，就像

<canvas id="stockGraph" width="150"    style="max-width:90%">
  current stock price: $3.15 +0.15
</canvas>

<canvas id="clock" width="150" height="150">
  <img src="images/clock.png" width="150"    style="max-width:90%" alt=""/>
</canvas>

 标签不可省

2.渲染上下文（The rendering context）

WebGL 使用了基于OpenGL ES的3D上下文 ("experimental-webgl") 

我们将会将注意力放在2D渲染上下文中

canvas起初是空白的。为了展示，首先脚本需要找到渲染上下文，然后在它的上面绘制。 元素有一个做 getContext() 的方法，这个方法是用来获得渲染上下文和它的绘画功能。getContext()只有一个参数，上下文的格式。对于2D图像而言，如本教程，你可以使用 CanvasRenderingContext2D。

var canvas = document.getElementById(&#39;tutorial&#39;);
var ctx = canvas.getContext(&#39;2d&#39;);

3.检查支持性

var canvas = document.getElementById(&#39;tutorial&#39;);

if (canvas.getContext){
  var ctx = canvas.getContext(&#39;2d&#39;);
  // drawing code here
} else {
  // canvas-unsupported code here
}

4.一个模板骨架


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

5.一个简单例子

<html>
 <head>
  <script type="application/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>


Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：HTML-TabellenelementNächster Artikel：HTML-Tabellenelement

In Verbindung stehende Artikel

Mehr sehen