实现圆角的3种方式

Posted 2020-06-13

 

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

最终的实现效果