1、线性渐变
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>线性渐变</title></head><body οnlοad="draw()"><canvas id="canvas" width="500 " height="500"></canvas><script>function draw(){var canvas=document.getElementById("canvas");if(canvas==null){return false;}var context=canvas.getContext("2d");var gl=context.createLinearGradient(0,0,0,300);gl.addColorStop(0,"rgb(255,255,0)");gl.addColorStop(1,"rgb(0,255,255)");context.fillStyle=gl;context.fillRect(0,0,500,500);}</script></body></html>
2、径向渐变
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>径向渐变</title></head><body οnlοad="draw()"><canvas id="canvas" width="500" height="500"></canvas><script>function draw(){var canvas=document.getElementById("canvas");if(canvas==null){return false;}var context=canvas.getContext("2d");var g1=context.createRadialGradient(400,0,0,400,0,400);g1.addColorStop(0.1,"rgb(255,255,0)");g1.addColorStop(0.3,"rgb(255,0,255)");g1.addColorStop(1,"rgb(0,255,255)");context.fillStyle=g1;context.fillRect(0,0,500,500);context.fill();}</script></body></html>
3、绘制变形图形
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>变形图形</title></head><body οnlοad="draw()"><!--平移translate(x,y)--><!--缩放scale(x,y)--><!--旋转rotate(deg)--><canvas id="canvas" width="500" height="500"></canvas><script>function draw(){var canvas=document.getElementById("canvas");if(canvas==null){return false;}var context=canvas.getContext("2d");context.fillStyle="#eeeeee";context.fillRect(0,0,500,500);context.translate(200,50);context.fillStyle="rgba(255,0,0,0.25)";for(var i=0;i<50;i++){context.translate(25,25);context.scale(0.95,0.95);context.rotate(Math.PI/10);context.fillRect(0,0,100,50);}}</script></body></html>
