HTML5的畫布(Canvas)是一種基于Web的圖形技術,它可以通過JavaScript來實現各種形狀和動畫效果。下面,讓我們來用HTML5畫布來畫一幅可愛的小豬佩奇吧。
//創建畫布 var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); //頭部 ctx.beginPath(); ctx.arc(150, 75, 50, 0, 2 * Math.PI); ctx.fillStyle = "#FBDDB4"; ctx.fill(); ctx.strokeStyle = "#A36309"; ctx.stroke(); //眼睛 ctx.beginPath(); ctx.arc(130, 60, 10, 0, 2 * Math.PI); ctx.fillStyle = "white"; ctx.fill(); ctx.stroke(); ctx.beginPath(); ctx.arc(170, 60, 10, 0, 2 * Math.PI); ctx.fillStyle = "white"; ctx.fill(); ctx.stroke(); ctx.beginPath(); ctx.arc(130, 60, 5, 0, 2 * Math.PI); ctx.fillStyle = "black"; ctx.fill(); ctx.beginPath(); ctx.arc(170, 60, 5, 0, 2 * Math.PI); ctx.fillStyle = "black"; ctx.fill(); //鼻子 ctx.beginPath(); ctx.arc(150, 80, 10, 0, 2 * Math.PI); ctx.fillStyle = "#FFB6C1"; ctx.fill(); ctx.strokeStyle = "black"; ctx.stroke(); //嘴巴 ctx.beginPath(); ctx.moveTo(135, 93); ctx.quadraticCurveTo(150, 98, 165, 93); ctx.quadraticCurveTo(150, 105, 135, 93); ctx.fillStyle = "#FFB6C1"; ctx.fill(); ctx.strokeStyle = "black"; ctx.stroke(); //耳朵 ctx.beginPath(); ctx.arc(110, 58, 12, 0, 2 * Math.PI); ctx.fillStyle = "#FBDDB4"; ctx.fill(); ctx.strokeStyle = "#A36309"; ctx.stroke(); ctx.beginPath(); ctx.arc(190, 58, 12, 0, 2 * Math.PI); ctx.fillStyle = "#FBDDB4"; ctx.fill(); ctx.strokeStyle = "#A36309"; ctx.stroke(); //身子 ctx.beginPath(); ctx.rect(110, 100, 80, 60); ctx.fillStyle = "#FBDDB4"; ctx.fill(); ctx.strokeStyle = "#A36309"; ctx.stroke(); //尾巴 ctx.beginPath(); ctx.moveTo(190, 130); ctx.lineTo(210, 130); ctx.lineTo(210, 150); ctx.quadraticCurveTo(210, 165, 190, 165); ctx.lineTo(190, 145); ctx.fillStyle = "#FBDDB4"; ctx.fill(); ctx.strokeStyle = "#A36309"; ctx.stroke(); //腿 ctx.beginPath(); ctx.rect(120, 160, 20, 40); ctx.fillStyle = "#FBDDB4"; ctx.fill(); ctx.strokeStyle = "#A36309"; ctx.stroke(); ctx.beginPath(); ctx.rect(160, 160, 20, 40); ctx.fillStyle = "#FBDDB4"; ctx.fill(); ctx.strokeStyle = "#A36309"; ctx.stroke();
上面的代碼通過Canvas的API來繪制了一幅小豬佩奇。Canvas可以在Web應用程序中實現各種圖形和動畫效果,非常有用。學習Canvas不僅可以提升Web開發技能,還可以為我們帶來更好的用戶體驗。
上一篇html5畫布畫圖形代碼
下一篇html5畫布顏色代碼