html5 給我們帶來了極大驚喜的canvas標簽，有了它我們可以在瀏覽器客戶端處理圖片，不需要經過服務器周轉。可以實現：
1、照片本地處理，ps有的一些基本功能都有
2、結合js可以實現一些很炫的動畫效果
這篇文章實現一個微信上發圖片消息的效果最終效果圖：
下面我們先介紹canvas一些基本的用法，這里可能需要一些基本的幾何知識，對小伙伴們來說應該不是問題
1、創建一個canvas
var canvas=document.createElement('canvas');或者獲取一個已存在的canvas,var canvas=document.getElementById('canvasid');
canvas.width=1000;canvas.height=1000;//定義大小
2、創建繪圖的上下文
var context=canvas.getContext('2d');
3、畫直線
context.beiginPath();//開始畫圖
context.moveTo(100,50) ;//這個方法類似於我們寫字時提筆動作，即把筆提起來，放到指定坐標處
context.lineTo(100,100);//由(100,50)處畫到(100,100)處
context.lienWidth=2;//定義筆的粗細
context.strokeStyle='red';//定義筆的顏色
context.stroke();//以指定的粗細和顏色描繪路徑。前面的只是有了路徑，必須用stroke方法進行描繪，否則看不到任何效果
4、畫實心三角形
context.beginPath();
context.moveTo(100,110);
context.lineTo(100,210);
context.lienTo(150,210);
//context.lineTo(100,110);//這句要不要都無所謂，因為后面的fill方法自動會將路徑閉合
context.fillStyle=‘green’;//填充顏色
context.fill();//開始填充
5、畫空心三角形（直線加斜線組合）
context.beiginPath();
context.moveTo(100,220);
context.lineTo(100,320);
context.lineTo(150,320);
context.closePath();//關閉路徑 ,用context.lineTo(100,220)繼續畫完也可以
context.lineWidth=3;
context.stroke();
6、畫正方形（直線加斜線組合）
context.beginPath();
context.moveTo(100,330);
context.lineJoin='round';
context.lineTo(100,430);
context.lineTo(200,430);
context.lineTo(200,330);
context.closePath();
context.lineWidth=10;
context.strokeStyle='blue';
context.stroke();
眼尖的小伙伴們應該注意到了，四個拐角是圓的，對的，就是context.lineJoin='round'的功勞，除了round還有bevel（斜角）和miter（尖角），默認miter
7、畫圓
context.beginPath();
context.arc(150500,50,0,2*Math.PI);
context.lineWidth=2;
context.strokeStyle='orange';
context.stroke();
8、畫曲線
context.beginPath();
context.moveTo(100,600);
context.quadraticCurveTo(150,650,100,700);//(150,600)為控制點，(100,700)為曲線終點。可以指定多個控制點，能更精確的控制曲線的走向
context.stroke();
9、裁剪
//加載圖片
var image=new Image();
image.src='../images/Penguins.jpg';
image.onload=function(){
context.beginPath();
//畫裁剪區域，此處以圓為例
context.arc(50,50,50,0,2*Math.PI);
context.clip();//次方法下面的部分為待剪切區域，上面的部分為剪切區域
context.drawImage(image,0,0,100,100);
}
注意：
1、stroke()方法比較耗性能，如果描繪的樣式一樣的話建議放在最后執行
2、用slip方法畫裁剪區域過程中不能出現moveTo提筆的操作，否則無法形成完整的區域,剪切的效果大家可以試試。
看完以上例子是不是對我們最終要實現的效果有清晰的思路了。
4條直接+4個圓角+2條斜線就可實現。直線和斜線好畫，關鍵在於圓角，有人說直接用lineJoin不就搞定了嗎，大家要清楚，lineJoin畫出來的圓角角度大小是根據lineWidth確定的，要達到我們要實現的圓角角度，上面畫正方形的圓角lineWidth=10,可我們的圖片邊框要這么粗？顯然不符合要求，且難以控制圓角角度。最佳的辦法就是用quadraticCurveTo畫曲線替換，關鍵在於確定曲線的三個點：起點，控制點和終點，下面是完整的代碼：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload=function(){
var image=new Image();
image.src='../images/Penguins.jpg';
image.onload=function(){
var canvas=document.createElement('canvas');
canvas.width=106;
canvas.height=100;
context=canvas.getContext('2d');
context.moveTo(0, 6);
context.lineTo(0, 100-6);
context.quadraticCurveTo(0, 100, 6, 100);
context.lineTo(100-6, 100);
context.quadraticCurveTo(100, 100, 100, 100-6);
context.lineTo(100,27);
context.lineTo(100+5,22);
context.lineTo(100,17);
context.lineTo(100, 6);
context.quadraticCurveTo(100, 0, 100-6, 0);
context.lineTo(6, 0);
context.quadraticCurveTo(0, 0, 0, 6);
context.lineWidth=0.5;
context.stroke();
context.clip();
context.drawImage(image,0,0,106,100);
document.body.appendChild(canvas);
}
}
</script>
</head>
<body style="margin:0px;padding:0px;">
</body>
</html>最終效果圖：
當初為實現這個效果，因為剛接觸canvas，找了很多資料，網上很多都是介紹規則圖形裁剪例子，沒有不規則的，最終實現時，萬分激動啊，終於可以在聊天發圖片時有微信上的的感覺。