canvas图片透明度,
指定颜色
黑色是帆布绘制的默认色彩，要想换一种颜色的话，就得在实际画之前指定颜色。
Java Script语言代码复制内容到剪贴板ctx.strokeStyle=color指定绘制线的颜色：
Java Script语言代码复制内容到剪贴板ctx.fillStyle=color指定填充的颜色：
来看看实际的例子：
Java脚本语言
Java Script语言代码复制内容到剪贴板onload=function(){ draw()；};函数draw(){ var canvas=document。getelementbyid( C1 )；如果(!画布!画布。获取上下文){返回false} var CTX=画布。获取上下文(“2d”)；CTX。begin path()；ctx.fillStyle=rgb(192，80，77)；//红ctx.arc(70，45，35，0，数学* 2，假);CTX。fill()；CTX。begin path()；ctx.fillStyle=rgb(155，187，89)；//绿ctx.arc(45，95，35，0，数学* 2，假);CTX。fill()；CTX。begin path()；ctx.fillStyle=rgb(128，100，162)；//紫ctx.arc(95，95，35，0，数学* 2，假);CTX。fill()；}效果如下图：
指定透明度
和普通的半铸钢钢性铸铁(铸造半钢)中一样，我们指定颜色的时候还可以带一个希腊字母的第一个字母值（不过用的不多，IE9之前都不支持)。看代码：
Java脚本语言
Java Script语言代码复制内容到剪贴板onload=function(){ draw()；};函数draw(){ var canvas=document。getelementbyid( C1 )；如果(!画布!画布。获取上下文){返回false} var CTX=画布。获取上下文(“2d”)；CTX。begin path()；ctx.fillStyle=rgba(192，80，77，0.7)；//ctx.arc(70，45，35，0，数学* 2，假);CTX。fill()；CTX。begin path()；ctx.fillStyle=rgba(155，187，89，0.7)；//ctx.arc(45，95，35，0，数学* 2，假);CTX。fill()；CTX。begin path()；ctx.fillStyle=rgba(128，100，162，0.7)；//ctx.arc(95，95，35，0，数学* 2，假);CTX。fill()；}结果就是下面这样：
和上面的代码基本没变化，就是把rgb(红、绿、蓝)变成了rgba(r，g，b，a)而已，一个的值也是0~1,0表示完全透明，1则是完全不透明（所以希腊字母的第一个字母的值实际上是"不透明度")。
全局透明globalAlpha这个也是很简单的一个属性，默认值为1.0,代表完全不透明，取值范围是0.0(完全透明)~1.0。这个属性与阴影设置是一样的，如果不想针对全局设置不透明度，就得在下次绘制前重置全球阿尔法。
总结一下：基于状态的属性有哪些？
——全球阿尔法
——全球复合组织
——冲程
——文本基线
——线帽，线连接，线宽，极限
——填充样式
——字体
——阴影模糊、阴影颜色、阴影偏移量、阴影偏移量
我们通过一个代码，来体验一下globalAlpha的神奇之处~
Java Script语言代码复制内容到剪贴板！DOCTYPEhtml htmllang=zh head元字符集=UTF八号标题全局透明/title style body{background:url( ./images/bg3 . jpg’)重复；} # canvas { border:1px solid # aaaaaa；显示：块；保证金：50pxauto }/style/head body divid= canvas-warp canvasid= canvas 你的浏览器居然不支持画布？赶快换一个吧！/画布/div脚本窗户。onload=function(){ var canvas=document。getelementbyid(“canvas”)；canvas . width=800 canvas . height=600 var context=canvas获取上下文(“2d”)；语境。填充样式= # FFF ；context.fillRect(0，0，800，600)；context . global alpha=0.5 for(vari=0；i=50I){ varR=math。地板(数学。random()* 255)；varG=数学。地板(数学。random()* 255)；varB=数学。地板(数学。random()* 255)；context.fillStyle=rgb( R ， G ， B )；语境。begin path()；语境。弧(数学。random()*画布。width，Math.random()*canvas.height，Math.random()*100，0，Math .PI * 2)；语境。fill()；} };/script /body /html运行结果：
是不是非常的酷？终于有点艺术家的范儿了吧。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。