下一节:

  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属性(在脚本中引用)和widthheight属性以定义画布的大小。要添加边框,请使用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>
    
    
下一节: