HTML5 canvas是一種新型的網(wǎng)頁繪圖技術(shù),可以通過代碼來繪制各種簡筆畫。下面是一個簡單的HTML5 canvas代碼,用于繪制一朵花。
var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.fillStyle = "pink"; // 設(shè)置填充顏色 ctx.beginPath(); // 開始繪制 ctx.arc(100, 100, 50, 0, Math.PI * 2, true); // 繪制花心 ctx.closePath(); // 結(jié)束路徑 ctx.fill(); // 填充路徑 ctx.strokeStyle = "green"; // 設(shè)置描邊顏色 ctx.lineWidth = 3; // 設(shè)置描邊寬度 ctx.beginPath(); // 開始繪制 ctx.moveTo(75, 100); // 移動畫筆到左側(cè)花瓣的底部 ctx.lineTo(100, 75); // 繪制第一片花瓣 ctx.lineTo(125, 100); // 繪制第二片花瓣 ctx.lineTo(100, 125); // 繪制第三片花瓣 ctx.lineTo(75, 100); // 繪制第四片花瓣 ctx.closePath(); // 結(jié)束路徑 ctx.stroke(); // 描邊路徑
以上代碼可以實現(xiàn)繪制一朵粉色的花,其中canvas變量指代了HTML中的canvas元素,通過getContext方法獲取繪圖上下文ctx,然后利用ctx的方法來繪制圖形,如fillStyle、strokeStyle、arc、moveTo、lineTo等方法。