【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 
canvas
地理位置
调用摄像头 麦克风
本地存储
#1.1 canvas简介 ###1、什么是canvas？ canvas是一个html标签，但是给js提供了接口，通过js代码可以在canvas元素上画图
#1.2 canvas的应用
游戏
炫酷效果、banner
报表，可视化数据（主要）
地图
图形编辑器、模拟器
#1.3 附录 Canvas 案例
游戏、炫酷效果：http://unclealan.cn/my/demos/
报表，可视化数据: http://echarts.baidu.com/examples.html
#1.4canvas 基础
###1、canvas 元素的属性
width
height
###2、canvas 元素的方法 ####1. 获取绘图环境，参数2d,webgl getContext("2d / webgl")
####2. 绘图环境2d
坐标：x左标 y坐标
原点：左上角
###3、例子： 1.html <head> <style> canvas{ background: red; border:1px solid green; } </style> </head> <body> <canvas width="500" height="400" id="mycanvas">您的垃圾浏览器不兼容canvas</canvas> <script> // 获取canvas元素 var mycanvas = document.querySelector("#mycanvas");
// 获取绘图环境（对象）
var cxt = mycanvas.getContext("2d")
// 快速绘制 矩形
cxt.fillRect(100,100,200,50)
</script>
</body>
#1.5 Canvas 基本绘画
###1、画线 2.html，3.html
moveTo(x, y) 起始点坐标（重新开始起始点）
lineTo(x, y) 结束点坐标（接着上一个点）;没有moveTo，第一个lineTo就是起始点
####1. 实例：画三条杠 4.html <body> <canvas id="mycanvas">您的垃圾浏览器不兼容canvas</canvas> <script> // 获取canvas元素 var mycanvas = document.querySelector("#mycanvas");
// 设置画布大小
mycanvas.width = 600;
mycanvas.height = 500;
mycanvas.style.border = "1px solid #eee";
// 获取绘图环境
var cxt = mycanvas.getContext("2d");
// 第一条杠
cxt.beginPath()
cxt.moveTo(200,100);
cxt.lineTo(400,100);
cxt.lineWidth = 10;
cxt.strokeStyle = "red";
cxt.stroke();
// 第二条杠
cxt.beginPath()
cxt.moveTo(200,200);
cxt.lineTo(400,200);
cxt.strokeStyle = "yellow";
cxt.stroke();
// 第三条杠
cxt.beginPath()
cxt.moveTo(200,300);
cxt.lineTo(400,300);
cxt.strokeStyle = "blue";
cxt.stroke();
</script>
</body>
###2、矩形
####1. 复杂绘制 由多条线组成
####2. 快速绘制 rect(x, y, w, h) 绘制矩形的路径
strokeRect(x,y,w,h) 绘制描边的矩形
fillStyle(x,y,w,h) 绘制的填充的矩形
####3. 清除矩形 clearRect(x,y,w,h) （绘制的矩形区域内的内容将被擦除）
####4. 清除画布（重新设置canvas的宽度）
canvas.width = canvas.width;
canvas.width = 200;
####5. 实例： 6.html <body> <canvas id="mycanvas">您的垃圾浏览器不兼容canvas</canvas> <script> // 获取canvas元素 var canvas = document.querySelector("#mycanvas");
// 设置画布大小
canvas.width = 600;
canvas.height = 500;
canvas.style.border = "1px solid #eee";
// 获取绘制环境
var cxt = canvas.getContext("2d");
// 1. 绘制矩形
cxt.beginPath();
cxt.moveTo(50,10);
cxt.lineTo(200,10);
cxt.lineTo(200,50);
cxt.lineTo(50,50);
cxt.lineTo(50,10);
// 描边
cxt.lineWidth = 10;
cxt.strokeStyle = "red"
cxt.stroke();
// 2. 快速绘制矩形路径
cxt.beginPath();
cxt.rect(100,100,100,50);
cxt.strokeStyle = "green"
cxt.stroke();
cxt.fillStyle = "purple"
cxt.fill() //以下两种不是路径；所以不具有填充路径或描边路径
// 3. 快速绘制描边矩形
cxt.strokeStyle = "yellow" //必须放strokeRect前面
cxt.strokeRect(100,200,100,50);
// 4. 快速绘制填充矩形
cxt.fillStyle = "pink" //必须放fillRect前面
cxt.fillRect(100,300,100,50);
// 5. 清除矩形
cxt.clearRect(180,100,300,200);
// cxt.clearRect(0,0,300,200);
// 6. 清除画布
// canvas.width = canvas.width;
canvas.width = 200;
</script>
</body>
###3、画圆(弧)
arc(x,y,r,start, end, true/false)
最后一个参数是表示 顺时针(false)还是逆时针(true) 默认false
####1. 实例：画圆 7.html <body> <canvas id="mycanvas">您的垃圾浏览器不兼容canvas</canvas> <script> // 获取canvas元素 var canvas = document.querySelector("#mycanvas");
// 设置画布大小
canvas.width = 600;
canvas.height = 500;
canvas.style.border = "1px solid #eee";
// 获取绘制环境
var cxt = canvas.getContext("2d");
// 绘制圆形
cxt.arc(300,250,150,0,Math.PI*2)
// 描边
cxt.lineWidth = 10;
cxt.strokeStyle = "red"
cxt.stroke();
</script>
</body>
####2. 实例：画弧 8.html <body> <canvas id="mycanvas">您的垃圾浏览器不兼容canvas</canvas> <script> // 获取canvas元素 var canvas = document.querySelector("#mycanvas");
// 设置画布大小
canvas.width = 600;
canvas.height = 500;
canvas.style.border = "1px solid #eee";
// 获取绘制环境
var cxt = canvas.getContext("2d");
// 绘制圆形
cxt.beginPath();
cxt.arc(300,250,150,0,Math.PI/2,false)
cxt.closePath();
// 描边
cxt.lineWidth = 10;
cxt.strokeStyle = "red"
cxt.stroke();
// 填充
cxt.fillStyle = "yellow"
cxt.fill();
</script>
</body>
####3. 实例：画扇形图 9.html <body> <canvas id="mycanvas">您的垃圾浏览器不兼容canvas</canvas> <script> // 定义数据 var data = [ {name:"蛋白质",value:0.1,color:"red"}, {name:"葡萄糖", value:0.2, color:"orange"}, {name:"脂肪", value:0.15, color:"yellow"}, {name:"氨基酸", value:0.35, color:"green"}, {name:"维生素", value:0.15, color:"blue"}, {name:"微量元素", value:0.05, color:"purple"} ]
// 定义宽高
var w = 600;
var h = 500;
var r = 150;
// 获取canvas元素
var canvas = document.querySelector("#mycanvas");
// 设置画布大小
canvas.width = w;
canvas.height = h;
canvas.style.border = "1px solid #eee";
// 获取绘制环境
var cxt = canvas.getContext("2d");
// 设置起始弧度
var startAngle = 0;
// 设置文字起始位置
var textW = w/2+80;
var textH = h/2-10;
// 绘制扇形图
data.forEach((item)=>{
// 设置结束弧度
var endAngle = startAngle + item.value * Math.PI * 2;
// 开始路径
cxt.beginPath();
// 设置起始位置
cxt.moveTo(w/2,h/2);
// 设置弧度
cxt.arc(w/2,h/2,r,startAngle,endAngle);
// 填充颜色
cxt.fillStyle = item.color;
cxt.fill();
// 定义下一次的起始弧度
startAngle = endAngle
})
</script>
</body>
###4、文字 font 属性;设置大小和字体
textAlign 属性;文字的水平对齐方式
start(默认)/end/left/right/center
textBaseLine 属性;文字的垂直对齐方式
alphabetic(默认)/top/bottom/middle
fillText(text, x, y) 填充文字
strokeText(text, x, y) 描边文字
measureText(text) 返回该文本在画布中所占的宽度
####1. 实例：填充文字、描边文字 10.html <body> <canvas id="mycanvas">您的垃圾浏览器不兼容canvas</canvas> <script> // 定义宽高 var w = 600; var h = 500; var r = 150;
// 获取canvas元素
var canvas = document.querySelector("#mycanvas");
// 设置画布大小
canvas.width = w;
canvas.height = h;
canvas.style.border = "1px solid #eee";
// 获取绘制环境
var cxt = canvas.getContext("2d");
// 填充文字
// cxt.font = "bold italic 30px 微软雅黑";
cxt.font = "30px 微软雅黑";
cxt.fillStyle = "red"
cxt.fillText("hello",100,100);
// 描边文字
cxt.font = "bold 50px 微软雅黑";
cxt.strokeStyle = "green"
cxt.strokeText("hello",200,100);
</script>
</body>
####2. 实例：文字的对齐方式、字体宽度 11.html <body> <canvas id="mycanvas">您的垃圾浏览器不兼容canvas</canvas> <script> // 定义宽高 var w = 600; var h = 500; var r = 150;
// 获取canvas元素
var canvas = document.querySelector("#mycanvas");
// 设置画布大小
canvas.width = w;
canvas.height = h;
canvas.style.border = "1px solid #eee";
// 获取绘制环境
var cxt = canvas.getContext("2d");
// 画一条水平线跟一条垂直线
// 垂直线
cxt.beginPath();
cxt.moveTo(w/2,0);
cxt.lineTo(w/2,h);
// 水平线
cxt.moveTo(0,h/2);
cxt.lineTo(w,h/2);
// 线描边
cxt.strokeStyle = "green";
cxt.stroke()
// 写文字
cxt.font = "bold 30px 微软雅黑";
cxt.fillStyle = "red"
// 文字的水平对齐方式
cxt.textAlign = "center";
cxt.textAlign = "right";
cxt.textAlign = "end";
cxt.textAlign = "left";
cxt.textAlign = "start";
// 填充文字
cxt.fillText("hello",w/2,200);
// 文字的垂直对齐方式
cxt.textBaseline = "top"
cxt.textBaseline = "bottom"
cxt.textBaseline = "middle"
cxt.textBaseline = "alphabetic" //默认
// 描边文字
cxt.font = "bold 50px 微软雅黑";
cxt.strokeStyle = "green"
cxt.strokeText("hello",100,h/2);
cxt.font = "bold 12px 微软雅黑";
console.log(cxt.measureText("边宽大小").width) //受字体大小影响
</script>
</body>
###5、路径开始和闭合 4.html，5.html
beginPath() 开启新的路径(状态);并且结束前面的路径
closePath() 结束当前路径;并且使当前路径闭合
###6、描边
stroke() 填充当前路径
strokeStyle 属性，设置描边颜色
lineWidth 属性，设置描边线条宽度
###7、填充
fill() 填充当前的路径
fillStyle 属性，设置填充的颜色
注意： 非0环绕的算法
#1.6 作业 ###1、使用循环，画10行10列表格 <body> <canvas id="mycanvas">您的垃圾浏览器不兼容canvas</canvas> <script> // 定义宽高 var w = 600; var h = 600;
// 获取canvas元素
var canvas = document.querySelector("#mycanvas");
// 设置画布大小
canvas.width = w;
canvas.height = h;
canvas.style.border = "1px solid #eee";
// 获取绘制环境
var cxt = canvas.getContext("2d");
for(var i = 0; i <= 10; i++){
// 绘制垂直线
cxt.beginPath();
cxt.moveTo(i*50,0);
cxt.lineTo(i*50,500);
cxt.strokeStyle = "red";
cxt.lineWidth = 2;
cxt.stroke();
// 绘制水平线
cxt.beginPath();
cxt.moveTo(0,i*50);
cxt.lineTo(500,i*50);
cxt.strokeStyle = "red";
cxt.lineWidth = 2;
cxt.stroke();
}
</script>
</body>
###2、画画板： 拖动鼠标，在canvas上划线 <body> <canvas id="mycanvas">您的垃圾浏览器不兼容canvas</canvas> <script> // 定义宽高 var w = 500; var h = 500;
// 获取canvas元素
var canvas = document.querySelector("#mycanvas");
// 设置画布大小
canvas.width = w;
canvas.height = h;
canvas.style.border = "1px solid #eee";
// 获取绘制环境
var cxt = canvas.getContext("2d");
// 鼠标按下
var flag = false;
canvas.onmousedown = (event)=>{
var e1 = event || window.event;
var startX = e1.clientX; //获取鼠标x轴坐标
var startY = e1.clientY; //获取鼠标y轴坐标
// console.log("起始坐标"+startX,startY)
flag=true;
// 设置起始点
cxt.beginPath();
cxt.moveTo(startX,startY);
}
// 鼠标移动
canvas.onmousemove = (event)=>{
var e2 = event || window.event;
var endX = e2.clientX; //获取鼠标x轴坐标
var endY = e2.clientY; //获取鼠标y轴坐标
// console.log("结束坐标"+endX,endY)
if(flag){
// 设置结束点
cxt.lineTo(endX,endY);
// 线宽度
cxt.lineWidth = "2"
// 描边线
cxt.strokeStyle = "red";
cxt.stroke();
}
}
// 鼠标抬起
canvas.onmouseup = (event)=>{
flag = false
}
</script>
</body>
###3. 饼状图(把文字显示在上面) <body> <canvas id="mycanvas">您的垃圾浏览器不兼容canvas</canvas> <script> // 定义数据 var data = [ {name:"蛋白质",value:0.1,color:"red"}, {name:"葡萄糖", value:0.2, color:"orange"}, {name:"脂肪", value:0.15, color:"yellow"}, {name:"氨基酸", value:0.35, color:"green"}, {name:"维生素", value:0.15, color:"blue"}, {name:"微量元素", value:0.05, color:"purple"} ]
// 定义宽高
var w = 600;
var h = 500;
var r = 150;
// 获取canvas元素
var canvas = document.querySelector("#mycanvas");
// 设置画布大小
canvas.width = w;
canvas.height = h;
canvas.style.border = "1px solid #eee";
// 获取绘制环境
var cxt = canvas.getContext("2d");
// 设置起始弧度
var startAngle = 0;
// 设置文字起始位置
var textW = w/2+80;
var textH = h/2-10;
// 绘制扇形图
data.forEach((item)=>{
// 设置结束弧度
var endAngle = startAngle + item.value * Math.PI * 2;
// 开始路径
cxt.beginPath();
// 设置起始位置
cxt.moveTo(w/2,h/2);
// 设置弧度
cxt.arc(w/2,h/2,r,startAngle,endAngle);
// 填充颜色
cxt.fillStyle = item.color;
cxt.fill();
// 定义文字的位置
var pointX=w/2+Math.cos(endAngle-(endAngle-startAngle)/2)*r/2;
var pointY=h/2+Math.sin(endAngle-(endAngle-startAngle)/2)*r/2;
// 填充文字
cxt.font = "bold 12px 微软雅黑";
cxt.fillStyle = "white"
cxt.fillText(item.name,pointX,pointY);
// 定义下一次的起始弧度
startAngle = endAngle
})
</script>
</body>
