HTML5 Canvas - 样式和颜色

HTML5 canvas 提供以下两个重要的属性来将颜色应用于形状：

序号	方法和描述
1	fillStyle 此属性表示用于形状内部的颜色或样式。
2	strokeStyle 此属性表示用于形状周围线条的颜色或样式。

序号

方法和描述

fillStyle

此属性表示用于形状内部的颜色或样式。

strokeStyle

此属性表示用于形状周围线条的颜色或样式。

默认情况下，笔触和填充颜色设置为黑色，即 CSS 颜色值 #000000。

fillStyle 示例

以下是一个简单的示例，它使用上面提到的 fillStyle 属性来创建一个不错的图案。

在线演示

<!DOCTYPE HTML>

<html>
   <head>
      
      <style>
         #test {
            width: 100px;
            height:100px;
            margin: 0px auto;
         }
      </style>
      
      <script type = "text/javascript">
         function drawShape() {
            
            // get the canvas element using the DOM
            var canvas = document.getElementById('mycanvas');
            
            // Make sure we don't execute when canvas isn't supported
            if (canvas.getContext) {
               
               // use getContext to use the canvas for drawing
               var ctx = canvas.getContext('2d');
               
               // Create a pattern
               for (var i = 0;i<7;i++) {
                  
                  for (var j = 0;j<7;j++) {   
                     ctx.fillStyle = 'rgb(' + Math.floor(255-20.5*i)+ ','+ 
                     Math.floor(255 - 42.5*j) + ',255)';
                     ctx.fillRect( j*25, i* 25, 55, 55 );
                  }
               }
            } else {
               alert('You need Safari or Firefox 1.5+ to see this demo.');
            }
         }
      </script>
   </head>
   
   <body id = "test" onload = "drawShape();">
      <canvas id = "mycanvas"></canvas>
   </body>

</html>

以上示例将产生以下结果：

strokeStyle 示例

以下是一个简单的示例，它使用上面提到的 fillStyle 属性来创建另一个不错的图案。

在线演示

<!DOCTYPE HTML>

<html>
   <head>
      
      <style>
         #test {
            width: 100px;
            height:100px;
            margin: 0px auto;
         }
      </style>
      <script type = "text/javascript">
         function drawShape() {
         
            // get the canvas element using the DOM
            var canvas = document.getElementById('mycanvas');
             
            // Make sure we don't execute when canvas isn't supported
            if (canvas.getContext) {
             
               // use getContext to use the canvas for drawing
               var ctx = canvas.getContext('2d');
               
               // Create a pattern
               for (var i = 0;i<10;i++) {
               
                  for (var j = 0;j<10;j++) {
                     ctx.strokeStyle = 'rgb(255,'+ Math.floor(50-2.5*i)+','+ 
                     Math.floor(155 - 22.5 * j ) + ')';
                     ctx.beginPath();
                     ctx.arc(1.5+j*25, 1.5 + i*25,10,10,Math.PI*5.5, true);
                     ctx.stroke();
                  }
               }
            } else {
               alert('You need Safari or Firefox 1.5+ to see this demo.');
            }
         }
      </script>
   </head>
   
   <body id = "test" onload = "drawShape();">
      <canvas id = "mycanvas"></canvas>
   </body>
   
</html>

以上示例将产生以下结果：

html5_canvas.htm

打印页面