关注我们

HTML5 中的 Styles and Colors函数

HTML5 canvas提供以下两个重要属性，可将颜色应用于形状-

No.	方法和描述
1	fillStyle 此属性表示要在形状内使用的颜色或样式。
2	strokeStyle 此属性表示用于形状周围线条的颜色或样式。

No.

方法和描述

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() {
            
            //使用 DOM 获取画布元素
            var canvas=document.getElementById('mycanvas');
            
            //连接数据库凭据
            if (canvas.getContext) {
               
               //确保不支持画布时不执行
               var ctx=canvas.getContext('2d');
               
               //创建图案
               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>

上面的示例将产生以下输出-

以下是一个简单的示例，该示例利用上述的fillStyle属性创建另一个不错的模式。

<!DOCTYPE HTML>

<html>
   <head>
      
      <style>
         #test {
            width: 100px;
            height:100px;
            margin: 0px auto;
         }
      </style>
      <script type="text/javascript">
         function drawShape() {
         
            //使用 DOM 获取画布元素
            var canvas=document.getElementById('mycanvas');
             
            //连接数据库凭据
            if (canvas.getContext) {
             
               //确保不支持画布时不执行
               var ctx=canvas.getContext('2d');
               
               //创建图案
               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>