~~~jsx //畫頭像 var avatarurl_width = 66; //繪制的頭像寬度 var avatarurl_heigth = 66; //繪制的頭像高度 var avatarurl_x = 40; //繪制的頭像在畫布上的位置 var avatarurl_y = 1275; //繪制的頭像在畫布上的位置 ctx.save(); ctx.beginPath(); //開始繪制 //先畫個圓 前兩個參數確定了圓心 （x,y） 坐標 第三個參數是圓的半徑 四參數是繪圖方向 默認是false，即順時針 ctx.arc(avatarurl_width / 2 + avatarurl_x, avatarurl_heigth / 2 + avatarurl_y, avatarurl_width / 2, 0, Math.PI * 2, false); ctx.clip();//畫好了圓 剪切 原始畫布中剪切任意形狀和尺寸。一旦剪切了某個區域，則所有之后的繪圖都會被限制在被剪切的區域內 這也是我們要save上下文的原因 ctx.drawImage('頭像地址orImg對象', avatarurl_x, avatarurl_y, avatarurl_width, avatarurl_heigth); // 推進去圖片，必須是https圖片 ctx.restore(); //恢復之前保存的繪圖上下文 恢復之前保存的繪圖上下午即狀態 還可以繼續繪制 ~~~ 來源： https://www.jianshu.com/p/7856582cf1ef