訂閱號(hào)欄目里做微網(wǎng)站網(wǎng)站排名靠前
用HTML5 + JavaScript繪制花、樹
<canvas>是一個(gè)可以使用腳本 (通常為JavaScript) 來繪制圖形的 HTML 元素。
<canvas> 標(biāo)簽/元素只是圖形容器，必須使用腳本來繪制圖形。
HTML5 canvas 圖形標(biāo)簽基礎(chǔ)https://blog.csdn.net/cnds123/article/details/112916903
下面展示了如何使用 HTML5 的 <canvas> 標(biāo)簽/元素以及 JavaScript 來繪制花、樹等效果。
一、畫花
花1、先給出運(yùn)行效果圖：
源碼如下：
<!DOCTYPE html>
<html>
<head><title>Canvas繪制花朵</title><style>canvas {border: 1px solid black;}</style>
</head>
<body><canvas id="myCanvas" width="400" height="400"></canvas><script>var canvas = document.getElementById("myCanvas");var context = canvas.getContext("2d");// 繪制花朵：花朵中心的x坐標(biāo)；花朵中心的y坐標(biāo)；radius花朵的半徑；petalCount花瓣的數(shù)量；petalColor花瓣的顏色；centerColor花朵中心的顏色function drawFlower(x, y, petalCount, petalColor, centerColor) {// 繪制花朵的中心context.beginPath();context.arc(x, y, 10, 0, Math.PI * 2, true);context.fillStyle = centerColor;context.fill();var angle = (Math.PI * 2) / petalCount;for (var i = 0; i < petalCount; i++) {context.beginPath();var startX = x + Math.cos(angle * i) * 10;var startY = y + Math.sin(angle * i) * 10;var cp1X = x + Math.cos(angle * i - angle / 4) * 50;var cp1Y = y + Math.sin(angle * i - angle / 4) * 50;var cp2X = x + Math.cos(angle * i + angle / 4) * 50;var cp2Y = y + Math.sin(angle * i + angle / 4) * 50;context.moveTo(startX, startY);//繪制了花瓣context.bezierCurveTo(cp1X, cp1Y, cp2X, cp2Y, startX, startY);context.fillStyle = petalColor;context.fill();//花徑context.moveTo(x, y + 10);context.lineTo(x, y + 60);context.stroke();context.strokeStyle = 'DarkCyan'; // 設(shè)置顏色}}// 調(diào)用函數(shù)進(jìn)行繪制drawFlower(200, 200, 6, "green", "red");drawFlower(250, 300, 8, "green", "red");</script>
</body>
</html>
花2、先給出運(yùn)行效果圖：
源碼如下：
<!DOCTYPE html>
<html>
<head><title>Canvas繪制花朵</title><style>canvas {border: 1px solid black;}</style>
</head>
<body><canvas id="myCanvas" width="800" height="600"></canvas><script>// 繪制花朵：x和y定義了花朵中心的位置，radius花朵的半徑，petalCount花瓣的數(shù)量，petalColor花瓣的顏色，centerColor花朵中心的顏色。function drawFlower(x, y, radius,petalCount, petalColor, centerColor) {var canvas = document.getElementById("myCanvas");var context = canvas.getContext("2d");context.lineWidth = 2;context.strokeStyle = "pink";//花瓣context.fillStyle = petalColor;for (var i = 0; i < petalCount; i++) {context.beginPath();var angle = (2 * Math.PI / petalCount) * i;var petalX = x + Math.cos(angle) * radius;var petalY = y + Math.sin(angle) * radius;context.arc(petalX, petalY, radius, 0, 2 * Math.PI);context.stroke();context.fill();}//花蕊context.beginPath();context.fillStyle = centerColor;context.arc(x, y, radius, 0, 2 * Math.PI);context.stroke();context.fill();//葉子context.beginPath();context.fillStyle = "green";context.arc(x, y + 3 * radius, radius*1.5, 0, Math.PI, false);context.closePath();context.fill();context.beginPath();context.fillStyle = "white"; // 使用白色來覆蓋原有的大半圓，形成月牙形context.arc(x, y + 2.7 * radius, radius*1.5, 0, Math.PI, false);context.closePath();context.fill();//花徑context.beginPath();context.lineWidth = radius/10; // 設(shè)置線寬context.strokeStyle = 'DarkCyan'; // 設(shè)置顏色context.moveTo(x, y + radius);context.lineTo(x, y + 6 * radius);context.stroke();}// 調(diào)用函數(shù)進(jìn)行繪制drawFlower(500, 250, 30, 4,"#ED6E91", "#f90");drawFlower(250, 300, 8, 6, "pink", "red");</script>
</body>
</html>
二、畫樹
樹1、先給出運(yùn)行效果圖：
源碼如下：
<!DOCTYPE html>
<html>
<head><title>Canvas繪制樹</title><style>canvas {border: 1px solid black;}</style>
</head>
<body><canvas id="myCanvas" width="800" height="600"></canvas><script>var canvas = document.getElementById("myCanvas");var context = canvas.getContext("2d");// 繪制樹function drawTree(x, y, len, angle, branchWidth) {context.beginPath();context.save();context.strokeStyle = "#8B4513";context.fillStyle = "brown";context.lineWidth = branchWidth;context.translate(x, y);context.rotate(angle * Math.PI / 180);context.moveTo(0, 0);context.lineTo(0, -len);context.stroke();if (len < 10) {context.beginPath();context.arc(0, -len, 5, 0, Math.PI * 2, false); // 樹葉context.fillStyle = "green";context.fill();context.restore();return;}drawTree(0, -len, len * 0.8, angle - 15, branchWidth * 0.8);drawTree(0, -len, len * 0.8, angle + 15, branchWidth * 0.8);context.restore();}// 調(diào)用函數(shù)進(jìn)行繪制drawTree(400, 600, 90, 0, 12);</script>
</body>
</html>
說明：繪制樹的函數(shù)drawTree(x, y, len, angle, branchWidth)，其中參數(shù)的含義
x 和 y 參數(shù)是樹枝的起始點(diǎn)的坐標(biāo)。在最開始的調(diào)用中，這個(gè)坐標(biāo)通常是樹的基部。在遞歸調(diào)用中，這個(gè)坐標(biāo)是新的樹枝的起點(diǎn)，也就是上一級(jí)樹枝的終點(diǎn)。
len 參數(shù)是樹枝的長度。在每次遞歸調(diào)用中，這個(gè)長度會(huì)減小一些，表示新的樹枝比上一級(jí)的樹枝短一些。
angle 參數(shù)是樹枝的角度。在最開始的調(diào)用中，這個(gè)角度通常是 0，表示樹直立。在遞歸調(diào)用中，這個(gè)角度會(huì)有所改變，表示新的樹枝相對(duì)于上一級(jí)的樹枝有一個(gè)角度。
branchWidth 參數(shù)是樹枝的寬度。在每次遞歸調(diào)用中，這個(gè)寬度會(huì)減小一些，表示新的樹枝比上一級(jí)的樹枝細(xì)一些。
這個(gè)函數(shù)首先會(huì)在給定的起點(diǎn)和角度處繪制一段長度和寬度為給定值的樹枝，然后在這個(gè)樹枝的終點(diǎn)處遞歸地繪制兩個(gè)新的樹枝，這兩個(gè)新的樹枝的角度分別向左和向右偏移一定的角度。這個(gè)過程一直進(jìn)行，直到樹枝的長度小于一個(gè)給定的閾值（在這個(gè)例子中是 10）。當(dāng)達(dá)到閾值時(shí)，繪制一個(gè)綠色的小圓形表示樹葉。
樹2、是對(duì)樹1，添加花朵。先給出運(yùn)行效果圖：
源碼如下：
<!DOCTYPE html>
<html>
<head><title>Canvas繪制樹</title><style>canvas {border: 1px solid black;}</style>
</head>
<body><canvas id="myCanvas" width="800" height="600"></canvas><script>var canvas = document.getElementById("myCanvas");var context = canvas.getContext("2d");// 繪制樹function drawTree(x, y, len, angle, branchWidth) {context.beginPath();context.save();context.strokeStyle = "#8B4513";context.fillStyle = "brown";context.lineWidth = branchWidth;context.translate(x, y);context.rotate(angle * Math.PI / 180);context.moveTo(0, 0);context.lineTo(0, -len);context.stroke();if (len < 10) {context.beginPath();context.arc(0, -len, 5, 0, Math.PI * 2, false); // 樹葉context.fillStyle = "green";context.fill();context.restore();return;}drawTree(0, -len, len * 0.8, angle - 15, branchWidth * 0.8);drawTree(0, -len, len * 0.8, angle + 15, branchWidth * 0.8);context.restore();}// 繪制花朵function drawFlower(x, y, petalCount, petalColor, centerColor) {// 繪制花朵的中心context.beginPath();context.arc(x, y, 8, 0, Math.PI * 2, true);context.fillStyle = centerColor;context.fill();var angle = (Math.PI * 2) / petalCount;for (var i = 0; i < petalCount; i++) {context.beginPath();var startX = x + Math.cos(angle * i) * 10;var startY = y + Math.sin(angle * i) * 10;var cp1X = x + Math.cos(angle * i - angle / 4) * 30;var cp1Y = y + Math.sin(angle * i - angle / 4) * 30;var cp2X = x + Math.cos(angle * i + angle / 4) * 30;var cp2Y = y + Math.sin(angle * i + angle / 4) * 30;context.moveTo(startX, startY);context.bezierCurveTo(cp1X, cp1Y, cp2X, cp2Y, startX, startY);context.fillStyle = petalColor;context.fill();}}// 調(diào)用函數(shù)進(jìn)行繪制drawTree(400, 600, 90, 0, 12);drawFlower(400, 250, 6, "DeepPink", "red");drawFlower(250, 400, 6, "DeepPink", "red");drawFlower(550, 400, 6, "DeepPink", "red");</script>
</body>
</html>
附錄
更多例子可見：https://blog.csdn.net/cnds123/article/details/112392014
關(guān)于 HTML的元素、標(biāo)簽和屬性 是什么，可見https://blog.csdn.net/cnds123/article/details/125745562