平时上网画图，经常会用到fillStyle跟strokeStyle。今天咱就来讲讲这俩玩意怎么使，帮助大家上色变得更顺手。
认识fillStyle和strokeStyle
fillStyle = color strokeStyle = color
你得先明白这俩属性干啥用的。fillStyle就是给图里添色儿的；strokeStyle，就是画线框时边框的颜色。这俩默认都是黑乎乎的，你可以称之为纯黑#00000。
有意思？这两人不只会用纯色字符串，居然还能让图形发生渐变或变成图案！这可就高明多了，不仅仅是我们熟知的红橙黄绿青蓝紫，还有更多有趣的玩法。
颜色的多样性
// 这些 fillStyle 的值均为 '橙色' ctx.fillStyle = "orange"; ctx.fillStyle = "#FFA500"; ctx.fillStyle = "rgb(255,165,0)"; ctx.fillStyle = "rgba(255,165,0,1)"
讲到颜色，那可是千奇百怪应有尽有。你可以用CSS3的颜色值来搞定，比如大家熟悉的红蓝色调，再高级点就是带透明度的RGBA了。这样，每张图都可以有自己的色彩了，再也不会是单调的黑白灰！
再说了，如果你特想让每一个格子都有各自的颜色，那就别忘了调整fillStyle或者strokeStyle！这样，每个小格子就能亮晶晶地闪烁，不会再是那个被忽视的小小黑块咯。
渐变与图案的应用
说到渐变和图案，你可能会觉得很专业，但其实这只是让你的图片更漂亮的手法而已。你只需要调整颜色通道的数值，就能丰富色彩了！想像一下，一个五颜六色的调色盘，是不是感觉自己瞬间变成了艺术家？
而且，渐变不光能填色用，还能划边。这么说，你的图形也能玩儿渐变，从一个颜色慢慢变到另一个颜色，看着就更有活力！
透明度的魔法
说到透明度，大家可能觉得有些摸不着头脑。在Canvas里，通过一个叫做全球阿尔法的属性，咱们就可以自由调节图片的透明程度！从全透明到全不透明，随心所欲~这样的话，我们就可以画出一些半透明的图形，让背后的背景若隐若现，是不是超炫酷的呀？
不只是能画线图，还能用它调整个画布的透明度。这么一来，你就能把画布分成好几层，每层都有各自的透明度，让整个画面更真实、更深沉。
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
for (var i=0;i<6;i++){
for (var j=0;j<6;j++){
ctx.fillStyle = 'rgb(' + Math.floor(255-42.5*i) + ',' +
Math.floor(255-42.5*j) + ',0)';
ctx.fillRect(j*25,i*25,25,25);
}
}
}
实战演练：绘制多彩图形
咱们来聊点儿实际操作！我们利用两个嵌套的for循环画个方形排列，每个方块还能自定义颜色。看完之后，画面色彩斑斓，每个小方块都在炫耀着自己的个性。
还有，你能用arc方法涂几个五颜六色的大圆圈。这样你就能画出一张超级有活力、动态感十足的图画，每一个圆圈都在告诉你它们各自的漂亮和特色。
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
for (var i=0;i<6;i++){
for (var j=0;j<6;j++){
ctx.strokeStyle = 'rgb(0,' + Math.floor(255-42.5*i) + ',' +
Math.floor(255-42.5*j) + ')';
ctx.beginPath();
ctx.arc(12.5+j*25,12.5+i*25,10,0,Math.PI*2,true);
ctx.stroke();
}
}
}
小技巧：如何高效使用颜色
，颜色的运用也得讲究点儿技巧！像设置颜色和透明度的话，试试rgba()方法，这样就能随心所欲地搞定图形的颜色和透明度。另外，如果你要画好多一样透明度的图形，那就别忘了globalAlpha这个属性，真的特别给力。
记住！画图前记得先重设下fillStyle和strokeStyle，这样每幅图才能拥有独特的色彩，而不是枯燥无味的黑色小方块。
globalAlpha = transparency value
颜色的创意应用
说白了，颜色不只是用来填色或画边框那么简单！我们还能用它整出很多特效，比如改变颜色通道的数值就能调出特别的颜色板子。更厉害的是，颜色还能传达感情，比如暖暖的红色就代表爱情，冷冰冰的蓝色则象征宁静。
颜色，绝对是个超牛的创意工具！只要你肯花时间琢磨琢磨，就能发挥出无限种可能！
总结与展望
// Assigning transparent colors to stroke and fill style ctx.strokeStyle = "rgba(255,0,0,0.5)"; ctx.fillStyle = "rgba(255,0,0,0.5)";
今儿咱们就来唠唠给图形涂色那点事，学了fillStyle和strokeStyle这俩牛逼属性，也了解了彩儿颜色有千百种选择、还有渐变色和图案啥的；透明度这东西也挺神奇的，最后讲了下实践操作经验和一些小窍门。希望这些能帮你把图画得更漂亮。
最后，我问你们，你们用颜色时有啥心得或者新奇用法？快来评论说说看！这样咱们就可以互相学习~记得给我点个赞、转发给朋友们，让他们也感受到色彩的魅力！
评论0