详细说明HTML5画布颜色和透明度的方法的细节
指定的颜色黑色是画布渲染的默认颜色。如果要更改颜色，则必须在实际绘制之前指定颜色。
Javaｓｃｒｉｐｔ代码将内容复制到剪贴板。
ctx.strokestyle =颜色
指定绘图行的颜色：
Javaｓｃｒｉｐｔ代码将内容复制到剪贴板。
ctx.fillstyle =颜色
指定填充颜色：
看看实际例子：
Javaｓｃｒｉｐｔ
Javaｓｃｒｉｐｔ代码将内容复制到剪贴板。
指针函数（）{
拉（）；
}；
函数绘图（）{
VaR的画布document.getelementbyid（'c1）；
如果（帆布| |！！帆布。getContext）{ return false；}
VaR CTX = canvas.getcontext（二维的）；
Ctx.beginPath（）；
ctx.fillstyle = 'rgb（192, 80, 77）； / /红色
Ctx.arc（70, 45, 35，0，数学，PI * 2，假）；
Ctx.fill（）；
Ctx.beginPath（）；
ctx.fillstyle = 'rgb（155, 187, 89）； / /绿色
Ctx.arc（45, 95, 35，0，数学，PI * 2，假）；
Ctx.fill（）；
Ctx.beginPath（）；
ctx.fillstyle = 'rgb（128, 100, 162）； / /紫色
Ctx.arc（95, 95, 35，0，数学，PI * 2，假）；
Ctx.fill（）；
}
效果如下：
指定透明度
在普通的CSS，我们还可以带上一个α值时，我们指定一个颜色（但不多，不支持IE9）。看代码：
Javaｓｃｒｉｐｔ
Javaｓｃｒｉｐｔ代码将内容复制到剪贴板。
指针函数（）{
拉（）；
}；
函数绘图（）{
VaR的画布document.getelementbyid（'c1）；
如果（帆布| |！！帆布。getContext）{ return false；}
VaR CTX = canvas.getcontext（二维的）；
Ctx.beginPath（）；
ctx.fillstyle = 'rgba（192, 80, 77，0.7）； / /
Ctx.arc（70, 45, 35，0，数学，PI * 2，假）；
Ctx.fill（）；
Ctx.beginPath（）；
ctx.fillstyle = 'rgba（155, 187, 89，0.7）； / /
Ctx.arc（45, 95, 35，0，数学，PI * 2，假）；
Ctx.fill（）；
Ctx.beginPath（）；
ctx.fillstyle = 'rgba（128, 100, 162，0.7）； / /
Ctx.arc（95, 95, 35，0，数学，PI * 2，假）；
Ctx.fill（）；
}
结果如下：
以上代码基本不变。这是把RGB（R，G，B）为RGBA（R，G，B，A）。A的值也是0～1, 0是完全透明的，而1是完全不透明的（所以A的值实际上是不透明）。
全球透明globalAlpha
这也是一个非常简单的属性的默认值为1，表示完全不透明，以及一系列的0（完全透明）~ 1.0.this属性设置为阴影一样，如果你不想设置全局透明度，你必须在下一个渲染设置globalAlpha。
总结：什么是基于状态的属性
mdash；mdash；globalAlpha
mdash；mdash；globalcompositeopeartion
mdash；mdash；strokeStyle
mdash；mdash；TextAlign，textbaseline
mdash；mdash；线帽，线连接，线宽，miterlimit
mdash；mdash；填充颜色
mdash；mdash；字体
mdash；mdash；shadowblur，shadowcolor，shadowoffsetx，shadowoffsety
让我们通过一个代码的经验~ globalAlpha魔术
Javaｓｃｒｉｐｔ代码将内容复制到剪贴板。
全球透明度
体{背景：URL（， /图像/ BG3 .jpg）重复；}
#帆布{ border: 1px solid # aaaaaa；显示：块；保证金：50px汽车；}
你的浏览器不支持画布让我们换一个！
在window.onload =函数（）{
VaR的画布document.getelementbyid（画布）；
canvas.width = 800；
canvas.height = 600；
VaR上下文= canvas.getcontext（2D）；
context.fillstyle =# FFF；
（00800600）context.fillrect；
context.globalalpha = 0.5；
对于（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 +
Context.beginPath（）；
context.arc（Math.random（）*（）* canvas.height canvas.width，Math.random，Math.random（）* 100, 0，math.pi×2）；
Context.fill（）；
}
}；
运行结果：
不是很酷吗最后，有点艺术家。