使用canvas怎么繪制一個(gè)表情包?相信很多沒有經(jīng)驗(yàn)的人對(duì)此束手無策,為此本文總結(jié)了問題出現(xiàn)的原因和解決方法,通過這篇文章希望你能解決這個(gè)問題。
var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); // 畫臉,設(shè)置臉的填充顏色為 '#fff' context.fillStyle = '#fff'; context.beginPath(); context.arc(150, 150, 60, 0, Math.PI*2); context.closePath(); context.fill(); // 畫眼睛,設(shè)置眼睛的填充顏色為 'rgb(0, 0, 0)' context.fillStyle = 'rgb(0, 0, 0)'; context.beginPath(); context.arc(130, 130, 8, 0, Math.PI*2); context.closePath(); context.fill(); context.fillStyle = 'rgb(0, 0, 0)'; context.beginPath(); context.arc(170, 130, 8, 0, Math.PI*2); context.closePath(); context.fill(); // 畫嘴巴,設(shè)置嘴巴的填充顏色為 'rgba(255, 0, 0, 0.8)' context.fillStyle = 'rgba(255, 0, 0, 0.8)'; context.beginPath(); context.arc(150, 160, 25, Math.PI, Math.PI*2, true); context.closePath(); context.fill(); // 畫腮紅,設(shè)置腮紅線條顏色為 'pink',線條寬度為 5 context.beginPath(); context.moveTo(95, 152); context.lineTo(110, 150); context.moveTo(190, 150); context.lineTo(205, 152); context.closePath(); context.lineWidth = 5; context.strokeStyle = 'pink'; context.stroke();
var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); var image = new Image(); image.src= '/tupian/20230522/canvas-expression-base.png'; image.onload = function(){ context.drawImage(image, 50, 110, 200, 200); } context.font = '30px arial'; context.fillText('今天的我', 20, 50); context.font = '40px arial'; context.fillText('還是一樣的帥!', 20, 90);
看完上述內(nèi)容,你們掌握使用canvas怎么繪制一個(gè)表情包的方法了嗎?如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,感謝各位的閱讀!
網(wǎng)頁(yè)名稱:使用canvas怎么繪制一個(gè)表情包-創(chuàng)新互聯(lián)
標(biāo)題路徑:http://chinadenli.net/article14/dgdcge.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)頁(yè)設(shè)計(jì)公司、網(wǎng)站內(nèi)鏈、網(wǎng)站維護(hù)、虛擬主機(jī)、Google、網(wǎng)站設(shè)計(jì)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容