包括线性渐变和径向渐变
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> #mycanvas{ border: 1px solid #9c9898; background: white; } </style> <script language="JavaScript"> window.onload=function(){ var canvas = document.getElementById("mycanvas"); var contex = canvas.getContext("2d"); //线性渐变 var clg=contex.createLinearGradient(0,0,200,0); clg.addColorStop(0,"#ff0000"); clg.addColorStop(0.5,"#00ff00"); clg.addColorStop(1,"#0000ff"); contex.fillStyle=clg; contex.strokeStyle=clg; contex.fillRect(10,10,200,200); //径向渐变 var crg=contex.createRadialGradient(325,100,20,325,100,80); crg.addColorStop(0,"#ff0000"); crg.addColorStop(0.75,"#00ff00"); crg.addColorStop(1,"#0000ff"); contex.fillStyle=crg; //contex.strokeStyle=crg; contex.fillRect(230,10,200,200); } </script> </head> <body> <canvas id="mycanvas" width="800" height="800"></canvas> </body> </html>
填充图片，有四种填充方式
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> #mycanvas{ border: 1px solid #9c9898; background: blue; } button{ height: 80px; width: 200px; } </style> <script language="JavaScript"> function draw(type){ var canvas = document.getElementById("mycanvas"); var contex = canvas.getContext("2d"); contex.clearRect(0,0,500,200); var img =document.getElementById("cf"); var pat = contex.createPattern(img,type); contex.rect(0,0,canvas.width,canvas.height); contex.fillStyle=pat; contex.fill(); } </script> </head> <body> <img src="1.png" id="cf" width="50 " height="50"><br> <button onclick="draw('repeat-x')" >repeat-x</button> <button onclick="draw('repeat-y')">repeat-y</button> <button onclick="draw('repea')">repeat</button> <button onclick="draw('no-repeat'')">no-repeat</button> <br> <canvas id="mycanvas" width="800" height="800"></canvas> </body> </html>