Canvas

Posted 2020-11-26 zhoulifei

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Canvas相关的知识，希望对你有一定的参考价值。

一、了解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>

<head>

<title>Document</title>

</head>

<body>

对不起，您已经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>

<head>

<title>Document</title>

</head>

<body>

对不起，您已经OUT了，赶快升级吧

</canvas>

//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>

<head>

<title>Document</title>

</head>

<body>

不支持

</canvas>

//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>

<head>

<title>Document</title>

</head>

<body>

//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>

<head>

<title>Document</title>

</head>

<body>

对不起</canvas>

//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>

<head>

<title>Document</title>

</head>

<body>

对不起

</canvas>

//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>

<head>

<title>Document</title>

</head>

<body>

//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>

<head>

<title>Document</title>

</head>

<body>

//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>

<head>

<title>画一个矩形</title>

</head>

<body>

//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>

<head>

<title>画一个矩形</title>

</head>

<body>

//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>

<head>

<title>画一个矩形</title>

</head>

<body>

//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>

<head>

<title>画一个矩形</title>

</head>

<body>

//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>

以上是关于Canvas的主要内容，如果未能解决你的问题，请参考以下文章

如何用android 画出三角形

超简洁代码实现CircleImageView

实验三

小程序使用Canvas画饼图

Canvas