使用canvas畫柱狀圖

時間 2019-11-24

標籤使用 canvas 柱狀简体版

原文原文鏈接

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>柱狀圖</title>
	<style>
		canvas{
			/*下邊框 左邊框 分別表明統計圖的兩個軸線*/
			border-left:1px solid #222;
			border-bottom:1px solid #222;
		}
	</style>
	<script>
		window.onload = function(){
			// 1.獲取canvas元素
			var canvas = document.getElementById('canvas');
			//2.2d上下文
			var context = canvas.getContext('2d');
			//3.設置樣式
			context.fillStyle = 'skyblue';
			//4.繪製
			context.fillRect(20,400-300,60,300);
			context.fillStyle = "pink";
			context.fillRect(100,400-140,60,140);
			context.fillStyle = 'orange';
			context.fillRect(180,400-230,80,230);
			context.fillStyle = 'gold';
			context.fillRect(280,400-100,60,100);
			context.clearRect(180+(80-30)/2,400-((230-30)/2+30),30,30);
		}
	</script>
</head>
<body>
	<canvas id="canvas" width="400px" height="400px">
		瀏覽器不支持
	</canvas>
</body>
</html>

1. 使用AChartEngine畫柱狀圖
2. 經過Html5 Canvas畫柱狀圖
3. canvas圖表(1) - 柱狀圖
4. python畫柱狀圖-python 使用 matplotlib.pyplot來畫柱狀圖和餅圖
5. matlab畫柱狀圖
6. python畫柱狀圖
7. Python 畫柱狀圖
8. 使用echarts畫簡單的柱狀圖
9. 使用ZedGraph畫曲線柱狀圖
10. 使用seaborn畫堆積柱狀圖
更多相關文章...
• TortoiseSVN 使用教程 - SVN 教程
• Docker 容器使用 - Docker教程
• Composer 安裝與使用
• 使用Rxjava計算圓周率

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。