Canvas基本绘画学习

学好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>