用javascript在canvs上繪製圓角矩…

轉自：http://jo2.org/html5-canvas-round-rect/

源碼：

    //圓角矩形

    CanvasRenderingContext2D.prototype.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.arcTo(x+r, y);

        this.closePath();

        return this;

    }

使用：

var c=document.getElementByIdx_x('myCanvas');  

var ctx=c.getContext('2d');

ctx.roundRect(200,300,200,120,20).stroke();

這種方法可以擴展ContextRenderingContext2D原型

那麼什麼是ContextRenderingContext2D呢? W3C網站上有詳細的說明：http://www.w3.org/html/ig/zh/wiki/2dcontext#canvasrenderingcontext2d

擴展ContextRenderingContext2D原型的好處是，可以將擴展函數寫在獨立的.js文件中，然後在html中加入該腳本文件就可以了，如：