CSS3 canvas是一種強(qiáng)大的繪圖工具,可以用來繪制各種平面圖形,包括花朵,通過使用各種CSS3樣式,可以創(chuàng)造出美麗、復(fù)雜的花朵形狀。
以下是使用CSS3 Canvas繪制花朵的示例代碼:
/*創(chuàng)建Canvas畫布*/ var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); /*設(shè)置花朵樣式*/ ctx.fillStyle = "#f00"; ctx.strokeStyle = "#000"; ctx.lineWidth = 2; /*繪制花瓣*/ ctx.beginPath(); ctx.moveTo(100, 100); ctx.bezierCurveTo(100, 50, 150, 50, 150, 100); ctx.moveTo(150, 100); ctx.bezierCurveTo(150, 150, 100, 150, 100, 100); ctx.closePath(); ctx.fill(); ctx.stroke(); /*繪制花芯*/ ctx.beginPath(); ctx.arc(125, 100, 10, 0, Math.PI * 2, true); ctx.closePath(); ctx.fill(); ctx.stroke(); /*繪制花蕊*/ ctx.beginPath(); ctx.moveTo(125, 110); ctx.lineTo(125, 150); ctx.closePath(); ctx.stroke();
上面的代碼會繪制一朵簡單的紅色花,這只是最基本的花朵形狀,可以使用更多的CSS3樣式,結(jié)合Canvas繪制出更加復(fù)雜的花朵。