哪些标签已经被HTML5所抛弃,HTML5特性&&canvas

1

2

3

4

5

hello canvas

6

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