canvas案例123
1.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> function draw(id){ var canvas = document.getElementById(id); var context = canvas.getContext("2d"); var g1 = context.createLinearGradient(0,0,0,300); g1.addColorStop(0,"rgb(255,255,0)"); g1.addColorStop(1,"rgb(0,255,255)"); context.fillStyle = g1; context.fillRect(0,0,500,500); var g2 = context.createLinearGradient(0,0,300,0); g2.addColorStop(0,"rgba(0,0,255,0.5)"); g2.addColorStop(1,"rgba(255,0,0,0.5)"); for(var i=0;i<10;i++){ context.beginPath(); context.fillStyle = g2; context.arc(i*25,i*25,i*10,0,Math.PI*2,true); context.closePath(); context.fill(); } } </script> </head> <body onload="draw('canvas')"> <canvas id="canvas" width="500" height="500"></canvas> </body> </html>
2.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> function draw(id){ var canvas = document.getElementById(id); if(canvas == null){ return false; } var context = canvas.getContext("2d"); var g1 = context.createRadialGradient(400,100,0,400,100,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); } </script> </head> <body onload="draw('canvas')"> <canvas id="canvas" width="500" height="500"></canvas> </body> </html>
3.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> function draw(id){ var canvas = document.getElementById(id); if(canvas == null){ return false; } var context = canvas.getContext("2d"); context.fillStyle="#eeeeef"; 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> </head> <body onload="draw('canvas')"> <!--translate(x,y) scale(x,y) rotate(deg)--> <canvas id="canvas" width="500" height="500"></canvas> </body> </html>