2018-05-21 使用Canvas绘制圆角按钮

使用Canvas可视化工具绘制圆角按钮

最近刚接触了Canvas可视化工具,下面通过一个使用Canvas绘制的圆角按钮的例子,来实践学到的Canvas经验

//对加载完成事件的封装,在本人写的日志2018-05-06-封装的一些小工具中有详细描述,在这里不再做更多的赘述
let addEvent = (eventLoad) => {
    let load = window.onload;
    if(typeof load !== "function") {
        window.onload = eventLoad;
    } else {
        window.onload = function() {
            load();
            eventLoad();
        };
    }
};

//Canvas绘制圆角按钮的函数
let canvasRadiusButton = () => {
    //假如DOM-Core中不存在getElementById方法,则返回false,退出函数
    if(!document.getElementById) return false;
    //假如DOM-Core中不存在createElement方法,则返回false,退出函数
    if(!document.createElement) return false;
    //假如DOM中不存在id名为home的元素节点,则返回false,退出函数
    if(!document.getElementById("home")) return false;
    //获取id名为home的元素节点
    let home = document.getElementById("home"),
        //创造出canvas元素节点标签
        canvas = document.createElement("canvas");
    //设置canvas元素节点标签的宽度和高度都为200px    
    canvas.width = 200;
    canvas.height = 200;
    //设置canvas绘制画布的类型为: 2d(平面画布)
    let ctx = canvas.getContext("2d");
    //绘制画布开始绘制路径
    ctx.beginPath();
    //设置绘制画布的起点坐标为: (12, 20)
    ctx.moveTo(12, 20);
    //使用贝塞尔曲线去绘制圆角
    //bezierCurveTo方法有三组坐标参数,前面两组为两个控制点位置,利用这两个控制点可以完美的画出半圆、椭圆甚至是圆角,最后一组为曲线终点的位置
    ctx.bezierCurveTo(12, 16, 15, 14, 19, 14);
    //绘制直线至画布的(129, 14)坐标
    ctx.lineTo(129, 14);
    //继续使用贝塞尔曲线绘制圆角
    ctx.bezierCurveTo(133, 14, 136, 16, 136, 20);
    //绘制直线至画布的(136, 45)坐标
    ctx.lineTo(136, 45);
    //继续使用贝塞尔曲线绘制圆角
    ctx.bezierCurveTo(136, 49, 133, 51, 129, 51);
    //绘制直线至画布的(19, 51)坐标
    ctx.lineTo(19, 51);
    //继续使用贝塞尔曲线绘制圆角
    ctx.bezierCurveTo(15, 51, 12, 49, 12, 45);
    //绘制直线至画布的(12, 20)坐标
    ctx.lineTo(12, 20);
    //绘制画布结束绘制路径
    ctx.closePath();
    //设置画布路径的填充样式为: rgba(255, 255, 0, 0.8)
    ctx.fillStyle = "rgba(255, 255, 0, 0.8)";
    //进行画布填充
    ctx.fill();
    //设置画布路径的color样式为: rgba(255, 0, 0, 0.5) 
    ctx.strokeStyle = "rgba(255, 0, 0, 0.5)";
    //画布路径绘制完毕,实现绘制模型
    ctx.stroke();
    //将canvas元素节点添加到home元素节点里面,作为home元素节点的子节点    
    home.appendChild(canvas);
};

addEvent(canvasRadiusButton);