|
canvas 最早由Apple引入WebKit,用于Mac OS X 的 Dashboard,后来又在Safari和Google Chrome被实现。 基于 Gecko 1.8的浏览器,比如 Firefox 1.5, 同样支持这个元素。 元素是WhatWG Web applications 1.0规范的一部分,也包含于HTML 5中。
（一）什么是Canvas？
HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。 画布是一个矩形区域，您可以控制其每一像素。 canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
（二）绘图步骤
把canvas绘制图像想象成用电脑的画图工具绘制图像。和画图一样，canvas绘制需要以下几个步骤：
1.准备画布
1.1) 画布默认颜色为白色1.2) 画布默认大小为300*1501.3) 设置画布的大小，直接在元素上设置，不建议使用style设置 2.准备绘制工具箱 --就好比画图中的绘制工具栏
2.1）获取元素2.2) 获取上下文–即绘制工具箱 3.利用工具箱绘制（这里只讲使用直线绘制图形相关）
3.1) 移动画笔3.2) 绘制图形路径3.3) 描边 ---- 给路径上色3.4) 填充
（三）Canvas初体验
1.创建Canvas元素
在 HTML5 页面添加 canvas 元素。设置元素的宽度和高度：
2.明确Canvas坐标系
3.通过JavaScript来绘制
// 1.获取元素
let myCanvas=document.querySelector('canvas');
// 2.获取上下文 绘制工具箱
let ctx=myCanvas.getContext('2d');
// 3.设置起始位置 移动画笔 -默认在左上角
ctx.moveTo(200,200);
// 4.绘制直线（轨迹，绘制路径）
ctx.lineTo(400,200);
ctx.lineTo(400,400);
ctx.lineTo(200,400);
ctx.lineTo(200,200);
// 5.描边
ctx.stroke();
（四）Canvas的基本使用
1.路径的概念2.路径的绘制
stroke() 描边fill() 填充 3.闭合路径
手动闭合closePath() 程序闭合 4.非零环绕规则填充（上一篇博客详细说了一下这个规则非零环绕）5.开启新路径 beginPath() 6.设置样式
lineWidth 线宽，默认1pxlineCap 线末端类型：(butt默认)、round、squarelineJoin 相交线的拐点 miter(默认)、round、bevelstrokeStyle 线的颜色fillStyle 填充颜色setLineDash() 设置虚线getLineDash() 获取虚线宽度集合lineDashOffset 设置虚线偏移量（负值向右偏移）
（五）实例
需明确下面几点：
默认的线条宽度是1px默认的线条颜色是黑色但是实际绘制出来会发现绘制的线条宽度2px ,颜色偏灰色，即线条模糊失真产生原因：以坐标轴来显示线条 1刻度表示1px 按理来说 1px的直线应该就显示在1刻度之内。但是实际上这个1px的线条是以刻度为中心点显示，即1刻度内只显示了0.5px,还有0.5px在下一个刻度内显示。 相当于1px占据了2px,且每个刻度中只占据了一半的位置，不够饱和。因此就会出现线条稍粗一点( 2px) 且颜色呈灰色而非黑色(颜色不饱和)。如下图：  解决办法：将目标位置前后移动0.5px 即让1px填满饱和
1.平行线绘制
canvas
canvas{
border: 1px solid #cc6600;
/*如果在样式中设置画布大小，会导致画图中的内容比如线条比率性放大。即在这里设置画布的大小并不能改变画布本身的大小，而是相当于将画布整体放大缩小*/
}
let myCanvas=document.querySelector('canvas');
let ctx =myCanvas.getContext('2d') /*使用webgl来绘制3D图像*/
//修改前：
// ctx.moveTo(200,200);
// ctx.lineTo(400,200);
//
// ctx.moveTo(200,400);
// ctx.lineTo(400,400);
//修改后：
ctx.moveTo(200,200.5);
ctx.lineTo(400,200.5);
ctx.moveTo(200,400.5);
ctx.lineTo(400,400.5);
ctx.stroke();
// 问题：
// 默认的线条宽度是多少？ 1px
// 默认的线条颜色是什么？ 黑色
// 但是实际绘制出来会发现绘制的线条宽度2px ,颜色偏灰色
// 产生原因：以坐标轴来显示线条 1刻度表示1px 按理来说 1px的直线应该就显示在1刻度之内
// 但是实际上这个1px的线条是以刻度为中心点显示，即1刻度内只显示了0.5px,还有0.5px在下一个刻度内显示
// 即1px占据了2px,且每个刻度中只占据了一半的位置，不够饱和
// 因此就会出现线条稍粗一点 2px 且颜色呈灰色而非黑色
// 解决办法：将目标位置上下移动0.5px 即让1px填满饱和
图形的绘制都是使用JavaScript，因此下面的代码中都只放入js部分，html同上。
2.绘制三条不同颜色和宽度的平行线
let myCanvas=document.querySelector('canvas'); //获取元素对象
let ctx=myCanvas.getContext('2d');//获取上下文 工具箱
ctx.beginPath();//开启新路径 可以解决样式覆盖的问题
ctx.moveTo(100,100);
ctx.lineTo(300,100);
ctx.strokeStyle='#D29412';
ctx.lineWidth=10;
ctx.stroke();
ctx.beginPath();
ctx.moveTo(100,200);
ctx.lineTo(300,200);
ctx.strokeStyle="#B0D212";
ctx.lineWidth=20;
ctx.stroke();
ctx.beginPath();
ctx.moveTo(100,300);
ctx.lineTo(300,300);
ctx.strokeStyle="#12D294";
ctx.lineWidth=30;
ctx.stroke();
3.绘制填充三角形
let myCanvas=document.querySelector('canvas');
let ctx=myCanvas.getContext('2d');
ctx.moveTo(100,100);
ctx.lineTo(400,100);
ctx.lineTo(400,400);
// 起始点和lineTo的结束点无法完全闭合缺角， 原理同线条模糊的问题
// 因此这里不用自己手动闭合
// ctx.lineTo(100,100);
// 使用ctx自动闭合的功能
ctx.closePath();
ctx.strokeStyle="#39BE51";
ctx.lineWidth=20;
ctx.fillStyle="#39BE93";//填充颜色
ctx.stroke();
ctx.fill();//填充默认颜色为黑色
4.绘制镂空正方形
let myCanvas=document.querySelector('canvas');
let ctx=myCanvas.getContext('2d');
//====================全黑的效果============================
//画一个大的正方形300
// ctx.moveTo(100,100);
// ctx.lineTo(400,100);
// ctx.lineTo(400,400);
// ctx.lineTo(100,400);
// ctx.closePath();
//
// //一个小的正方形200
// ctx.moveTo(200,200);
// ctx.lineTo(300,200);
// ctx.lineTo(300,300);
// ctx.lineTo(200,300);
// ctx.closePath();
// ctx.fill();
//=========================================================
//=====================外黑里绿===========================
//画一个大的正方形300
/*ctx.beginPath();
ctx.moveTo(100,100);
ctx.lineTo(400,100);
ctx.lineTo(400,400);
ctx.lineTo(100,400);
ctx.closePath();
ctx.fill();
//一个小的正方形200
ctx.beginPath();
ctx.moveTo(200,200);
ctx.lineTo(300,200);
ctx.lineTo(300,300);
ctx.lineTo(200,300);
ctx.closePath();
// ctx.stroke();
ctx.fillStyle="#39BE93";
ctx.fill();*/
//=====================================================
//===========通过非零环绕规则设置镂空正方形================
ctx.moveTo(100,100);
ctx.lineTo(400,100);
ctx.lineTo(400,400);
ctx.lineTo(100,400);
ctx.closePath();
//一个小的正方形200
ctx.moveTo(200,200);
ctx.lineTo(200,300);
ctx.lineTo(300,300);
ctx.lineTo(300,200);
ctx.closePath();
ctx.fillStyle="#39BE93";
ctx.fill();
//======================================================
//什么是非零环绕原则?
//判断一块区域是否填充
//1.从这个区域拉一条直线
//2.看和这条直线相交的轨迹
//3.如果是顺时针轨迹 +1
//4.如果是逆时针轨迹 -1
//5.所有的值相加
//6.如果是非0 那么就填充
//7.如果是0 那么就不填充
5.绘制线两端样式及拐点样式
let myCanvas=document.querySelector('canvas');
let ctx=myCanvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(100,100);
ctx.lineTo(200,20);
ctx.lineTo(300,100);
ctx.strokeStyle="#39BE93";
ctx.lineWidth=20;
ctx.lineCap="butt";//线两端的样式 默认
ctx.lineJoin="miter";//拐点的样式 默认
ctx.stroke();
ctx.beginPath();
ctx.moveTo(100,250);
ctx.lineTo(200,170);
ctx.lineTo(300,250);
ctx.strokeStyle="#BE9339";
ctx.lineWidth=20;
ctx.lineCap="square";//方
ctx.lineJoin="bevel";
ctx.stroke();
ctx.beginPath();
ctx.moveTo(100,400);
ctx.lineTo(200,320);
ctx.lineTo(300,400);
ctx.strokeStyle="#A6BE39";
ctx.lineWidth=20;
ctx.lineCap="round";//圆
ctx.lineJoin="round";
ctx.stroke();
6.绘制虚线
let myCanvas=document.querySelector('canvas');
let ctx=myCanvas.getContext('2d');
ctx.moveTo(100,200);
ctx.lineTo(700,200);
//通过数组来描述虚线的排列方式 数组中只有一个值【5】===实线虚线都是5px
//数组中的数值为【20,40,60】=====实线20px 虚线40px 实线 60px 虚线20px 实现40px 虚线60px...依次类推
ctx.setLineDash([20,40,60]);
//获取虚线的排列方式 如上就是【20,40,60,20,40,60】 只要宽度足够长，会发现最终是以这一段重复排列的
console.log(ctx.getLineDash());
//虚线的偏移量 正数往左 负数往右
ctx.lineDashOffset=10;
ctx.stroke();
7.绘制从黑到白的手动渐变矩形
let myCanvas=document.querySelector('canvas');
let ctx=myCanvas.getContext('2d');
/*画矩形，可以看作一条线，且这条线的宽度很宽，即成为一个矩形*/
// ctx.moveTo(100,100);
// ctx.lineTo(355,100);
// ctx.lineWidth=50;
// ctx.stroke();
//那边要描绘一个渐变色从黑到白的矩形 首先面由线构成 线由点构成
//因此可以遍历这条线上的每个点，给每个点设置颜色
ctx.lineWidth=50;
for(let i=0;i
/*横轴画线，每一次的x值是不会变的*/
/*每次遍历改变y轴的数据 y每次都是网格的大小的倍数*/
/*加/减 0.5px ---- 让线条呈现正确的宽度和颜色*/
ctx.beginPath();
ctx.moveTo(0,i*gridSize+0.5);
ctx.lineTo(canvasWidth,i*gridSize+0.5);
ctx.strokeStyle="#6d8346";
ctx.stroke();
}
/*竖轴的同理*/
let yCount=Math.floor(canvasWidth/gridSize);
for(let j=0;j
x:150,
y:150
};
//中心点尺寸
let dottedSize=10;
//画正方形
ctx.moveTo(coordinate.x-dottedSize/2,coordinate.y-dottedSize/2);
ctx.lineTo(coordinate.x+dottedSize/2,coordinate.y-dottedSize/2);
ctx.lineTo(coordinate.x+dottedSize/2,coordinate.y+dottedSize/2);
ctx.lineTo(coordinate.x-dottedSize/2,coordinate.y+dottedSize/2);
ctx.closePath();
ctx.fill();
11.绘制完整折线图-使用构建对象的方式
//以对象的方式来实现完整折线图
//1.构造函数
//2.属性和方法
//3.初始化
//========================================
//创建构造函数
let LineChart=function (ctx) {
//绘制折线图工具
this.ctx= ctx||document.querySelector('canvas').getContext('2d');
//网格大小
this.gridSize=10;
//网格颜色
this.gridColor="#ddd";
//画布宽度
this.canvasWidth=this.ctx.canvas.width;
//画布高度
this.canvasHeight=this.ctx.canvas.height;
//坐标轴颜色
this.axisColor="#479B1E";
//三角箭头填充颜色
this.arrowColor="#479B1E";
//间隔大小
this.spaceSize=20;
//有了间距的大小就可以确认原点的坐标
this.x0=this.spaceSize;
this.y0=this.canvasHeight-this.spaceSize;
//三角大小
this.arrowSize=10;
//数据点的大小
this.dottedSize=10;
}
//方法 ===使用原型
//1.初始化方法
LineChart.prototype.init=function (data) {
this.drawGrid();
this.drawAxis();
this.drawDotted(data);
};
//2.画网格
LineChart.prototype.drawGrid=function(){
//水平方向的直线
let xCount=Math.floor(this.canvasHeight/this.gridSize);
for(let i=0;i
this.ctx.beginPath();
this.ctx.moveTo(j*this.gridSize-0.5,0);
this.ctx.lineTo(j*this.gridSize-0.5,this.canvasHeight);
this.ctx.stroke();
}
};
//3.画坐标系
LineChart.prototype.drawAxis=function(){
//x轴坐标系
this.ctx.beginPath();
this.ctx.strokeStyle=this.axisColor;
this.ctx.moveTo(this.x0,this.y0);
this.ctx.lineTo(this.canvasWidth-this.spaceSize,this.y0);
this.ctx.lineTo(this.canvasWidth-this.spaceSize-this.arrowSize,this.y0+this.arrowSize/2);
this.ctx.lineTo(this.canvasWidth-this.spaceSize-this.arrowSize,this.y0-this.arrowSize/2);
this.ctx.lineTo(this.canvasWidth-this.spaceSize,this.y0);
this.ctx.stroke();
this.ctx.fillStyle=this.arrowColor;
this.ctx.fill();
//y轴坐标系
this.ctx.beginPath();
this.ctx.moveTo(this.x0,this.y0);
this.ctx.lineTo(this.spaceSize,this.spaceSize);
this.ctx.lineTo(this.spaceSize+this.arrowSize/2,this.spaceSize+this.arrowSize);
this.ctx.lineTo(this.spaceSize-this.arrowSize/2,this.spaceSize+this.arrowSize);
this.ctx.lineTo(this.spaceSize,this.spaceSize);
this.ctx.stroke();
this.ctx.fill();
};
//4.绘制点
LineChart.prototype.drawDotted=function(data){
//注意点：
//data中的xy是canvas坐标，因此这里是要转换为相对画布的坐标
//然后进行点的绘制
//最后将每个点连成线
let _this=this;
let prevCanvasX=0;
let prevCanvasY=0;
//防止foreach方法中的函数的this指向发生改变，这里直接将this再带进去
data.forEach(function (item,index) {
//x======原点的x+data对象的x
//y======原点的y-data对象的y
let canvasX=_this.x0+item.x;
let canvasY=_this.y0-item.y;
//绘制小正方形
_this.ctx.beginPath();
_this.ctx.moveTo(canvasX-_this.dottedSize/2,canvasY+_this.dottedSize/2);
_this.ctx.lineTo(canvasX+_this.dottedSize/2,canvasY+_this.dottedSize/2);
_this.ctx.lineTo(canvasX+_this.dottedSize/2,canvasY-_this.dottedSize/2);
_this.ctx.lineTo(canvasX-_this.dottedSize/2,canvasY-_this.dottedSize/2);
_this.ctx.closePath();
_this.ctx.fill();
//连线
//判断是不是第一个点 如果是 那么连线开始位置是原点
if(index===0){
_this.ctx.beginPath();
_this.ctx.moveTo(_this.x0,_this.y0);
_this.ctx.lineTo(canvasX,canvasY);
_this.ctx.stroke();
}else {
//如果不是第一个点 那么连线的开始位置就是上一个点的位置
//因此要先保存前一个点的数据
_this.ctx.beginPath();
_this.ctx.moveTo(prevCanvasX,prevCanvasY);
_this.ctx.lineTo(canvasX,canvasY);
_this.ctx.stroke();
}
prevCanvasX=canvasX;
prevCanvasY=canvasY;
});
};
//初始化
let data=[
{
x:100,
y:100
},{
x:200,
y:150
},{
x:300,
y:240
},{
x:400,
y:350
},{
x:500,
y:80
}
];
let lineChart=new LineChart();
lineChart.init(data);
|