用原生js手写 canvas饼状图_js画饼状图

作者：小丑西瓜9 | 2024-02-23 01:15:50

踩

js画饼状图

一、canvas是什么？

百度的定义：Canvas 通过 JavaScript 来绘制 2D图形。Canvas 是逐像素进行渲染的。开发者可以通过javascript脚本实现任意绘图。百度上的定义基本描述的什么是canvas，然而要补充的一点是，canvas现在只能支持2d渲染，它最早是由苹果在webkit的浏览器使用到canvas，由于实用性，逐渐被各个浏览器所支持，二、canvas本身就只能用js语言来编写，jquery是不支持的。

二、绘制饼状图

1、原生js实现饼状图（效果图）

2、原生代码（可以在任何电脑直接运行）


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>饼状图</title>
	</head>
	<style>
		canvas{
			margin-left:300px;
			margin-top: 50px;
			border: 1px solid gray;
		}
	</style>
	<body>
		<div>
			<canvas width="650" height="400"></canvas>
		</div>
	</body>
	<script>
		window.onload = function(){
			function PieChart(ctx,radius){
			this.ctx = ctx||document.querySelector("canvas").getContext("2d");
			this.width = this.ctx.canvas.width;
			this.height = this.ctx.canvas.height;
			this.x0 = this.width/2+100;
			this.y0 = this.height/2;
			this.radius = radius;
			this.outLong = radius/8;
			this.dicX = 50;
			this.dicY = 50;
			this.dicWidth = 40;
			this.dicHeight = 14;
			this.spanY = 25;
			};
			PieChart.prototype.init = function(data){
				this.drawPie(data);
			};
			PieChart.prototype.drawPie = function(data){
				//转化后带有弧度

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小丑西瓜9/article/detail/132625