基本上会的全部用上了 渐变 图像裁剪 有时间给补上
照例先上效果图
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>