二、uniapp发布
1.H5
1.manifest.json 基础设置--uniapp的appid
2.在manifest.json ，H5配置，设置运行基础路径
3.发行--PC/H5，填写网站域名，标题，点击发行即可
4.上传部署H5
2.微信小程序
1.manifest.json ，微信小程序--设置appid
2.查看当前包的大小，设置小程序基本信息，服务器地址部署
3.点击发行--微信小程序
4.在微信开发者工具进行上传代码
3.android
1.manifest.json 设置图标，名称，版本
2.点击发行--app云打包
3.生成获取 android 自由证书
4.打包
三、数据可视化
1数据可视化概述
数据可视化Data Visualization:就是指将结构或非结构数据转换成适当的可视化图表，然后将隐藏在数据中的信息直接展现于人们面前。
结构： mysql
非结构： mongodb
2应用场景
(1)媒体大屏
(2)接待大屏
(3)监控大屏
(4)科技大屏
(5)各种类型图表
3数据可视化工具
（1）绘图容器
canvas（重点）、svg（了解）
（2）绘图工具
echarts.js (重点)
d3.js (了解)
hightcharts.js
charts.js
4工具的区别
（1）canvas vs svg
Canvas 位图
(1)依赖分辨率
(2)不支持事件处理器
(3)弱的文本渲染能力
(4)能够以 .png 或 .jpg 格式保存结果图像
(5)适合做游戏
SVG 矢量图 xml 标签结构
(1)不依赖分辨率
(2)支持事件处理器
(3)最适合带有大型渲染区域的应用程序（比如谷歌地图）
(4)不适合游戏应用
（2）Echarts.js、D3.js、Highcharts.js的区别
Echarts.js:百度商业前端数据可视化团队研发的图表库,免费开源，国内用户偏多
highcharts:是国外的一家公司开发的图表库，主要采用svg画图。
D3:通过svg来绘制图形，偏底层，太底层，学习成本大
四、认识Canvas
1Canvas概述
Canvas标签用于绘制图形的 HTML 元素,canvas元素本身并没有绘制能力,它仅仅是图形的容器,通常通过JavaScript脚本进行绘制。canvas最早由Apple引入WebKit，用于MacOSX的Dashboard，随后被各个浏览器实现。如今，所有主流的浏览器都支持它。
2应用场景
图表,游戏
3浏览器支持
Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 及其属性和方法。
注释：Internet Explorer 8 以及更早的版本不支持 元素。
4canvas标签
<body>
<!--
canvas本身是没有绘图能力，需要js进行绘制图形
canvas:
默认大小： 宽度 300px 高度 150px
改变容器大小：
1.直接在标签上使用属性
2.使用style设置宽高 （不建议使用）
3. 使用js进行修改
-->
<!-- <canvas id="canvas" width="400px" height="400px"></canvas> -->
<canvas id="canvas"></canvas>
<script>
var canvas = document.getElementById("canvas");
// console.log(canvas)
canvas.width = 400;
canvas.height = 400;
</script>
</body>
5canvas上下文对象
var ctx = canvas.getContext("2d");
6检查浏览器支持
在标签中提供替换内容。不支持的浏览器将会忽略容器并在其中渲染后备内容。而支持的浏览器将会忽略在容器中包含的内容，并且只是正常渲染
<canvas id="canvas">
<!-- 加提示信息,如果浏览器不支持，则显示中间文本内容 -->
您的浏览器版本过低，请更换或者升级浏览器
<a href="http://www.baidu.com">谷歌下载地址</a>
</canvas>
7检查编程支持
<script>
var canvas = document.getElementById("canvas");
// console.log(canvas)
canvas.width = 400;
canvas.height = 400;
// 获取canvas上下文对象
var ctx = canvas.getContext("2d");
if(canvas.getContext){
// 绘制图形
}else{
// 不支持
}
</script>
tips1
五、线条操作
1画布栅格及坐标空间
(1)canvas元素默认被网格所覆盖。通常来说网格中的一个单元相当于canvas元素中的一像素。
(2)栅格的起点为左上角[坐标为(0,0)]所有元素的位置都相对于原点定位。
2线条相关属性及方法
moveTo(x,y) 把路径移动到画布中的指定点，不创建线条。
lineTo(x,y) 添加一个新点,绘制一条从当前位置到指定新点(x,y)位置的直线。
strokeStyle 设置或返回描边颜色
fillStyle 设置或返回填充颜色
stroke() 描边已定义绘图（路径） border
fill() 填充当前绘图（路径） background
lineWidth 设置或返回当前的线条宽度
lineJoin 设置或返回两条线相交时，所创建的拐角类型 （了解）
lineCap 设置或返回线条的结束端点样式 （了解）
代码案例
（1）绘制一条直线
var ctx = canvas.getContext("2d");
// 1.绘制一条直线
ctx.moveTo(50,100);//起始点 x,y
ctx.lineTo(200,100);//目标点 x,y
ctx.stroke(); //描边
（2）绘制一个三角形
// 2.绘制三角形
ctx.beginPath(); //开启路径
ctx.lineWidth = 10; //线宽
ctx.strokeStyle="aquamarine";// 描边颜色
ctx.fillStyle ="chocolate";// 填充
ctx.moveTo(50,100);//起始点 x,y
ctx.lineTo(200,100);//目标点 x,y
ctx.lineTo(200,250);//目标点 x,y
// ctx.lineTo(50,100)
ctx.closePath();//闭合路径
// ctx.stroke(); //描边
ctx.fill();//填充
（3）线条样式
3绘制路径
beginPath() 新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径。生成路径的第一步叫beginPath()。
closePath() 闭合路径之后图形绘制命令又重新指向到上下文中。不是必需的。
代码案例
ctx.beginPath();
ctx.lineWidth=15;
ctx.moveTo(50,100)
ctx.lineTo(200,100);
ctx.stroke()
ctx.beginPath(); // 给当前路径添加作用域的
ctx.lineWidth=5;
ctx.lineCap="round"
ctx.moveTo(50,150)
ctx.lineTo(200,150);
ctx.stroke()
tips2
六、绘制坐标轴，折线图案例
代码示例：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>canvas使用</title>
<style>
#canvas{
/* border: 1px solid #f00; */
background-color: #ddd;
}
</style>
</head>
<body>
<canvas id="canvas">
<!-- 加提示信息,如果浏览器不支持，则显示中间文本内容 -->
您的浏览器版本过低，请更换或者升级浏览器
<a href="http://www.baidu.com">谷歌下载地址</a>
</canvas>
<script>
var canvas = document.getElementById("canvas");
canvas.width = 600;
canvas.height = 400;
var gridW = 20;
// 获取canvas上下文对象
var ctx = canvas.getContext("2d");
if(canvas.getContext){
// 1.计算绘制横向及竖线的个数
var lineX = canvas.height / gridW;
var lineY = canvas.width / gridW;
// 2.绘制横向
for(var i=0;i<lineX;i++){
ctx.beginPath();
ctx.strokeStyle="#fff";
ctx.moveTo(0,i*gridW);// 0 -20 -40 -60
ctx.lineTo(600,i*gridW);
ctx.stroke();
}
// 3.绘制竖线
for(var i=0;i<lineY;i++){
ctx.beginPath();
ctx.strokeStyle="#fff";
ctx.moveTo(i*gridW,0);// 0 -20 -40 -60
ctx.lineTo(i*gridW,400);
ctx.stroke();
}
// 4.绘制X轴坐标
ctx.beginPath();
ctx.strokeStyle="black";
ctx.lineWidth=2;
ctx.moveTo(20,380);
ctx.lineTo(580,380);
ctx.stroke()
ctx.beginPath();
ctx.moveTo(580,375);
ctx.lineTo(590,380);
ctx.lineTo(580,385);
ctx.closePath()
ctx.fill();
// 5.绘制y轴坐标
ctx.beginPath();
ctx.strokeStyle="black";
ctx.lineWidth=2;
ctx.moveTo(20,380);
ctx.lineTo(20,20);
ctx.stroke()
ctx.beginPath();
ctx.moveTo(15,20);
ctx.lineTo(20,10);
ctx.lineTo(25,20);
ctx.closePath()
ctx.fill();
// 6.绘制折线
ctx.beginPath();
ctx.lineWidth=1;
ctx.moveTo(40,240);
ctx.lineTo(100,180);
ctx.lineTo(180,80);
ctx.stroke();
}else{
// 不支持
}
</script>
</body>
</html>
tips3
七、绘制图形
1绘制矩形
语法：
1.使用moveTO lineTo
2.rect()
3.fillRect()
4.strokeRect()
清空矩形区域：
ctx.clearRect(0,0,400,400);// 清空指定区域内容
<script>
var canvas = document.getElementById("canvas");
canvas.width = 400;
canvas.height = 400;
var gridW = 20;
// 获取canvas上下文对象
var ctx = canvas.getContext("2d");
if(canvas.getContext){
// 1.rect绘制举行
// ctx.beginPath();
// ctx.lineWidth=4;
// ctx.strokeStyle="chocolate";
// ctx.fillStyle="cadetblue"
// ctx.rect(50,50,100,100);
// ctx.stroke();
// ctx.fill()
// 2.使用strokeRect进行绘制
// ctx.beginPath();
// ctx.strokeRect(200,50,100,100)
// 3.使用fillRect()
// ctx.beginPath();
// ctx.fillRect(50,200,100,100)
ctx.beginPath();
ctx.lineWidth=4;
ctx.strokeStyle="chocolate";
ctx.rect(50,50,100,100);
ctx.stroke();
setTimeout(()=>{
ctx.clearRect(0,0,400,400);// 清空指定区域内容
ctx.beginPath();
ctx.lineWidth=4;
ctx.strokeStyle="chocolate";
ctx.rect(80,80,100,100);
ctx.stroke();
},3000)
}else{
// 不支持
}
</script>
2绘制圆、圆弧和扇形
语法：
arc(cx,cy,r,sAngle,eAngle,绘制方向)
cx，cy，r 圆心和半径
sAngle,eAngle 开始弧度，结束弧度
绘制方向 ：顺时针false 逆时针 true 默认值false
角度转换弧度公式： 角度/180*Math.PI；
钟表的三点钟方向为0度
代码案例：
<script>
var canvas = document.getElementById("canvas");
canvas.width = 400;
canvas.height = 400;
var gridW = 20;
// 获取canvas上下文对象
var ctx = canvas.getContext("2d");
const PI = Math.PI;
if(canvas.getContext){
// 1.绘制圆形
// ctx.beginPath()
// ctx.fillStyle="chocolate"
// ctx.arc(200,200,100,0/180*Math.PI,360/180*Math.PI,false);
// ctx.fill()
// ctx.stroke();
// 2.弧形
// ctx.beginPath()
// // ctx.arc(200,200,100,0,90/180*PI,false); // 顺时针绘制
// // ctx.arc(200,200,100,0,90/180*PI,true); // 逆时针绘制
// ctx.arc(200,200,100,0,-90/180*PI,true); // 逆时针绘制
// ctx.stroke();
// 3.扇形
// ctx.beginPath()
// ctx.moveTo(100,100);
// ctx.arc(200,200,100,0,90/180*PI,false);
// ctx.closePath()
// ctx.stroke()
// ctx.fill()
// 4.绘制直线
ctx.beginPath()
ctx.moveTo(200,200);
ctx.arc(200,200,100,6/180*PI,6/180*PI,false);
ctx.closePath()
ctx.stroke()
}else{
// 不支持
}
</script>
tips4
八、绘制文本
语法:
font 设置字体 及大小 fillText填充绘制 strokeText 描边绘制 textAlign
代码案例：
<script>
var canvas = document.getElementById("canvas");
canvas.width = 400;
canvas.height = 400;
var gridW = 20;
// 获取canvas上下文对象
var ctx = canvas.getContext("2d");
const PI = Math.PI;
if(canvas.getContext){
var str = "你好，世界";
ctx.font = "30px 楷体";
ctx.fillStyle="chocolate"
ctx.fillText(str,0,30)
ctx.textAlign="left"
ctx.strokeStyle="chocolate"
ctx.strokeText(str,0,70);
}else{
// 不支持
}
</script>
九、绘制图像
1.drawImage(img,x,y)
2.drawImage(img,x,y,w,h)
3.drawImage(img,cx,cy,cw,ch,x,y,w,h)
代码案例：
<script>
var canvas = document.getElementById("canvas");
canvas.width = 400;
canvas.height = 400;
// 获取canvas上下文对象
var ctx = canvas.getContext("2d");
if(canvas.getContext){
// 1.三个参数
var img = new Image();
img.src = "./1.jpg";
// img.onload = function(){
// ctx.drawImage(img,100,100)
// }
// 2.五个参数
// img.onload = function(){
// ctx.drawImage(img,100,100,100,100)
// }
var num =0;
var step =0; // 0 185 370。。。
img.onload = function(){
setInterval(()=>{
ctx.clearRect(0,0,400,400)
step = num * 185;
ctx.drawImage(img,step,0,185,310,100,50,185,310);
num++;
if(num >7){
num = 0;
}
},20)
}
}else{
// 不支持
}
</script>
tips5
十、贝塞尔曲线
1贝塞尔曲线概述
贝塞尔曲线(Bézier curve)，又称贝兹曲线或贝济埃曲线，是应用于二维图形应用程序的数学曲线。一般的矢量图形软件通过它来精确画出曲线，贝兹曲线由线段与节点组成，节点是可拖动的支点，线段像可伸缩的皮筋，我们在绘图工具上看到的钢笔工具就是来做这种矢量曲线的。
线上演示地址：http://wx.karlew.com/canvas/bezier/
2应用场景
加入购物车、xmind联系功能
3.二次贝塞尔曲线
quadraticCurveTo(cp1x, cp1y, x, y) 绘制二次贝塞尔曲线，cp1x,cp1y为一个控制点，x,y为结束点。
代码案例
<script>
var canvas = document.getElementById("canvas");
canvas.width = 400;
canvas.height = 400;
// 获取canvas上下文对象
var ctx = canvas.getContext("2d");
if(canvas.getContext){
ctx.strokeStyle = "#000";
ctx.lineWidth = 2;
var y = 95;
for(var i=0;i<10;i++){
ctx.beginPath();
ctx.moveTo(80, 180); // 起始点
ctx.quadraticCurveTo(135, y, 280, 180); // 控制点 结束点
ctx.stroke();
y+=20;
}
}else{
// 不支持
}
</script>
4三次方贝塞尔曲线(波动线)
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)绘制三次贝塞尔曲线，cp1x,cp1y为控制点一，cp2x,cp2y为控制点二，x,y为结束点。
代码案例
<script>
var canvas = document.getElementById("canvas");
canvas.width = 400;
canvas.height = 400;
var maxY = 348;
var minY = 34;
var move1 = 1; //第一个控制点的方向 1向下运行 0 向上运行
var move2 = 0; //第二个控制点的方向 1向下运行 0 向上运行
// 获取canvas上下文对象
var ctx = canvas.getContext("2d");
if(canvas.getContext){
ctx.strokeStyle = "#1572b5";
ctx.lineWidth = 2;
setInterval(()=>{
ctx.clearRect(0,0,400,400)
ctx.beginPath();
ctx.moveTo(94, 180); // 开始点
ctx.bezierCurveTo(203, minY, 249, maxY, 376, 184); // 第一个控制点 第二个控制点 结束点
ctx.stroke();
if(move1 == 1){
minY++;
if(minY >= 348){
move1 =0
}
}else{
minY--;
if(minY <= 34){
move1 =1
}
}
if(move2 == 1){
maxY++;
if(maxY >= 348){
move2 =0
}
}else{
maxY--;
if(maxY <= 34){
move2 =1
}
}
},5)
}else{
// 不支持
}
</script>
十一、canvas渐变（了解）
1渐变概述
渐变是一种有规律性的变化,渐变色是指某个物体的颜色从明到暗,或由深转浅,或是从一个色彩缓慢过渡到另一个色彩。
2渐变的使用场景
处理图表、处理文字、处理图片、用做背景；
3线性渐变
createLinearGradient线性渐变。
代码案例
<script>
var canvas = document.getElementById("canvas");
canvas.width = 400;
canvas.height = 400;
// 获取canvas上下文对象
var ctx = canvas.getContext("2d");
if(canvas.getContext){
// createLinearGradient线性渐变。
// x0，y0 渐变的开始坐标 x1 y1 渐变的结束坐标
// var lg = ctx.createLinearGradient(50,50,200,50)
// var lg = ctx.createLinearGradient(50,50,50,200)
var lg = ctx.createLinearGradient(50,50,200,200)
lg.addColorStop("0","red")
lg.addColorStop("0.3","blue")
lg.addColorStop("0.5","yellow")
lg.addColorStop("0.7","pink")
lg.addColorStop("1","green")
ctx.beginPath();
// ctx.fillStyle="cadetblue"
ctx.fillStyle=lg;
ctx.rect(50,50,150,150);
ctx.stroke();
ctx.fill()
}else{
// 不支持
}
</script>
4放射性渐变 （径向渐变）
createRadialGradient放射性渐变。
代码案例
<script>
var canvas = document.getElementById("canvas");
canvas.width = 400;
canvas.height = 400;
// 获取canvas上下文对象
var ctx = canvas.getContext("2d");
if(canvas.getContext){
// createRadialGradient放射性渐变。
// x0,y0 r0 内圆圆心和半径
// x1 y1 r1 外圆圆心和半径
var rg = ctx.createRadialGradient(200,200,0,150,150,100)
rg.addColorStop("0","red")
rg.addColorStop("0.3","blue")
rg.addColorStop("0.5","yellow")
rg.addColorStop("0.7","pink")
rg.addColorStop("1","green")
ctx.beginPath();
// ctx.fillStyle="aquamarine"
ctx.fillStyle=rg;
ctx.arc(200,200,100,0,2*Math.PI,false);
ctx.stroke();
ctx.fill()
}else{
// 不支持
}
</script>
十二、转换变形
1旋转rotate（弧度）
2.缩放scale
3移动translate （重点）
4Canvas状态 （重点）
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>canvas使用</title>
<style>
#canvas{
border: 1px solid #f00;
/* background-color: #ddd; */
}
</style>
</head>
<body>
<canvas id="canvas">
<!-- 加提示信息,如果浏览器不支持，则显示中间文本内容 -->
您的浏览器版本过低，请更换或者升级浏览器
<a href="http://www.baidu.com">谷歌下载地址</a>
</canvas>
<!-- <img src="./1.jpg" alt=""> -->
<script>
var canvas = document.getElementById("canvas");
canvas.width = 400;
canvas.height = 400;
// 获取canvas上下文对象
var ctx = canvas.getContext("2d");
if(canvas.getContext){
// 1.rotate旋转 弧度
// ctx.beginPath();
// ctx.rotate(45/180*Math.PI)
// ctx.rect(0,0,50,50);
// ctx.stroke()
// 2.scale(xn,yn) 缩放
// ctx.beginPath();
// ctx.scale(2,2);
// ctx.rect(50,50,50,50);
// ctx.stroke()
// 3.translate 移动 修改基础坐标
ctx.save(); //保存原来的状态
ctx.translate(200,200); // 200,200 ==> 0,0
ctx.beginPath();
ctx.rect(0,0,50,50);
ctx.stroke()
ctx.restore(); // 恢复原来的状态
ctx.beginPath();
// ctx.rect(-200,-200,50,50);
ctx.rect(0,0,50,50);
ctx.stroke()
}else{
// 不支持
}
</script>
</body>
</html>
tips6
扫一扫
1334
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
