代码实例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>实例</title> <script> window.onload=function() { var canvas=document.getElementById('canvas'); var ctx=canvas.getContext('2d'); //渐变的位置 var colorObj=ctx.createLinearGradient(0,0,100,0); //颜色的变化 colorObj.addColorStop(0,"blue"); colorObj.addColorStop(1,"green"); ctx.fillStyle= colorObj; ctx.fillRect(0,0,100,100); ctx.putImageData(imgData,0,0); } </script> </head> <body> <canvas id="canvas" width="500" height="500"></canvas> </body> </html>
效果:
2017-09-12 09:51:31