canvas 渐变冲突还是啥回事 球大神解惑

Posted 2023-03-22

var canvas=document.getElementById('canvas')var ctx=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)';//颜色值上限255 42.5*5 math.foor 向下取整// ctx.fillRect(j*25,i*25,25,25)//fillRect(x, y, width, height)绘制一个填充的矩形// // //颜色版 25*6 //// 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(160+j*25,12.5+i*25,10,0,Math.PI*2,true)//路径位置以及形状 arc 已经申明为画圆 半径10 从0 到 Math.PI*2的圆周 // ctx.stroke()//闭合路径// // //渐变圆周 20*6// // //270// ctx.fillStyle='#FD0'// ctx.fillRect(270,0,75,75)// ctx.fillStyle='#6c8'// ctx.fillRect(345,0,75,75)// ctx.fillStyle='#09f'// ctx.fillRect(270,75,75,75)// ctx.fillStyle='#f30'// ctx.fillRect(345,75,75,75)// ctx.globalAlpha=0.2;// ctx.fillStyle = '#FFF';// for(var i=0;i<7;i++)// ctx.beginPath()//申明 创建路径// ctx.arc(345,75,10+10*i,0,Math.PI*2,true) // x y x表示图像x位置最小值 ， y表示图像y位置最大值// ctx.fill();// // //425 ctx.fillStyle = 'rgb(255,221,0)'; ctx.fillRect(425,0,150,37.5); ctx.fillStyle = 'rgb(102,204,0)'; ctx.fillRect(425,37,150,37.5); ctx.fillStyle = 'rgb(0,153,255)'; ctx.fillRect(425,75,150,37.5); ctx.fillStyle = 'rgb(255,51,0)'; ctx.fillRect(425,112.5,150,37.5); for(var i=0;i<10;i++) ctx.fillStyle='rgb(255,255,255,'+(i*0.1)+')'//透明渐变 for(var j=0;j<4;j++) ctx.fillRect(430+i*14,5+j*37.5,14,27.5) 代码是这样的，上面注释后显示图一，矩形渐变正常。取消注释后显示图二，矩形渐变没有显示
附代码图

下面那段开始前要用 ctx.beginPath() 重新创建路径 参考技术A html5 canvas 元素的作用就是描绘出图形，比如画圆，扇形，折线图等，有了这个，这些功能都是很好实现的。