HTML canvas

什么是Canvas

HTML<canvas>元素用于通过JavaScript动态绘制图形。所述<canvas>元素是仅用于图形的容器。您必须使用JavaScript来实际绘制图形。 Canvas有几种绘制路径，方框，圆形，文本和添加图像的方法。

可以通过我们的JavaScript教程来学习更多知识。

Canvas浏览器支持：

Internet Explorer	Chrome	FireFox	Safari	Opera

9.0（包含）以上支持	4.0（包含）以上支持	2.0（包含）以上支持	3.0（包含）以上支持	9.0（包含）以上支持

Canvas示例

画布是HTML页面上的矩形区域。默认情况下，画布没有边框，也没有内容。标记看起来像这样：

<canvas id="myCanvas" width="200" height="100"></canvas>

注意：始终指定id属性（在脚本中引用）和width和height属性以定义画布的大小。要添加边框，请使用style属性。

下面是一个基本的画布示例：

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #00FF00;">
       </canvas>

尝试一下

下面是画一条直线的示例：

<!DOCTYPE html>
         <html>
         <body>

         <canvas id="myCanvas" width="200" height="100" style="border:1px solid #00FF00;">
         <!-- 浏览器不支持canvas会显示这句话 -->
         您的浏览器不支持HTML5 canvas 标记。</canvas>

         <script>
           var c = document.getElementById("myCanvas");
           var ctx = c.getContext("2d");
           ctx.moveTo(0,0);
           ctx.lineTo(200,100);
           ctx.stroke();
         </script>

         </body>
         </html>

尝试一下

下面是画一条圆的示例：

<!DOCTYPE html>
         <html>
         <body>

         <canvas id="myCanvas" width="200" height="100" style="border:1px solid #00FF00;">
         <!-- 浏览器不支持canvas会显示这句话 -->
         您的浏览器不支持HTML5 canvas 标记。</canvas>

         <script>
           var c = document.getElementById("myCanvas");
           var ctx = c.getContext("2d");
           ctx.beginPath();
           ctx.arc(95, 50, 40, 0, 2 * Math.PI);
           ctx.stroke();
         </script>

         </body>
         </html>

尝试一下

下面是画文字的示例：

<!DOCTYPE html>
         <html>
         <body>

         <canvas id="myCanvas" width="200" height="100" style="border:1px solid #00FF00;">
         <!-- 浏览器不支持canvas会显示这句话 -->
         您的浏览器不支持HTML5 canvas 标记。</canvas>

         <script>
           var c = document.getElementById("myCanvas");
           var ctx = c.getContext("2d");
           ctx.font = "30px Arial";
           ctx.fillText("Hello World", 10, 50);
         </script>

         </body>
         </html>

尝试一下

下面是画描边文字的示例：

<!DOCTYPE html>
         <html>
         <body>

         <canvas id="myCanvas" width="200" height="100" style="border:1px solid #00FF00;">
         <!-- 浏览器不支持canvas会显示这句话 -->
         您的浏览器不支持HTML5 canvas 标记。</canvas>

         <script>
           var c = document.getElementById("myCanvas");
           var ctx = c.getContext("2d");
           ctx.font = "30px Arial";
           ctx.strokeText("Hello World", 10, 50);
         </script>

         </body>
         </html>

尝试一下

下面是画线性渐变的示例：

<!DOCTYPE html>
         <html>
         <body>

         <canvas id="myCanvas" width="200" height="100" style="border:1px solid #00FF00;">
         <!-- 浏览器不支持canvas会显示这句话 -->
         您的浏览器不支持HTML5 canvas 标记。</canvas>

         <script>
           var c = document.getElementById("myCanvas");
           var ctx = c.getContext("2d");

           // Create gradient
           var grd = ctx.createLinearGradient(0, 0, 200, 0);
           grd.addColorStop(0, "#FF5722");
           grd.addColorStop(1, "white");

           // Fill with gradient
           ctx.fillStyle = grd;
           ctx.fillRect(10, 10, 150, 80);
         </script>

         </body>
         </html>

尝试一下

下面是画圆形渐变的示例：

<!DOCTYPE html>
         <html>
         <body>

         <canvas id="myCanvas" width="200" height="100" style="border:1px solid #00FF00;">
         <!-- 浏览器不支持canvas会显示这句话 -->
         您的浏览器不支持HTML5 canvas 标记。</canvas>

         <script>
           var c = document.getElementById("myCanvas");
           var ctx = c.getContext("2d");

           // Create gradient
           var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
           grd.addColorStop(0, "#FF5722");
           grd.addColorStop(1, "white");

           // Fill with gradient
           ctx.fillStyle = grd;
           ctx.fillRect(10, 10, 150, 80);
         </script>

         </body>
         </html>

尝试一下

下面是画图像的示例：

<!DOCTYPE html>
       <html>
       <body>

       <p>用这张图:</p>
       <img id="scream" src="/images/f1.jpg" alt="风景1" width="220" height="277">

       <p>画到画布里面:</p>
       <canvas id="myCanvas" width="250" height="300" style="border:1px solid #00FF00;">
       您的浏览器不支持canvas将显示这段文字。
       </canvas>

       <p><button onclick="myCanvas()">尝试一下</button></p>

       <script>
       function myCanvas() {
           var c = document.getElementById("myCanvas");
           var ctx = c.getContext("2d");
           var img = document.getElementById("scream");
           ctx.drawImage(img,10,10);
       }
       </script>

       </body>
       </html>

尝试一下