用javascript在canvs上绘制…

你好，我看了你写的这个是基于html5做的，我想问一下有没有基于纯javascript写的算法。

原文地址：用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中加入该脚本文件就可以了，如：