Canvas画布

1. 半圆

function CanVas(parmas){
    var canvas = document.createElement('canvas')
    document.body.appendChild(canvas)
    var C = canvas.getContext('2d')
    canvas.width = 200;
    canvas.height = 200;
    // 画布重绘
    C.clearRect(0,0,canvas.width,canvas.height)
    var Width=canvas.getAttribute("width")
    var Height=canvas.getAttribute("height");
    var data= C.getImageData(0,0,Width,Height)
    let W = parseInt(String(parmas.radius * 2)) + parmas.StorkeWidth
    let H = parseInt(String(parmas.radius)) + parmas.StorkeWidth
    canvas.setAttribute("width",W)
    canvas.setAttribute("height",H)
    C.putImageData(data,0,0)
    var Wt = canvas.getAttribute("width")
    var Ht = canvas.getAttribute("height"); 
    C.arc(Wt/2, Wt/2, parmas.radius, 0, Math.PI * 2, true)
    // 填充背景颜色
    C.fillStyle = parmas.backcolor
    // 着色
    C.fill()
    C.lineWidth = parmas.StorkeWidth
    // 边框颜色
    C.strokeStyle = parmas.framecolor
    // 着色
    C.stroke()
    return C
}

        传入参数
        radius  // 圆半径
        StorkeWidth// 圆边框大小
        framecolor  // 边框颜色
        backcolor // 背景颜色

2. 文字

function Word(parmas){
    var canvas = document.createElement('canvas')
    document.body.appendChild(canvas)
    var C = canvas.getContext('2d')
    canvas.width = 200;
    canvas.height = 200;
    // 画布重绘
    C.clearRect(0,0,canvas.width,canvas.height)
    var Width=canvas.getAttribute("width")
    var Height=canvas.getAttribute("height");
    var data= C.getImageData(0,0,Width,Height)
    let W = parseInt(String(parmas.Size)) 
    let H = parseInt(String(parmas.fontSize))
    canvas.setAttribute("width",W)
    canvas.setAttribute("height",H)
    C.putImageData(data,0,0)
    // 文字背景色
    C.fillStyle = parmas.backcolor
    // 选择颜色后重新绘制画布
    C.fillRect(0,0,W,H)
    // 字体样式
    C.font = parmas.fontSize + 'px' + ' ' + '宋体'
    // 字体颜色
    C.fillStyle = parmas.fillStyle
    // 水平居中
    C.textAlign = "center"
    // 垂直方向
    C.textBaseline = "Bottom"
    // 文字
    C.fillText(parmas.word,W/2,parmas.fontSize-4,parmas.Size)
    return C
}

传入参数
        word,  // 文本内容
        Size // 画布最大宽度
        fontSize // 文字字体大小
        fillStyle // 字体颜色"
        backcolor // 背景颜色