HTML5 canvas基本绘图之绘制曲线

JavaScript Code复制内容到剪贴板

function createRoundRect(context , x1 , y1 , width , height , radius)   
    {   
        // 移动到左上角   
        context.moveTo(x1 + radius , y1);   
        // 添加一条连接到右上角的线段   
        context.lineTo(x1 + width – radius, y1);   
        // 添加一段圆弧   
        context.arcTo(x1 + width , y1, x1 + width, y1 + radius, radius);   
        // 添加一条连接到右下角的线段   
        context.lineTo(x1 + width, y1 + height – radius);   
        // 添加一段圆弧   
        context.arcTo(x1 + width, y1 + height , x1 + width – radius, y1 + height , radius);   
        // 添加一条连接到左下角的线段   
        context.lineTo(x1 + radius, y1 + height);    
        // 添加一段圆弧   
        context.arcTo(x1, y1 + height , x1 , y1 + height – radius , radius);   
        // 添加一条连接到左上角的线段   
        context.lineTo(x1 , y1 + radius);   
        // 添加一段圆弧   
        context.arcTo(x1 , y1 , x1 + radius , y1 , radius);   
        context.closePath();   
    }   
    // 获取canvas元素对应的DOM对象   
    var canvas = document.getElementById(‘mc’);   
    // 获取在canvas上绘图的CanvasRenderingContext2D对象   
    var context = canvas.getContext(‘2d’);