用原生js手写 canvas饼状图

最新推荐文章于 2022-07-05 16:00:56 发布

Gzp-木子李

最新推荐文章于 2022-07-05 16:00:56 发布

阅读量4.7k

点赞数 7

分类专栏： html

本文链接：https://blog.csdn.net/Toomeout/article/details/86073336

版权

一、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){
				//转化后带有弧度的数据
				va

最低0.47元/天解锁文章

Gzp-木子李

关注

7
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
用原生js手写 canvas饼状图

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

扫一扫