HTML5 canvas提供以下两个重要属性,可将颜色应用于形状-
No. | 方法和描述 |
---|---|
1 |
fillStyle 此属性表示要在形状内使用的颜色或样式。 |
2 |
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>
上面的示例将产生以下输出-
StrokeStyle示例
以下是一个简单的示例,该示例利用上述的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>
上面的示例将产生以下输出-