html5 canvas 自定義畫圖裁剪圖片

時間 2019-12-07

標籤 html5 html canvas 自定義畫圖裁剪圖片欄目 HTML5 简体版

原文原文鏈接

html5 給咱們帶來了極大驚喜的canvas標籤，有了它咱們能夠在瀏覽器客戶端處理圖片，不須要通過服務器週轉。能夠實現：javascript

一、照片本地處理，ps有的一些基本功能都有html

二、結合js能夠實現一些很炫的動畫效果html5

這篇文章實現一個微信上發圖片消息的效果最終效果圖：java

下面咱們先介紹canvas一些基本的用法，這裏可能須要一些基本的幾何知識，對小夥伴們來講應該不是問題canvas

一、建立一個canvas瀏覽器

var canvas=document.createElement('canvas');或者獲取一個已存在的canvas,var canvas=document.getElementById('canvasid');服務器

canvas.width=1000;canvas.height=1000;//定義大小微信

二、建立繪圖的上下文app

var context=canvas.getContext('2d');性能

三、畫直線

context.beiginPath();//開始畫圖

context.moveTo(100,50) ;//這個方法相似於咱們寫字時提筆動做，即把筆提起來，放到指定座標處

context.lineTo(100,100);//由(100,50)處畫到(100,100)處

context.lienWidth=2;//定義筆的粗細

context.strokeStyle='red';//定義筆的顏色

context.stroke();//以指定的粗細和顏色描繪路徑。前面的只是有了路徑，必須用stroke方法進行描繪，不然看不到任何效果

四、畫實心三角形

context.beginPath();

context.moveTo(100,110);

context.lineTo(100,210);

context.lienTo(150,210);

//context.lineTo(100,110);//這句要不要都無所謂，由於後面的fill方法自動會將路徑閉合

context.fillStyle=‘green’;//填充顏色

context.fill();//開始填充

五、畫空心三角形（直線加斜線組合）

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();

六、畫正方形（直線加斜線組合）

      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

七、畫圓

context.beginPath();
      context.arc(150500,50,0,2*Math.PI);
      context.lineWidth=2;
      context.strokeStyle='orange';
      context.stroke();

八、畫曲線

     context.beginPath();
     context.moveTo(100,600);
     context.quadraticCurveTo(150,650,100,700);//(150,600)爲控制點，(100,700)爲曲線終點。能夠指定多個控制點，能更精確的控制曲線的走向
   context.stroke();

九、裁剪

//加載圖片

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);

}

注意：

一、stroke()方法比較耗性能，若是描繪的樣式同樣的話建議放在最後執行

二、用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，找了不少資料，網上不少都是介紹規則圖形裁剪例子，沒有不規則的，最終實現時，萬分激動啊，終於能夠在聊天發圖片時有微信上的的感受。