實現圓角的3種方式

 

1：css最簡單的實現

 img.imgRadious{
    -moz-border-radius: 200px; /* Firefox */
        -webkit-border-radius: 200px; /* Safari 和 Chrome */
        border-radius:   200px; /* Opera 10.5+, 以及使用了IE-CSS3的IE瀏覽器 */
         -o-border-radius: 200px;
         -khtml-border-radius: 200px;   /*  針對Konqueror瀏覽器 *
    }

html代碼

<p>最簡單的實現(border-radius)</p>
 <img src="images/mm1.jpg" width="256" height="191" class="imgRadious">

2：svg實現圓角

<p>SVG圓角效果</p>
   <svg width="256" height="191">
    <desc>SVG圓角效果</desc>
    <defs>
        <pattern id="raduisImage" patternUnits="userSpaceOnUse" width="256" height="191">
            <image xlink:href="images/mm1.jpg" x="0" y="0" width="256" height="191" />
        </pattern>
    </defs>
    <rect x="0" y="0" width="256" height="191" rx="128" ry="95" fill="url(#raduisImage)"></rect>

3：canvas的實現
html

 <p>Canvas實現圖片圓角效果</p>
 <canvas id="canvas" width="256" height="191"></canvas>

js代碼

 //圓角矩形
  CanvasRenderingContext2D.prototype.roundRect = function (x, y, w, h, r) {
           var min_size = Math.min(w, h);
        if (r > min_size / 2) r = min_size / 2;
        // 開始繪製
        this.beginPath();
        this.moveTo(x + r, y);
        this.arcTo(x + w, y, x + w, y + h, r);
        this.arcTo(x + w, y + h, x, y + h, r);
        this.arcTo(x, y + h, x, y, r);
        this.arcTo(x, y, x + w, y, r);
        this.closePath();
        return this;
      }
      // canvas元素, 圖片元素
      var canvas = document.querySelector("#canvas"), image = new Image(), input = document.getElementById("radiusInput");
      var context = canvas.getContext("2d");

      var draw = function(obj) {
      // 建立圖片紋理
      var pattern = context.createPattern(obj, "no-repeat");
      // 若是要繪製一個圓，使用下面代碼
      // context.arc(obj.width / 2, obj.height / 2, Math.max(obj.width, obj.height) / 2, 0, 2 * Math.PI);
      // 這裏使用圓角矩形
      context.roundRect(0, 0, obj.width, obj.height, 
          92 * 1 || 0);
      // 填充繪製的圓
      context.fillStyle = pattern;
      context.fill();    
   }
   image.src = "images/mm1.jpg";
   image.onload = function() {
       draw(this);
  };
   

最終的實現效果