一、最終結果圖下圖所示

圓角矩形效果圖

二、用canvas繪制圓角矩形
代碼如下：
<code>
var canvas=document.getElementsByTagName("canvas")[0];
var context=canvas.getContext("2d");
context.strokeStyle="rgba(0,255,0,0.5)"http://矩形邊框顏色
context.beginPath();//開始繪制
context.lineTo(200,100);//移動到某個點
context.lineTo(300,100);
context.lineTo(300,200);
context.lineTo(200,200);
context.closePath();
context.stroke();
context.strokeStyle="rgba(255,255,0,1)"
context.beginPath();
context.moveTo(218,100);
context.arcTo(300,100,300,200,18);
context.arcTo(300,200,200,200,18);
context.arcTo(200,200,200,100,18);
context.arcTo(200,100,300,100,18);
context.closePath();
context.stroke();
</code>
效果如下：

黃色為圓角矩形，綠色為原始矩形

總結：繪制圓角矩形的arcTo方法參數為x1坐標y1坐標，x2坐標y2坐標；第五個參數為圓角半徑。圓角的繪制其實是
三、canvas和Ol3結合繪制圓角矩形標注

           var layer = new ol.layer.Tile({
                   source: new ol.source.XYZ({
                   url: 'http://www.google.cn/maps/vt?pb=!1m5!1m4!1i{z}!2i{x}!3i{y}!4i256!2m3!1e0!2sm!3i342009817!3m9!2szh-CN!3sCN!5e18!12m1!1e47!12m3!1e37!2m1!1ssmartmaps!4e0&token=32965'
                     })
                });
   var vector=new ol.layer.Vector({
        source:new ol.source.Vector()
           });

    var view = new ol.View({
        center: new ol.proj.fromLonLat([120, 30]),
        zoom: 7
    });
    var map = new ol.Map({
        layers: [layer,vector],
        view: view,
        target: "map",
        logo: false
    });

    var feature=new ol.Feature({
        geometry:new ol.geom.Point(new ol.proj.fromLonLat([120,30]))
        });
      //繪制圓角矩形
   var roundRect = function (x, y, w, h, r) {
        if (w < 2 * r) r = w / 2;
        if (h < 2 * r) r = h / 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();
        this.fillStyle = "rgba(108,159,67,1)";
        this.fill();
        return this;
    }
    var canvas = document.createElement("canvas");//創(chuàng)建一個canvas標簽
    canvas.width = 75;
    canvas.height = 20;
    var context = canvas.getContext("2d");
    context.roundRect = roundRect;
    context.roundRect(0, 0, 75, 20, 8);
    var style = new ol.style.Style({
        image: new ol.style.Icon({
            img: canvas,
            imgSize: [canvas.width, canvas.height]
        }),
        text: new ol.style.Text({
            text: "我是圓角矩形",
            font: "12px 微軟雅黑",
            fill: new ol.style.Fill({ color: "#ffffff" })
        })
    });
    feature.setStyle(style);
    vector.getSource().addFeature(feature);

四、根據不同長度的中文，創(chuàng)建圓角矩形

  function createRectStyle(text) {
        var canvas, context, length;
        canvas = document.createElement("canvas");
        context = canvas.getContext("2d");
        length = text.length;
        canvas.width = length * 13;
        canvas.height = 20;
        var x = 0, y = 0, w = canvas.width, h = canvas.height, r = 8;
        if (w < 2 * r) r = w / 2;
        if (h < 2 * r) r = h / 2;
        context.beginPath();
        context.moveTo(x + r, y);
        context.arcTo(x + w, y, x + w, y + h, r);
        context.arcTo(x + w, y + h, x, y + h, r);
        context.arcTo(x, y + h, x, y, r);
        context.arcTo(x, y, x + w, y, r);
        context.closePath();
        context.fillStyle = "rgba(108,159,67,1)";
        context.fill();
        var style = new ol.style.Style({
            image: new ol.style.Icon({
                img: canvas,
                imgSize: [w, h]
            }),
            text: new ol.style.Text({
                text: text,
                font: "12px 微軟雅黑",
                fill: new ol.style.Fill({ color: "#ffffff" })
            })
        });
        return style;
    }

使用方法：

           var feature2 = new ol.Feature({
                 geometry: new ol.geom.Point(new ol.proj.fromLonLat([120.1, 30.1]))
             });
         feature.setStyle(createRectStyle("少的"));

使用如上方法自動創(chuàng)建不同長度的圓角矩形