建立canvas

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

繪製文字

let text='我是一段文字'
ctx.font = 'bold 14px Microsoft YaHei';
ctx.textAlign = 'left';
ctx.textBaseline = 'bottom';//文字基線,fillText在畫布上定位時,將使用指定的 textBaseline 值。
ctx.fillStyle = '#FFF';
ctx.font = 'bold 14px Microsoft YaHei';
ctx.measureText(text).width 
 
//獲取文字寬度-需先設定文字樣式
ctx.fillText(text, 0, 0);//(文字,x,y)

繪製圖片

let img = new Image();
img.crossOrigin ='anonymous',//解決網路圖片跨域，汙染畫布，
img.src = 'https://xxxx.png';
img.onload = function () {
    ctx.drawImage(img, 6, 54,65,81);//(圖片,x,y,寬,高)
}

繪製圖片圓形

function circleImg(ctx, img, x, y, r) {
    ctx.save(); 
    var
 
 d = 2 * r;
    var cx = x + r;
    var cy = y + r;
    ctx.beginPath();
    ctx.arc(cx, cy, r, 0, 2 * Math.PI);
    ctx.clip();
    ctx.drawImage(img, x, y, d, d);
    ctx.restore();
}

將畫布轉化成圖片

let image = new Image();
image.src = canvas.toDataURL("image/jpg")

繪製帶邊框的有顏色填充的圓形

ctx.beginPath();
ctx.arc(
 
40, 138, 9, 0, Math.PI * 2, true);//畫圓形(x,y,半徑,起始角,結束角,順逆時針繪製)
ctx.closePath();
ctx.fillStyle = '#3298FF';
ctx.strokeStyle = '#FBE200';
ctx.lineWidth = 2;
ctx.stroke(); //描邊
ctx.fill();

繪製一個有填充色的圓角矩形

/**該方法用來繪製一個有填充色的圓角矩形 
 *@param cxt:canvas的上下文環境 
 *@param x:左上角x軸座標 
 *@param y:左上角y軸座標 
 *@param width:矩形的寬度 
 *@param height:矩形的高度 
 *@param radius:圓角的半徑 
 *@param fillColor:填充顏色 
 **/
function fillRoundRect(cxt, x, y, width, height, radius, /*optional*/ fillColor) {
    //圓的直徑必然要小於矩形的寬高          
    if (2 * radius > width || 2 * radius > height) {
        return false;
    }
    cxt.save();
    cxt.translate(x, y);
    //繪製圓角矩形的各個邊  
    drawRoundRectPath(cxt, width, height, radius);
    cxt.fillStyle = fillColor || "#000"; //若是給定了值就用給定的值否則給予預設值  
    cxt.fill();
    cxt.restore();
}
function drawRoundRectPath(cxt, width, height, radius) {
    cxt.beginPath(0);
    //從右下角順時針繪製，弧度從0到1/2PI  
    cxt.arc(width - radius, height - radius, radius, 0, Math.PI / 2);
    //矩形下邊線  
    cxt.lineTo(radius, height);
    //左下角圓弧，弧度從1/2PI到PI  
    cxt.arc(radius, height - radius, radius, Math.PI / 2, Math.PI);
    //矩形左邊線  
    cxt.lineTo(0, radius);
    //左上角圓弧，弧度從PI到3/2PI  
    cxt.arc(radius, radius, radius, Math.PI, Math.PI * 3 / 2);
    //上邊線  
    cxt.lineTo(width - radius, 0);
    //右上角圓弧  
    cxt.arc(width - radius, radius, radius, Math.PI * 3 / 2, Math.PI * 2);
    //右邊線  
    cxt.lineTo(width, height - radius);
    cxt.closePath();
}