初识html5-canvas使用

基本上会的全部用上了 渐变 图像裁剪 有时间给补上

照例先上效果图

感觉弱爆了 画了个自己的姓上去 还不会画特别复杂的图像 嘿嘿 

Javascript

 1 function StartDraw()

 2 {

 3     

 4     var con=document.getElementById("cans").getContext("2d");

 5     con.save();

 6     con.strokeStyle="#000";

 7     DrawN(con);

 8     

 9     <!-- 绘制第二个 倾斜 做阴影-- >

10     con.globalCompositeOperation = "destination-over";

11     con.translate(33,-6); //移动画板

12     con.scale(1,0.8); //原宽 原高的80%

13     con.strokeStyle="#b0c4de";

14     con.rotate(20*Math.PI/180); 

15     DrawN(con);

16     

17     con.restore();

18     <!-- 阴影 -->

19     con.shadowColor = "rgba(0,0,0,0.2)";//0.2透明度

20     con.shadowOffsetX = 5; //右移5

21     con.shadowOffsetY = 3; //下移3

22     con.shadowBlur = 0.5; //轻微模糊 值越大越模糊

23     con.font = "bold 20px sans-serif";

24     con.fillStyle = "#000";

25     con.textAlign = "center"; //

26     con.fillText("Niao'X",150,170); //绘制文字

27     con.strokeText("Niao'X",150,190); //绘制文字轮廓

28     

29     con.restore();

30     image  = new Image();

31     image.src = "http://pic.cnblogs.com/avatar/a440829.png";

32     image.onload = function()

33     {

34         con.drawImage(image,80,155,28,24)

35     }

36 }

37 

38 function DrawN(con)

39 {

40     con.lineWidth = 2;

41     con.lineJoin = "round";

42 

43     con.beginPath();

44     

45     con.moveTo(95,8);

46     con.lineTo(100,15);

47     

48     con.moveTo(80,15);

49     con.lineTo(80,35);

50     

51     con.moveTo(80,15);

52     con.lineTo(120,15);

53     

54     con.moveTo(120,15);

55     con.lineTo(120,35);

56     

57     con.moveTo(70,35);

58     con.lineTo(130,35);

59     

60     con.moveTo(100,35);

61     con.lineTo(100,75);

62 

63     

64     

65     con.quadraticCurveTo(98,90,85,65); //贝塞尔曲线

66     con.stroke();

67     con.closePath();

68 }

 

html

1 <body onload = "StartDraw()">

2 <canvas id="cans" style=" border:1px solid" width="200px" height="200px"></canvas>

3 </body>

你可能感兴趣的:(canvas)