/*
ctx.moveTo(100,100);
ctx.lineTo(200,100);
ctx.stroke();
ctx.strokeStyle="blueviolet";
ctx.lineWidth=10;
ctx.beginPath();
ctx.closePath();
ctx.fill();
ctx.fillStyle="lightskyblue";
ctx.lineCap="round";
ctx.lineJoin="round";
ctx.setLineDash([5,10,15]);
ctx.DashOffset=-20;//往前偏移
ctx.rect(100,100,200,100);
//绘制矩形，不是独立路径
ctx.strokeRect(100,100,200,100);
ctx.fillRect(100,100,200,100);
ctx.clearRect(100,100,200,100);
//渐变色
var linearGradient=ctx.createLinearGradient(100,100,500,300);
linearGradient.addColorStop(0,'lightskyblue');
linearGradient.addColorStop(1,'blue');
*/
绘制平行线
<style>
canvas{
border:1px solid blueviolet;
}
</style>
</head>
<body>
<canvas width="600" height="400"></canvas>
<script>
var myCanvas=document.querySelector("canvas");
var ctx=myCanvas.getContext("2d");
//画平行线
ctx.moveTo(100,100);
ctx.lineTo(200,100);
ctx.moveTo(100,200);
ctx.lineTo(200,200);
//描边
ctx.stroke();
/* 关于线条的问题
1、默认的宽度是多少 1px
2、默认的颜色是什么 黑色
产生原因 对齐的点是线的中心位置 会把线分成两个0.5px 显示的是会不饱和和增加宽度
解决方案：前后移动0.5px*/
</script>
</body>
在填充时遵循非零环绕规则
为0时填充白色
和线相关的属性和方法
ctx.lineCap="butt";
ctx.lineJoin="miter";
ctx.lineCap="square";
ctx.lineJoin="bevel";
ctx.lineCap="round";
ctx.lineJoin="round";
绘制虚线
<script>
var myCanvas=document.querySelector("canvas");
var ctx=myCanvas.getContext("2d");
//画线
ctx.moveTo(100,100.5);
ctx.lineTo(300,100.5);
//[5,10]数组是用来描述你的排列方式的
ctx.setLineDash([5,10,15]);
//获取虚线的排列方式 获取的是不重复的那一段的排列方式
console.log(ctx.getLineDash());
//如果是正值 往后偏移
//如果是负值 往前偏移
ctx.lineDashOffset=-20;
ctx.stroke();
</script>
绘制一个渐变色矩形
<script>
var myCanvas=document.querySelector("canvas");
var ctx=myCanvas.getContext("2d");
/*
* fillStyle 'blue' '#000' 'rgb()' 'rgba()'
* 也可以使用一个渐变的方案填充矩形
* 创建一个渐变的方案
* 渐变是有长度的
* x0y0 起始点 x1y1 结束点 确定长度和方向
* */
var linearGradient=ctx.createLinearGradient(100,100,500,300);
linearGradient.addColorStop(0,'lightskyblue');
// linearGradient.addColorStop(0.4,'blueviolet');
linearGradient.addColorStop(1,'blue');
ctx.fillStyle=linearGradient;
ctx.fillRect(100,100,400,100);
ctx.beginPath();
ctx.moveTo(100,300-0.5);
ctx.lineTo(500,300-0.5);
ctx.strokeStyle=linearGradient;
ctx.stroke();
//lightskyblue-->blueviolet-->blue
//回想线性渐变--->要素 方向 起始颜色 结束颜色
//通过两个点的坐标可以控制渐变方向
</script>
绘制折线图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
canvas{
border:1px solid lightskyblue;
}
</style>
</head>
<body>
<canvas width="600" height="400"></canvas>
<script>
//1、构造函数
var lineChart=function (ctx) {
//获取绘图工具
this.ctx=ctx||document.querySelector("canvas").getContext("2d");
//画布的大小
this.canvasWidth=this.ctx.canvas.width;
this.canvasHeight=this.ctx.canvas.height;
//网格的大小
this.gridSize=10;
//坐标系的间距
this.space=20;
//坐标原点
this.x0=this.space;
this.y0=this.canvasHeight-this.space;
//箭头的大小
this.arrowSize=10;
//点的大小
this.dottedSize=6;
//点的坐标 和数据有关系 数据可视化
};
//2、行为方法
lineChart.prototype.init=function (data) {
this.drawGrid();
this.drawAxis();
this.drawDotted(data);
};
//绘制网格
lineChart.prototype.drawGrid=function () {
//x方向的线
var lineTotal=Math.floor(this.canvasHeight/this.gridSize);
this.ctx.strokeStyle="lightskyblue";
for(var i=0;i<=lineTotal;i++){
this.ctx.beginPath();
this.ctx.moveTo(0,this.gridSize*i-0.5);
this.ctx.lineTo(this.canvasWidth,this.gridSize*i-0.5);
this.ctx.stroke();
}
//y轴方向的线
lineTotal=Math.floor(this.canvasWidth/this.gridSize);
for(var i=0;i<=lineTotal;i++){
this.ctx.beginPath();
this.ctx.moveTo(this.gridSize*i-0.5,0);
this.ctx.lineTo(this.gridSize*i-0.5,this.canvasHeight);
this.ctx.stroke();
}
};
//绘制坐标系
lineChart.prototype.drawAxis=function () {
//X轴
this.ctx.beginPath();
this.ctx.strokeStyle="#000";
this.ctx.moveTo(this.x0,this.y0);
this.ctx.lineTo(this.canvasWidth-this.space,this.y0);
this.ctx.lineTo(this.canvasWidth-this.space-this.arrowSize,this.y0-this.arrowSize/2);
this.ctx.lineTo(this.canvasWidth-this.space-this.arrowSize,this.y0+this.arrowSize/2);
this.ctx.lineTo(this.canvasWidth-this.space,this.y0);
this.ctx.stroke();
this.ctx.fill();
//Y轴
this.ctx.moveTo(this.x0,this.y0);
this.ctx.lineTo(this.x0,this.space);
this.ctx.lineTo(this.space-this.arrowSize/2,this.space+this.arrowSize);
this.ctx.lineTo(this.space+this.arrowSize/2,this.space+this.arrowSize);
this.ctx.lineTo(this.x0,this.space);
this.ctx.stroke();
this.ctx.fill();
};
//绘制所有点
lineChart.prototype.drawDotted=function (data) {
//数据的坐标，需要转换canvas坐标
//再进行点的绘制
//把线连起来
var that=this;
//记录上一次的坐标
var preCanvasX=that.x0;
var preCanvasY=that.y0;
data.forEach(function (item,i) {
//x=原点坐标+数据的坐标
//y=原点的坐标-数据的坐标
var canvasX=that.x0+item.x;
var canvasY=that.y0-item.y;
//绘制点
that.ctx.beginPath();
that.ctx.moveTo(canvasX-that.dottedSize/2,canvasY-that.dottedSize/2);
that.ctx.lineTo(canvasX+that.dottedSize/2,canvasY-that.dottedSize/2);
that.ctx.lineTo(canvasX+that.dottedSize/2,canvasY+that.dottedSize/2);
that.ctx.lineTo(canvasX-that.dottedSize/2,canvasY+that.dottedSize/2);
that.ctx.closePath();
that.ctx.fill();
//点的连线
//当是第一个点的时候，起点是(x0,y0)
//当不是第一个点的时候，起点是上一个点
that.ctx.beginPath();
that.ctx.moveTo(preCanvasX,preCanvasY);
that.ctx.lineTo(canvasX,canvasY);
preCanvasX=canvasX;
preCanvasY=canvasY;
that.ctx.stroke();
});
};
//初始化
var data=[
{
x: 100,
y: 120
},
{
x: 200,
y: 140
},
{
x: 300,
y: 240
},
{
x: 400,
y: 120
},
{
x: 500,
y: 80
}
];
var line=new lineChart();
line.init(data);
</script>
</body>
</html>
