1
2
3
4
5
hello canvas6
7
8
9
10
11
12
13
14 浏览器不支持canvas标签
15
16 varcanv=document.getElementById('canv');17 varctx=canv.getContext('2d');18 ctx.fillStyle='orange';19 //绘制矩形,左上角坐标和右下角坐标
20 ctx.fillRect(0,0,150,150);21
22
23
24
25
26
27 varctx1=document.getElementById('canv1').getContext('2d');28 //绘制直线,moveTo:定义开始坐标;lineTo:定义结束坐标
29 ctx1.strokeStyle="orange";//定义直线颜色
30 ctx1.lineWidth="10";//定义直线宽度
31 ctx1.moveTo(0,0);32 ctx1.lineTo(150,150);33 ctx1.stroke();34
35
36
37 浏览器不支持canvas标签38
39
40 varctx2=document.getElementById('canv2').getContext('2d');41 ctx2.beginPath();42 //arc(x,y,r,start,stop):圆心x,y坐标;半径;起始角度:与圆心平行的右端为0度;结束角度
43 //Math.PI表示180度,顺时针画圆
44 ctx2.arc(100,100,50,0,2*Math.PI);45 ctx2.stroke();46
47
48
49
50
51
52
53 varctx3=document.getElementById('canv3').getContext('2d');54 ctx3.font="30px Arial";55 //fillText绘制的是实心的,strokeText绘制的是空心的
56
57 //fillText(text,x,y,maxWidth):相对画布x,y输出text;
58 //maxWidth:可选参数,text最大宽度
59 ctx3.fillText("hello canvas",10,50);60 //ctx3.strokeText("hello canvas",10,50);
61
62
63
64
65
69
70
71 varctx4=document.getElementById('canv4').getContext('2d');72 //var lGradient=ctx4.createLinearGradient(0,0,200,0);
73 //lGradient.addColorStop(0.8,'white');
74 //lGradient.addColorStop(0.5,'orange');
75
76 //ctx4.fillStyle=lGradient;
77
78 varrGradient=ctx4.createRadialGradient(50,50,10,75,80,50);79 rGradient.addColorStop(1,'gold');80 rGradient.addColorStop(0,'red');81 rGradient.addColorStop(0.3,'white');82 ctx4.fillStyle=rGradient;83 ctx4.fillRect(0,0,150,150);84
85
86
87
88
89
90
91 varctx5=document.getElementById('canv5').getContext('2d');92 varimg=document.getElementById('test');93 img.οnlοad=function(){94 ctx5.drawImage(img,5,5);95 }96
97
98
99