canvas学习绘制渐变色
1.createLinearGradient() 创建线性渐变
//Linear adj. 直线的 线性的
//Gradient n. 梯度 变化率
createLinearGradient(x1,y1,x2,y2)——颜色渐变的起始坐标和终点坐标
addColorStop(位置,"颜色值")——0表示起点...插入点...1表示终点,配置颜色停止点
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> canvas{background:#A9A9A0;} </style> </head> <body> <canvas id="bcanvas" width="800" height="800"> 您的浏览器暂不支持HTML5的canvas元素 </canvas> <script type="text/javascript"> var canvas=document.getElementById('bcanvas'); var pi=canvas.getContext('2d'); g=pi.createLinearGradient(250,250,550,550); g.addColorStop(0,"#000000"); g.addColorStop(0.25,"red"); g.addColorStop(0.5,"yellow"); g.addColorStop(0.75,"green"); g.addColorStop(1,"#FFFFFF"); pi.lineWidth=2; pi.strokeStyle="yellow"; pi.fillStyle=g; pi.moveTo(400,500); pi.arc(400,500,300,Math.PI*7/6,Math.PI*11/6,false); pi.closePath(); pi.fill(); pi.beginPath(); pi.strokeStyle="orange"; pi.fillStyle="#A9A9A0"; pi.moveTo(400,500); pi.arc(400,500,150,Math.PI*7/6,Math.PI*11/6,false); pi.closePath(); pi.fill(); pi.beginPath(); pi.lineWidth=1; pi.strokeStyle="green"; pi.fillStyle="red"; pi.font="60px 隶书"; pi.strokeText("纵",375,270); pi.fillText("横",375,340); pi.strokeText("横",375,340); </script> </body> </html>
线性渐变测试
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas学习渐变</title> <style type="text/css"> canvas{background:#A9A9A0;} </style> </head> <body> <canvas id="canvas" width="500" height="500"></canvas> <script type="text/javascript"> var canvas=document.getElementById("canvas"); var c=canvas.getContext('2d'); c.beginPath(); g=c.createLinearGradient(0,110,250,110); g.addColorStop(0,"blue"); g.addColorStop(0.25,"#FFFFFF"); g.addColorStop(0.4,"#8f4b2e"); g.addColorStop(0.7,"red"); g.addColorStop(1,"yellow"); c.fillStyle=g; c.fillRect(0,0,250,250); c.beginPath(); g=c.createLinearGradient(250,0,250,250); g.addColorStop(0,"blue"); g.addColorStop(0.25,"#FFFFFF"); g.addColorStop(0.4,"#8f4b2e"); g.addColorStop(0.7,"red"); g.addColorStop(1,"yellow"); c.fillStyle=g; c.fillRect(250,0,250,250); c.beginPath(); g=c.createLinearGradient(125,250,0,500); g.addColorStop(0,"orange"); g.addColorStop(0.25,"red"); g.addColorStop(1,"yellow"); c.fillStyle=g; c.fillRect(0,250,250,250); c.beginPath(); g=c.createLinearGradient(250,250,250,500); g.addColorStop(0,"blue"); g.addColorStop(0.1,"white"); g.addColorStop(0.2,"brown"); g.addColorStop(0.4,"red"); g.addColorStop(1,"yellow"); c.fillStyle=g; c.fillRect(250,250,250,250); </script> </body> </html>
2.createRadialGradient(x1,y1,r1,x2,y2,r2)(起始圆心,终止圆心) 创建放射状/环形的渐变
//Radial adj. 径向的 放射式的
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas放射式渐变</title> <style type="text/css"> canvas{background:#A9A9A0;} </style> </head> <body> <canvas id="canvas" width="800" height="600"> 您的浏览器暂不支持HTML5的canvas元素 </canvas> <script type="text/javascript"> var canvas=document.getElementById("canvas"); var c=canvas.getContext('2d'); // g=c.createRadialGradient(50,300,0,700,300,150); // g.addColorStop(0,"blue"); // g.addColorStop(0.25,"#FFFFFF"); // g.addColorStop(0.4,"#8f4b2e"); // g.addColorStop(0.7,"red"); // g.addColorStop(1,"yellow"); // c.fillStyle=g; // c.fillRect(50,50,700,500); g=c.createRadialGradient(400,300,10,400,300,200); g.addColorStop(0,"blue"); g.addColorStop(0.25,"#FFFFFF"); g.addColorStop(0.4,"#8f4b2e"); g.addColorStop(0.7,"red"); g.addColorStop(1,"yellow"); c.fillStyle=g; c.arc(400,300,200,0,Math.PI*2); c.fill(); </script> </body> </html>
绘画太极