この記事では、キャンバス上に絵文字を描画するためのサンプルコードを紹介し、みんなに共有します。詳細は次のとおりです。
漫画のスマイリーフェイスを描く
var Canvas = document.getElementById('canvas');var context = Canvas.getContext('2d');//面を描画し、面の塗りつぶしの色を '#fff' に設定しますcontext.fillStyle = '#fff' ;context.beginPath();context.arc(150, 150, 60, 0, Math.PI*2);context.closePath();context.fill();//目を描画し、目の塗りつぶしの色を '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();//口を描画し、口の塗りつぶしの色を '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();//赤面を描画し、赤面の線の色を「ピンク」に、線の幅を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.ストロークスタイル = 'ピンク';context.ストローク();絵文字を作成する
var Canvas = document.getElementById('canvas');var context = Canvas.getContext('2d');var image = new Image();image.src= 'https://ke.qq.com/classroom/assets /lib/img/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 );以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。