Canvas
nercon 2020-03-06
一、了解HTML5
1、什么是HTML5
以前：HTML5就是HTML的第五个版本
但是现在大众理解的HTML5是炫酷吊炸天的特效，那通过以下几种技术组合而成
2、发展史
3、目前支持HTML5的浏览器
4、HTML5的推广网站
二、泛HTML5学习分类
1、HTML5标签
2、CSS3
3、JavaScript
http://www.jb51.net/article/78474.htm
HTML5本地存储
HTML5上传文件
canvas API
三、Canvas简介
1、是什么
Canvas是HTML5新增的一个双标签，目的在页面设置一个画布，可以进行画任何的线、图形、填充等一系列的操作，操作画图的是js。另外Canvas不仅仅提供简单的二维矢量绘图，也提供了三维的绘图，以及图片处理等一系列的api支持。
2、初体验Canvas
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<canvas width="800" height="400" id="canvas" style="background: red;">
对不起，您已经OUT了，赶快升级吧
</canvas>
</body>
</html>
n 说明：
n canvas用于设置画布，默认固定添加三个属性分别为：widht、height、id
n canvas默认是白色背景，我们可以通过行内样式来设置背景颜色
3、Canvas绘制步骤
n 新建HTML页面，创建canvas标签（注：三个属性）
n 通过JS获取canvas DOM节点对象
n 通过canvas节点对象的方法获取【绘制环境对象】
n 最后，通过【绘制环境对象】调用HTML5 API来完成功能
http://www.w3school.com.cn/tags/html_ref_canvas.asp
4、创建绘图环境对象
n 创建canvas标签
n 获取canvas节点对象
n 获取绘图环境对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<canvas width="800" height="400" id="canvas" style="background: red;">
对不起，您已经OUT了，赶快升级吧
</canvas>
<script>
//1.获取canvas节点对象
var canvasObj = document.getElementById(‘canvas‘);
//2.创建绘制环境对象
var extObj = canvasObj.getContext(‘2d‘);
alert(extObj);
</script>
</body>
</html>
四、Canvas简单操作（画一条直线）
思考
在显示生活中，通过纸和笔明确起始点一直拖拽到终点
步骤
v 确定起始点
v 确定终点
v 绘制
API说明
extObj.moveTo(x坐标，y坐标); 确定起始位置
extObj.lineTo(x坐标，y坐标); 确定终点位置
extObj.stroke() 绘图
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<canvas width="800" height="300" id="canvas" style="background: yellow">
不支持
</canvas>
<script type="text/javascript">
//1.获取canvas节点对象
var canvasObj = document.getElementById(‘canvas‘);
//2.绘制环境对象
var extObj = canvasObj.getContext(‘2d‘);
//3.定义起始位置
extObj.moveTo(20, 40);
//4.定义终点位置
extObj.lineTo(200, 200);
//5.绘制
extObj.stroke();
</script>
</body>
</html>
n 自定义宽度和颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<canvas width="800" height="300" id="canvas" style="background: yellow">不支持</canvas>
<script type="text/javascript">
//1.获取canvas节点对象
var canvasObj = document.getElementById(‘canvas‘);
//2.绘制环境对象
var extObj = canvasObj.getContext(‘2d‘);
//2.1设置画笔粗细
extObj.lineWidth = 10;
//2.2设置画笔颜色
extObj.strokeStyle = ‘#fff‘;
//3.定义起始位置
extObj.moveTo(20, 40);
//4.定义终点位置
extObj.lineTo(200, 200);
//5.绘制
extObj.stroke();
</script>
</body>
</html>
五、Canvas简单操作（画一个圆）
步骤
n 明确圆形
n 半径
API说明
cxtObj.arc（x坐标，y坐标，半径，起始角度，结束角度，绘制方向：false-顺时针，true-逆时针）
脚下留心：
起始角度和结束角度，不是说些1~360度，而是通过Math.PI来代替指半个圆，2*Math.PI指一个圆，1.5*Math.PI四分之三圆
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<canvas width="800" height="400" id="canvas" style="background: red;">
对不起</canvas>
<script type="text/javascript">
//1.获取canvas节点对象
var canvasObj = document.getElementById(‘canvas‘);
//2.创建绘图环境对象
var cxtObj = canvasObj.getContext(‘2d‘);
cxtObj.lineWidth = 8
//定义圆
cxtObj.arc(150, 150, 50, 0, 2*Math.PI, false);
cxtObj.stroke();
</script>
</body>
</html>
练习：绘制两个圆
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<canvas width="800" height="400" id="canvas" style="background: red;">
对不起
</canvas>
<script type="text/javascript">
//1.获取canvas节点对象
var canvasObj = document.getElementById(‘canvas‘);
//2.创建绘图环境对象
var cxtObj = canvasObj.getContext(‘2d‘);
cxtObj.lineWidth = 8
//定义圆
cxtObj.arc(150, 150, 50, 0, 2*Math.PI, false);
cxtObj.stroke();
cxtObj.closePath();
cxtObj.beginPath();
cxtObj.arc(350, 150, 50, 0, 2*Math.PI, false);
cxtObj.stroke();
</script>
</body>
</html>
脚下留心：通过路径绘制图案必须上一个图案绘制完毕必须关闭路径，下一个路径开始必须开始新路径。通过API closePath()和beginPath();
填充颜色
n API说明
cxtObj.fillStyle = 值; 设置颜色值；
cxtObj.fill(); 填充，默认填充黑色
n 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<canvas width="800" height="400" id="canvas" style="background: red;">对不起</canvas>
<script type="text/javascript">
//1.获取canvas节点对象
var canvasObj = document.getElementById(‘canvas‘);
//2.创建绘图环境对象
var cxtObj = canvasObj.getContext(‘2d‘);
cxtObj.lineWidth = 8
//定义圆
cxtObj.arc(150, 150, 50, 0, 2*Math.PI, false);
//绘制
cxtObj.stroke();
//关闭当前绘制路径
cxtObj.closePath();
//开启新的绘制路径
cxtObj.beginPath();
//定义圆
cxtObj.arc(350, 150, 50, 0, 2*Math.PI, false);
//绘制
cxtObj.stroke();
//设置填充样式
cxtObj.fillStyle = ‘yellow‘;
//填充
cxtObj.fill();
</script>
</body>
</html>
六、Canvas简单操作（画一个矩形）
步骤
n 明确起始位置
n 明确宽度
n 明确高度
API说明
cxtObj.rect（x坐标，y坐标，宽度，高度）
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<canvas width="800" height="400" id="canvas" style="background: red;">对不起</canvas>
<script type="text/javascript">
//1.获取canvas节点对象
var canvasObj = document.getElementById(‘canvas‘);
//2.创建绘图环境对象
var cxtObj = canvasObj.getContext(‘2d‘);
//2.设置画笔粗心
cxtObj.lineWidth = 8
//定义矩形
cxtObj.rect(100, 200, 300, 100);
//绘制
cxtObj.stroke();
//填充白色
cxtObj.fillStyle = ‘#fff‘;
//填充
cxtObj.fill();
</script>
</body>
</html>
七、Canvas简单操作（写一段文字画布中）
步骤
n 明确写入内容
n 明确x坐标
n 明确y坐标
API说明
cxtObj.fillText（文字，x坐标，y坐标）
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>画一个矩形</title>
</head>
<body>
<canvas width="800" height="400" id="canvas" style="background: red;">对不起</canvas>
<script type="text/javascript">
//1.创建canvas节点对象
var canvasObj = document.getElementById(‘canvas‘);
//2.创建绘画环境对象
var cxtObj = canvasObj.getContext(‘2d‘);
cxtObj.font = ‘30px 黑体‘
//定义文字信息（填充的）
cxtObj.fillText(‘没有程序员鼓励师，不编程！‘, 80, 40);
//写不填充的字体
cxtObj.strokeText(‘没有程序员鼓励师，不编程！‘, 80, 80);
//写入画布
cxtObj.stroke();
</script>
</body>
</html>
八、Canvas简单操作（将一幅图片添加到画布中）
步骤
n 明确图片
n 明确x坐标和y坐标
n 明确宽度和高度
API说明
cxtObj.drawImage(图片对象，x坐标，y坐标，宽度，高度)
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>画一个矩形</title>
</head>
<body>
<canvas width="800" height="400" id="canvas" style="background: red;">对不起</canvas>
<script type="text/javascript">
//1.创建canvas节点对象
var canvasObj = document.getElementById(‘canvas‘);
//2.创建绘画环境对象
var cxtObj = canvasObj.getContext(‘2d‘);
cxtObj.font = ‘30px 黑体‘
//定义文字信息（填充的）
cxtObj.fillText(‘没有程序员鼓励师，不编程！‘, 80, 40);
//写不填充的字体
cxtObj.strokeText(‘没有程序员鼓励师，不编程！‘, 80, 80);
//写入画布
cxtObj.stroke();
//写入图片
var imgObj = document.createElement(‘img‘);
imgObj.src = ‘woman.jpg‘;
//定义写入图片语法
cxtObj.drawImage(imgObj, 80, 120, 300, 400);
cxtObj.stroke();
</script>
</body>
</html>
九、Canvas简单操作（画多边形）
三角形代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>画一个矩形</title>
</head>
<body>
<canvas width="800" height="400" id="canvas" style="background: red;">对不起</canvas>
<script type="text/javascript">
//1.创建canvas节点对象
var canvasObj = document.getElementById(‘canvas‘);
//2.创建绘画环境对象
var cxtObj = canvasObj.getContext(‘2d‘);
//定义起始点
cxtObj.moveTo(150, 100);
cxtObj.lineTo(50, 180);
cxtObj.lineTo(200, 180);
cxtObj.stroke();
cxtObj.fill();
</script>
</body>
</html>
四角形代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>画一个矩形</title>
</head>
<body>
<canvas width="800" height="400" id="canvas" style="background: red;">对不起</canvas>
<script type="text/javascript">
//1.创建canvas节点对象
var canvasObj = document.getElementById(‘canvas‘);
//2.创建绘画环境对象
var cxtObj = canvasObj.getContext(‘2d‘);
//定义起始点
cxtObj.moveTo(150, 100);
cxtObj.lineTo(300, 100);
cxtObj.lineTo(200, 180);
cxtObj.lineTo(50, 180);
cxtObj.stroke();
cxtObj.fill();
</script>
</body>
</html>
相关推荐
表格的现在还是较为常用的一种标签，但不是用来布局，常见处理、显示表格式数据。在HTML网页中，要想创建表格，就需要使用表格相关的标签。<table> <tr> <td>单元格内的文字</td> ...
一个客户要求给网站添加一个背景音乐，我用的是html5添加网页背景音乐的代码，在此记录一下以后有用。html5方法二：<videocontrols=""autoplay=""name="media&q