绘制饼图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#cvs {
border: 1px solid red;
}
</style>
</head>
<body>
<canvas width="600" height="500" id="cvs"></canvas>
<script>
//添加构造函数
function PieChart() {
//获取上下文对象
this.ctx = document.querySelector('#cvs').getContext('2d');
//确定圆心 arc(x,y,r,starangle,endangle);
this.x0 = this.ctx.canvas.width / 2 + 60;
this.y0 = this.ctx.canvas.height / 2;
//确定半径
this.radius = 150;
//确定伸出去的线的长度
this.outLine = 20;
//确定内容与画布之间的距离
this.space = 20;
//设置矩形的宽度和高度
this.rectW = 30;
this.rectH = 15;
}
//添加初始化方法
PieChart.prototype.init = function () {
this.drawPie();
}
//绘制饼图
PieChart.prototype.drawPie = function () {
//1. 转换为弧度
this.transAngle();
//2.确定起始弧度
var start = 0;
//3. for循环绘制5个扇形
for (var i = 0; i < data.length; i++) {
//3.7 下一个扇形的结束弧度==开始弧度 + 下一个扇形的弧度大小
var end = start + data[i].angle;
//3.1 开启新路径
this.ctx.beginPath();
//3.2 确定起点
this.ctx.moveTo(this.x0, this.y0);
//3.3 绘制圆弧
this.ctx.arc(this.x0, this.y0, this.radius, start, end);
//3.4 设置填充的颜色----随机颜色
var color = this.ctx.fillStyle = this.getRandomColor();
//3.5 填充颜色
this.ctx.fill();
//调用标题的方法
this.drawTitle(start, data[i].angle, color, data[i].title);
//添加描述信息
this.drawText(data[i].title, i);
//3.6 下一个扇形的开始弧度==上一个扇形的结束弧度
start = end;
}
}
//添加标题
PieChart.prototype.drawTitle = function (start, angle, color, title) {
//1. 确定从圆心伸出去的线== 半径 + 伸出去的线的长度
var length = this.radius + this.outLine;
//2. 确定伸出去的线的位置（x,y）
// 三角形的勾股定理： length：斜边
// x轴：邻边=length* cos(角度)----Math.cos()
// y轴：对边=length*sin(角度)
//3. 角度，在画布中使用的是弧度=当前扇形的起始弧度 + 对应弧度的一半
var lineX = length * Math.cos(start + angle / 2);
var lineY = length * Math.sin(start + angle / 2);
//确定伸出去的点在画布中的坐标
var outX = this.x0 + lineX;
var outY = this.y0 + lineY;
this.ctx.beginPath();
this.ctx.moveTo(this.x0, this.y0);
this.ctx.lineTo(outX, outY);
this.ctx.strokeStyle = color;
this.ctx.stroke();
//添加标题和下划线
this.ctx.font = '14px 微软雅黑';
var textWidth = this.ctx.measureText(title).width;
//判断伸出去的线在x轴正方向，还是负方向
if (outX > this.x0) {
//右边
this.ctx.lineTo(outX + textWidth, outY);
this.ctx.textAlign = 'left';
} else {
//左边
this.ctx.lineTo(outX - textWidth, outY);
this.ctx.textAlign = 'right';
}
this.ctx.stroke();
//添加文字
this.ctx.textBaseline = 'bottom';
this.ctx.fillText(title, outX, outY);
}
//添加描述信息----在画布中添加 矩形 和文字说明
PieChart.prototype.drawText = function (title, i) {
this.ctx.beginPath();
//绘制矩形：所有的x一样，y的坐标=this.space + 矩形的索引*（矩形的高度+矩形之间的距离）
this.ctx.fillRect(this.space, this.space + i * (this.rectH + 10), this.rectW, this.rectH);
//设置文本的对齐方式
this.ctx.textAlign = 'left';
//设置基线对齐
this.ctx.textBaseline = 'top';
this.ctx.fillText(title, this.space + this.rectW + 10, this.space + i * (this.rectH + 10) + 2);
}
//将数据转换为弧度的方法
PieChart.prototype.transAngle = function () {
var total = 0;
//计算总值
data.forEach(function (item, i) {
total += item.num;
});
//将数据转换成弧度数据 num/total * 2π
data.forEach(function (item, i) {
var angle = (item.num / total) * 2 * Math.PI;
//为数组中的每一个数组元素（对象）添加angle
item.angle = angle;
});
// console.log(data);
}
//随机获取颜色
PieChart.prototype.getRandomColor = function () {
var r = parseInt(Math.random() * 256);
var g = parseInt(Math.random() * 256);
var b = parseInt(Math.random() * 256);
return 'rgb(' + r + ',' + g + ',' + b + ')'
}
//创建数据，存储：年龄段和人数
var data = [
{title: '1~2岁', num: 6},
{title: '2~3岁', num: 15},
{title: '3~4岁', num: 30},
{title: '4~5岁', num: 35},
{title: '5~6岁', num: 22}
]
//实例化对象，调用原型方法
var pieChart = new PieChart();
pieChart.init();
</script>
</body>
</html>
通过方向键控制小人移动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#cvs {
border: 1px solid red;
}
</style>
</head>
<body>
<canvas width="600" height="500" id="cvs"></canvas>
<script>
function Person() {
this.ctx = document.querySelector('#cvs').getContext('2d');
//设置画布的大小
this.canvasW = this.ctx.canvas.width;
this.canvasH = this.ctx.canvas.height;
//行走的参数
this.index = 0;//横坐标的索引
this.direction = 0; //纵坐标的索引
this.step = 10; //每次走一步多少像素
this.stepX = 0;//x轴方向的偏步数
this.stepY = 0;//y轴方向的偏移步数
}
Person.prototype.init = function () {
this.loadImage();
}
//绘制小人
Person.prototype.loadImage = function () {
//1. 实例化图片对象
var img = new Image();
//2. 加载事件
img.onload = function () {
// console.log(this);
//图片的尺寸----新增属性
this.imgW = img.width;
this.imgH = img.height;
//计算小人的尺寸
this.personW = this.imgW / 4;
this.personH = this.imgH / 4;
//图片的起点
this.x0 = this.canvasW / 2 - this.personW / 2;
this.y0 = this.canvasH / 2 - this.personH / 2;
//将第一张图片展示在画布中
this.ctx.drawImage(img, 0, 0, this.personW, this.personH,
this.x0, this.y0, this.personW, this.personH);
//通过方向键控制小人的走动
document.onkeydown = function (e) {
console.log(e.keyCode);
//判断用户使用的是上下左右哪一个键 左37 上38 右39 下40
switch (e.keyCode) {
case 37:
//左
this.direction = 1;
this.stepX--;
this.move(img);
break;
case 38:
//上
this.direction = 3;
this.stepY--;
this.move(img);
break;
case 39:
//右
this.direction = 2;
this.stepX++;
this.move(img);
break;
case 40:
//下
this.direction = 0;
this.stepY++;
this.move(img);
break;
case 13:
this.direction = 1;
this.stepX--;
this.move(img);
this.direction = 0;
this.stepY++;
this.move(img);
break;
}
}.bind(this);
}.bind(this);
//3. 设置图片路径
img.src = 'image/04.png';
}
//添加行走的方法
Person.prototype.move = function (img) {
this.index++;
this.ctx.clearRect(0, 0, this.canvasW, this.canvasH);
this.ctx.drawImage(img,
this.personW * this.index, this.personH * this.direction,
this.personW, this.personH,
this.x0 + this.stepX * this.step, this.y0 + this.stepY * this.step,
this.personW, this.personH,
);
//当显示每一行的最后一个图片时，使index归0
if (this.index == 3) {
this.index = 0;
}
}
var per = new Person();
per.init();
</script>
</body>
</html>
1428
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
