canvas繪制圓角頭像的實現(xiàn)方法
發(fā)布時間：2019-01-17 15:29:31 作者：不會飛的Porco 
我要評論
我要評論這篇文章主要介紹了canvas繪制圓角頭像的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
如果你想繪制的網(wǎng)頁包含一個圓弧形的頭像的canvas圖片，但是頭像本身是正方形的，需要的方法如下：
首先， 拿到頭像在畫布上的坐標(biāo)和寬高：(具體怎么獲取不在此做具體介紹)
let {avatarX, avatarY, avatarW, avatarH} = {20, 20, 80, 80};
然后 只需要調(diào)用以下函數(shù)即可：
let Canvas = document.createElement('canvas');
let ctx = Canvas.getContext("2d");
let avatar = new Image();
avatar.src = '../src/xx.png';
avatar.onload = (scaleBy = 2) => {
circleImg(ctx, avatar, avatarX * scaleBy, avatarY * scaleBy, avatarW * scaleBy / 2);
}
// r: 半徑
function circleImg(ctx, img, x, y, r) {
ctx.save();
var d =2 * r;
var cx = x + r;
var cy = y + r;
ctx.arc(cx, cy, r, 0, 2 * Math.PI);
ctx.clip();
ctx.drawImage(img, x, y, d, d);
ctx.restore();
}
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
HTML5中通過li-canvas輕松實現(xiàn)單圖、多圖、圓角圖繪制，單行文字、多行
這篇文章主要介紹了HTML5中通過li-canvas輕松實現(xiàn)單圖、多圖、圓角圖繪制，單行文字、多行文字等,需要的朋友可以參考下2018-11-30
這篇文章主要介紹了詳解html2canvas截圖不能截取圓角圖片的解決方案的相關(guān)資料,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-30使用HTML5 Canvas繪制圓角矩形及相關(guān)的一些應(yīng)用舉例
這篇文章主要介紹了使用HTML5 Canvas繪制圓角矩形及相關(guān)的一些應(yīng)用舉例,作者舉了2048小游戲和微信對話框兩個實用的例子來作為操作Canvas API的實用練習(xí)推薦,需要的朋友可以2016-03-22- HTML5 Canvas繪制對象中提供的原生功能沒有實現(xiàn)繪制圓角矩形與虛線的功能，通過JavaScript的Object.prototype可以實現(xiàn)對對象CanvasRenderingContext2D添加這兩個函數(shù)功能，2013-08-02
html5 Canvas畫圖教程(10)—把面拆成線條模擬出圓角矩形
上一篇文章我講了畫矩形和圓形的方法，他們都有原生的canvas繪圖函數(shù)可完成。而本文講的圓角矩形則只有通過其他方法模擬出來,我們動用把面拆成線條的能力，很容易就能發(fā)現(xiàn)2013-01-09
