初识html5canvas使用

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

照例先上效果图

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

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>