默认黑色与指定颜色
在用HTML5Canvas作画时，黑色就是起点的颜色。想要换个色？别急，咱们来聊聊怎么设定你喜欢的冷暖色调，还有填充和线条的颜色调整技巧。
ctx.strokeStyle = color
指定绘制线条的颜色
给线条涂色就靠这个`strokeStyle`！就是说把原有的线换成你想要的颜色。比如，这样就能搞定：`context.strokeStyle =’color’`接着，想要变为红色？就输入’red’！
ctx.fillStyle = color
指定填充的颜色
涂色，用`fillStyle`就行！把想要的颜色设进去,比如，`context.fillStyle =’blue’`,刷刷，就是蓝色咯。
实际例子演示
onload = function() {
draw();
};
function draw() {
var canvas = document.getElementById('c1');
if ( ! canvas || ! canvas.getContext ) { return false; }
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.fillStyle = 'rgb(192, 80, 77)'; // 红
ctx.arc(70, 45, 35, 0, Math.PI*2, false);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = 'rgb(155, 187, 89)'; // 绿
ctx.arc(45, 95, 35, 0, Math.PI*2, false);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = 'rgb(128, 100, 162)'; // 紫
ctx.arc(95, 95, 35, 0, Math.PI*2, false);
ctx.fill();
}
马上来试试看，在Canvas画布上画出一个红边蓝底的长方形！照着这么操作就对了：
javascript看您要找的是咱们这份HTML文档里那个名叫'myCanvas'的画布。 我们把画布背景色设成黑的，就要用到那个叫context的函数。Canvas里有个叫'2d'的东西，可以用来做画画的事情，所以咱们得在代码里写上这么一句： 画布操作就是这么简单，只需要找到“2d”这哥们即可。 context.strokeStyle ='red';
onload = function() { draw(); }; function draw() { var canvas = document.getElementById('c1'); if ( ! canvas || ! canvas.getContext ) { return false; } var ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.fillStyle = 'rgba(192, 80, 77, 0.7)'; // ctx.arc(70, 45, 35, 0, Math.PI*2, false); ctx.fill(); ctx.beginPath(); ctx.fillStyle = 'rgba(155, 187, 89, 0.7)'; // ctx.arc(45, 95, 35, 0, Math.PI*2, false); ctx.fill(); ctx.beginPath(); ctx.fillStyle = 'rgba(128, 100, 162, 0.7)'; // ctx.arc(95, 95, 35, 0, Math.PI*2, false); ctx.fill(); }context.fillStyle ='blue';
就在白纸上画个长方形，起点是（20, 20），长100，宽就是50
context.stroke();
context.fill();指定透明度
除了固定颜色，还能调节透明度，跟用CSS一样，可以通过alpha值控制颜色的透明效果，0代表完全透明，到1就全黑了。具体来说，像JavaScript这样的编程语言中，就可以用rgba（r，g，b，a）这个公式表示出有透明度的颜色。
全局透明度globalAlpha
给你科普一事儿Canvas里还有个叫globalAlpha的东东，它能调节我们画的东西的透明程度。但是，别看它默认是黑色，却是1.0！也就是说，咱们的数值可以在0.0到1.0之间自由变化，从全白变成全黑都是没问题的。如果想让画面中的不同东西呈现出不一样的透明效果，那就要在每次画图之前重新设定这个globalAlpha属性才行哟~
基于状态的属性总结
不只有globalAlpha，Canvas还有好多其他的属性可以帮你搞定画出来的图案！比如上面提到的globalCompositeOperation啦、strokeStyle啦、textAlign啦、textBaseline啦、lineCap啦、lineJoin啦、lineWidth啦、miterLimit啦、fillStyle啦、font啦、shadowBlur啊、shadowColor啊、shadowOffsetX和shadowOffsetY之类的。
体验globalAlpha属性
咱们动手试试，就拿Canvas画个半透明长条试试看咋样。
context.globalAlpha =0.5;
context.fillStyle =’green’;
在坐标（50，50）的地方画个长宽都是100像素的矩形
这段代码画了个有透明度的长方形~
总结与展望
告诉你如何使用HTML5 Canvas来变魔术，将黑色换成你想要的颜色，再或是调低点儿透明度，还有就是全局alpha属性让你控制canvas里的东西变半透明。掌握了这些小妙招，网站就更好看，用户体验也能大大提升
不久后的未来，随着网络技术飞速发展，各种浏览器也变得越来越强大。这时，Canvas这个强大的绘画小能手将会在各种网站中发光发热，为我们呈现出更美丽、更有趣、更具艺术气息的视觉体验！
全局透明 body { background: url("./images/bg3.jpg") repeat; } #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }你的浏览器居然不支持Canvas？！赶快换一个吧！！
window.onload = function(){ var canvas = document.getElementById("canvas"); canvas.width = 800; canvas.height = 600; var context = canvas.getContext("2d"); context.fillStyle = "#FFF"; context.fillRect(0,0,800,600); context.globalAlpha = 0.5; for(var i=0; i<=50; i++){ var R = Math.floor(Math.random() * 255); var G = Math.floor(Math.random() * 255); var B = Math.floor(Math.random() * 255); context.fillStyle = "rgb(" + R + "," + G + "," + B + ")"; context.beginPath(); context.arc(Math.random() * canvas.width, Math.random() * canvas.height, Math.random() * 100, 0, Math.PI * 2); context.fill(); } };。
评论0