学好Canvas,从简单开始。下面是一些Canvas入门最基本的实例分享：
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>demo</title> 6 <script> 7 window.onload= function pageLoad() { 8 var canvas = document.getElementById('myCanvas'); 9 if (canvas.getContext) { 10 11 //绘图路径 12 var ctx = canvas.getContext('2d'); 13 ctx.beginPath(); 14 ctx.moveTo(20, 20); // 设置路径起点，坐标为(20,20) 15 ctx.lineTo(200, 20); // 绘制一条到(200,20)的直线 16 ctx.lineWidth = 1.0; // 设置线宽 17 ctx.strokeStyle = "#CC0000"; // 设置线的颜色 18 ctx.stroke(); // 进行线的着色，这时整条线才变得可见 19 20 //绘制矩形 21 ctx.fillStyle = 'yellow'; 22 ctx.fillRect(50, 50, 200, 100); 23 24 //绘制空心矩形 25 ctx.strokeRect(10,10,200,100); 26 27 //清除某个矩形区域的内容 28 ctx.clearRect(100,50,50,50); 29 30 //绘制文本 31 ctx.font = "Bold 20px Arial"; 32 ctx.textAlign = "left"; 33 ctx.fillStyle = "#008600";// 设置字体内容，以及在画布上的位置 34 ctx.fillText("Hello!", 10, 50);// 绘制空心字 35 ctx.strokeText("Hello!", 10, 100); 36 37 //绘制实心的圆形 38 //ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise); 39 //arc方法的x和y参数是圆心坐标，radius是半径，startAngle和endAngle则是扇形的起始角度和终止角度（以弧度表示），anticlockwise表示做图时应该逆时针画（true）还是顺时针画（false） 40 ctx.beginPath(); 41 ctx.arc(60, 60, 50, 0, Math.PI*2, true); 42 ctx.fillStyle = "#000000"; 43 ctx.fill(); 44 45 //绘制空心圆形 46 ctx.beginPath(); 47 ctx.arc(60, 60, 50, 0, Math.PI*2, true); 48 ctx.lineWidth = 1.0; 49 ctx.strokeStyle = "#000"; 50 ctx.stroke(); 51 52 //设置渐变色 53 //createLinearGradient方法的参数是(x1, y1, x2, y2)，其中x1和y1是起点坐标，x2和y2是终点坐标。通过不同的坐标值，可以生成从上至下、从左到右的渐变等等。 54 var myGradient = ctx.createLinearGradient(0, 0, 0, 160); 55 myGradient.addColorStop(0, "#BABABA"); 56 myGradient.addColorStop(1, "#636363"); 57 ctx.fillStyle = myGradient; 58 ctx.fillRect(10,10,200,100); 59 60 //设置阴影 61 ctx.shadowOffsetX = 10; // 设置水平位移 62 ctx.shadowOffsetY = 10; // 设置垂直位移 63 ctx.shadowBlur = 5; // 设置模糊度 64 ctx.shadowColor = "rgba(0,0,0,0.5)"; // 设置阴影颜色 65 ctx.fillStyle = "#CC0000"; 66 ctx.fillRect(100,100,200,100); 67 68 //drawImage方法图像文件插入画布 69 var img = new Image(); 70 img.src = "image.png"; 71 ctx.drawImage(img, 0, 0); // 设置对应的图像对象，以及它在画布上的位置 72 } 73 } 74 </script> 75 </head> 76 <body> 77 <canvas id="myCanvas" width="400" height="500"> 78 您的浏览器不支持canvas！ 79 </canvas> 80 </body> 81 </html>