什么是Canvas
Canvas的应用领域
Canvas使用现状
Canvas API简单介绍
Canvas 实例Demo
1、什么是Canvas
1）是HTML5提供的一种元素： < canvas >< /canvas > 。
2）Canvas是一个矩形区域，我们可以用JavaScript在上面绘画，控制其每一个像素。
3）canvas 元素使用 JavaScript 在网页上绘制图像，本身不具备绘图功能。
4）canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
2、Canvas的应用领域
1） 游戏。
2）可视化数据、数据图表。
3）banner广告。
4）模拟器远程计算机控制。
5）图形编辑器。
6）多用于活动页面、特效。
7）完整的canvas移动化应用。
3、Canvas的兼容性和对比SVG
1）最新版桌面浏览器，如chrome，firefox，opera和safari等，都是支持的。
2）IE9及IE9以上的浏览器支持。
3）手机端大部分浏览器支持。
4）如果不支持canvas，canvas标签内部的HTML代码会被渲染。 如：
<canvas> 你好，您的浏览器不支持Canvas。</canvas>Canvas Svg
基于像素的(动态png) 基于形状的
单个html元素 多种多样的形状dom元素
只能通过script修改 script和css都可以修改
事件模型和用户交互需要使用像素(x, y) 事件模型和用户交互抽象到元素(rect, path)
绘图面积小或者对象大于10k时性也能很好 绘图面积很大或者对象小于10k的时候性能很好
4、Canvas API介绍
4.1、Canvas的宽高属性
1）Canvas用width和height属性指定画布内容的宽高（Canvas用width和height属性指定画布内容的宽高）。
2）CSS的width和height可以改变Canvas元素的宽高，但是其内容会被等比例拉伸。比如说，100x100的canvas如果设置了100x200的CSS宽高，那么其内容就会被拉伸。
3）Canvas的width和height被变更时，Canvas上已有的任何绘图都会被清除。
4.2、Context对象
1）Context：Canvas的上下文、绘制环境（上下文：上知天文，下知地理。是所有的操作的入口或者集合）。
2）Canvas自身无法绘制任何内容。Canvas的绘图是使用JavaScript操作的。
3）Context对象就是JavaScript操作Canvas的接口。
4）使用[CanvasElement].getContext(‘2d’)来获取2D绘图上下文。
5）canvas还支持WebGL的3D模式（ie11+）。
4.3、Canvas的坐标系
1）Canvas的坐标系以Canvas的左上角为(0,0)点。X轴以往右的方向为正方向，Y轴以往下的方向为正方向。
4.4、Canvas画线
1）Context对象的“当前位置”。
2）可以通过moveTo变更当前位置。
3）可以用lineTo在当前位置和目标点之间连线。
4.5、路径的概念
1） 绘制时，我们会先绘制出一个虚拟的路径。然后根据这个路径进行描边（stroke）或者填充（fill）。
2）closePath可以将路径封闭起来，将起始点和终点相连接。
3）beginPath会开启一个新的路径。
4）clip可以剪切画板。（需要配合save,restore）。
5） 路径填充时符合“非零环绕原则”。
4.6、矩形的绘制
1）rect(x,y,width,height)函数绘制矩形路径。
2）fillRect(x,y,weith,height)填充矩形。
3） strokeRect(x,y,weith,height)描边矩形。
4）clearRect(x,y,weith,height)清空矩形。
4.7、弧形的绘制/arc
1） context.arc(x,y,r,sAngle,eAngle,counterclockwise);
4.8、弧形的绘制/arcTo
1）context.arcTo(x1,y1,x2,y2,r);
2） 创建两条切线之间的弧。选择起点、终点和半径绘制一个弧线。
3） 两条切线确定一个圆，这个函数绘制的，就是圆与两个切点之间的弧线。
4.9、贝塞尔曲线
1） 贝塞尔曲线。
2）三次方贝塞尔曲线。
5.0、渐变色
1） createLinearGradient(x1,y1,x2,y2)得到渐变。
2）addColorStop(0,“black”)加入关键点。
3）canvas区域内，全部都受到影响。
5.1、线条与折线的设定
1）线宽lineWidth。
2）线帽lineCap，指线段开始结束点的形状。butt（默认），round（圆形），square（方形）。
3）连接点lineJoin，指折线的转折点的绘制方法，，round（圆形），bevel（默认），miter（尖角）。
4）miterLimit，斜接线长度与二分之一线宽的比值，如果超过了改值，连接点会用bevel方式绘制。
5.2、文本的绘制
1）fillText和strokeText；
2）context.fillText(text,x,y,maxWidth);
3）context.strokeText(text,x,y,maxWidth);
5.3、绘制图片
1）drawImage；
2）三参数，直接绘制 context.drawImage(img,x,y);
3）五参数，指定缩放绘制 context.drawImage(img,x,y,width,height);
4）九参数，剪切缩放绘制 context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
5.4、碰撞检测(isPointInPath)
1）检查点是否在封闭路径所圈中的区域内。
2）未封闭的路径会被封闭。
5、Canvas 实例Demo
1）demo-star
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
body {
background-color: '#ccc'
}
canvas {
border:1px solid red;
}
</style>
</head>
<body>
<canvas id="canvas" width=600 height=500></canvas>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.lineCap = "round";
var t = 1;
var vertices = [];
vertices.push({
x: 390,
y: 138
});
vertices.push({
x: 247,
y: 135
});
vertices.push({
x: 200,
y: 0
});
vertices.push({
x: 153,
y: 135
});
vertices.push({
x: 10,
y: 138
});
vertices.push({
x: 124,
y: 225
});
vertices.push({
x: 82,
y: 362
});
vertices.push({
x: 200,
y: 280
});
vertices.push({
x: 318,
y: 362
});
vertices.push({
x: 276,
y: 225
});
vertices.push({
x: 390,
y: 138
});
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(390, 138);
ctx.lineTo(247, 135);
ctx.lineTo(200, 0);
ctx.lineTo(153, 135);
ctx.lineTo(10, 138);
ctx.lineTo(124, 225);
ctx.lineTo(82, 362);
ctx.lineTo(200, 280);
ctx.lineTo(318, 362);
ctx.lineTo(276, 225);
ctx.lineTo(390,138);
ctx.stroke();
ctx.lineWidth = 5;
ctx.strokeStyle = "blue";
var points = calcWaypoints(vertices);
animate(points);
function calcWaypoints(vertices) {
var waypoints = [];
for (var i = 1; i < vertices.length; i++) {
var pt0 = vertices[i - 1];
var pt1 = vertices[i];
var dx = pt1.x - pt0.x;
var dy = pt1.y - pt0.y;
for (var j = 0; j < 100; j++) {
var x = pt0.x + dx * j / 100;
var y = pt0.y + dy * j / 100;
waypoints.push({
x: x,
y: y
});
}
}
return (waypoints);
}
function animate() {
if (t < points.length - 1) {
requestAnimationFrame(animate);
}
ctx.beginPath();
ctx.moveTo(points[t - 1].x, points[t - 1].y);
ctx.lineTo(points[t].x, points[t].y);
ctx.stroke();
t++;
}
</script>
</body>
</html>
独乐乐不如众乐乐!
