前端笔记 — canvas

Posted

tags:

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

参考技术A 在html中添加<canvas>元素，必须设置width跟height属性

如果浏览器不支持canvas元素，就会显示标签中间的内容
要在画布上绘图，需要取得绘图上下文，调用getContext('2d')就可以取得canvas的2d上下文

使用toDataURL方法可以导出canvas上绘制的图像，接受一个参数，图像的MIME类型格式

常用的属性控制

矩形是唯一一种可以直接在上下文中绘制的形状
与矩形有关的方法包括fillRect()、strokeRect()和clearRect()，这三个方法接受4个参数（x, y, width, height）
fillRect()绘制的矩形会填充指定的颜色，颜色通过fillStyle属性指定

strokeRect()绘制的矩形会使用指定的颜色描边，描边颜色通过strokeStyle属性指定

clearRect()方法用于清除画布上的矩形区域

要绘制路径，首选必须调用beginPath()方法，表示开始绘制新路径，绘制路径主要有以下方法

调用closePath()可以将路径的起点与终点连接。路径完成后，可以使用fill()填充，或者使用stroke()描边。最后还可以调用clip()，在路径上创建一个剪切区域

绘制文本主要有两个方法，fillText()和strokeText()，这个两个方法接受4个参数：要绘制的文本字符串、x坐标、y坐标和可选的最大像素宽度。这两个方法都以下列3个属性为基础

上下文提供了辅助确定文本大小的方法measureText()，这个方法接受一个参数，即要绘制的文本，返回一个TextMetrics对象，这个对象有一个width属性，表示文本的宽度

为上下文应用变换，会导致使用不同的变换矩阵应用处理，从而产生不同的结果，可以通过如下方法来修改变换矩阵

如果想把一副图像绘制到画布上，可以使用drawImage()方法，调用这个方法时，可以使用三种不同的参数组合，最简单的方式是传入一个<img>元素，以及绘制该图像的起点x和y坐标

可以多传入两个参数，表示目标宽度和高度

还可以把图像中的某个区域绘制到上下文中，需要传入9个参数：要绘制的图像、源图像的x坐标、源图像的y坐标、源图像的宽度、源图像的高度、目标图像的x坐标、目标图像的y坐标、目标图像的宽度、目标图像的高度

除了给drawImage()方法传入<img>元素外，还可以传入另一个<canvas>元素作为其第一个参数。结合drawImage()和其他方法，可以对图像进行各种基本操作，操作的结果可以通过toDataURL()方法获得，toDataURL()是canvas的方法而不是上下文的方法

上下文会根据以下几个属性，自动为形状或路径绘制阴影，需要在绘制路径之前设置

渐变有CanvasGradient实例表示，要创建一个新的线性渐变，可以调用createLinearGradient()方法，接受4个参数：startX、startY、endX、endY。创建渐变后，使用addColorStop()方法来指定色标，接受两个参数：色标位置和css颜色值。色标位置是一个0（开始的颜色）到1（结束的颜色）之间的数字

表示从一个画布上的点(30, 30)到点(70, 70)的渐变。起点的色标是白色，终点的色标是黑色。然后可以把fillStyle或者strokeStyle设置为这个对象，从而使用渐变来绘制形状或描边

要创建径向渐变，可以使用createRadialGradient()方法，接受6个参数，对应着两个圆的圆心和半径

模式其实就是重复的图像，可以用来填充或描边图像，使用createPattern()方法并传入两个参数：一个<img>元素和一个表示如何重复图像的字符串。其中第二个参数的值与css的background-repeat属性值相同，包括“repeat”、“repeat-x”、“repeat-y”和“no-repeat”

模式与渐变一样，都是从画布的原点(0, 0)开始的，将填充样式设置为模式对象，只表示在某个特定的区域内显示重复的图像，而不是要从某个位置开始绘制重复图像

上下文可以通过getImageData(x, y, width, height)取得原始图像数据

这里返回的对象是ImageData的实例，每个ImageData对象都有三个属性：width、height和data。其中data是一个数组，保存着图像中每一个像素的数据。

在data数组中，每一个像素用4个元素来保存，分别表示红、绿、蓝和透明度。因此第一个像素的数据保存在数组的第0到第3个元素中，数组中的每个元素的值都介于0到255之间（包括0和255）
putImageData()方法可以将imageData表示的图像绘制到画布上

globalAlpha：用于指定所有绘制的透明度，是一个介于0到1之间的值，默认值为1
如果所有的后续操作都要基于相同的透明度，可以先把globalAlpha设置为适当的值，然后绘制

globalCompositionOperation：表示后绘制的图形怎样与先绘制的图形结合，可能的值如下

Web前端开发笔记——第二章 HTML语言 第十节 画布标签音视频标签

目录

一、画布标签

<canvas> </canvas> 画布标签用于图形、字符等的绘制，它不能直接地绘制图形，要通过脚本即JavaScript来完成，这里不对具体脚本阐述，只介绍该标签的用法。通过指定id=""属性 ，用于在脚本中引用，而通过定义 width=""和 height=""属性来规定该画布的大小.，即宽度和高，如下：

<canvas id="" width="" height=""></canvas>

可以通过添加style=""属性来对画布加上边框，因为默认时画布是无边框的。
例如，在HBulider X中下列代码，设置画布的边框大小宽度为300，高度为250，边框大小为5px，且颜色为蓝色：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
	</head>

	<body>
		<canvas id="12" width="300" height="250" style="border: 5px solid #0000FF"></canvas>
	</body>

</html>

运行结果如下：

二、音视频标签

一般浏览器通过带有flash插件，使其播放音视频，但也能通过HTML5中的标签来播放音视频。

（一）音频标签

通过<audio></audio>标签，在网页上加入音频元素，使能播放音频文件，添加src=""属性，即该音频文件的URL，controls="controls"属性表示显示音频控件，即播放暂停按钮、调节声音等等；loop="loop"属性表示当播放完该音频后，自动重新开始播放；autoplay="autoplay"属性表示当打开该网页页面时，音频文件加载好后自动开始播放该音频；muted="muted"属性表示该音频文件自动设置为静音输出。

<audio src="" controls="controls" loop="loop" autoplay="autoplay" muted="muted">
</audio>

另外要注意audio标签目前仅支持的3种文件格式：mp3、wav、ogg。
例如，在HBulider X中下列代码，音频文件位于站点文件夹music内，在文件夹中html文件调用该音频，设置音频控件、自动播放以及循环播放属性：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
	</head>

	<body>
		<audio src="../music/陈奕迅 - 爱情转移.mp3" controls="controls" autoplay="autoplay" loop="loop">
		</audio>
	</body>

</html>

运行结果如下，可以正常播放音频文件：

（二）视频标签

和音频标签一样，也可以通过<video></video>标签，在网页上加入媒体元素，使能播放媒体。它的属性与音频标签属性一样，只不过多了宽度和高度属性设置，即通过width=""属性和height=""属性设置，但如果不设置大小属性，原视频播放画面大小会随页面的改变而改变。

<video src="" width="" height="" controls="controls" loop="loop" autoplay="autoplay" muted="muted">
</video>

这里也是一样，要注意video标签目前仅支持的3种文件格式：mp4、webm、ogg。
例如，在HBulider X中下列代码，音频文件位于站点文件夹video内，在文件夹中html文件调用该视频，设置视频控件、自动播放以及循环播放属性：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
	</head>

	<body>
		<video src="../video/陈奕迅-倾城.mp4" controls="controls" autoplay="autoplay" loop="loop">
		</video>
	</body>

</html>

运行结果如下，可以正常播放视频文件：

（三）资源标签

当要定义多种媒体资源时，这时要用到<source> </source> 标签，它用在audio和video标签内。通过src=""属性和type=""属性，定义音视频文件的URL和类型，如下：

<audio controls="controls">
	<source src="../music/陈奕迅-爱情转移.mp3" type="audio/mp3">
</audio>

比如为了当用户使用不同的浏览器播放音视频时有些浏览器不支持该格式时，可以利用另一种格式，即第二个媒体资源。
例如，在HBulider X中下列代码，即在音频标签内定义了两个资源标签，它有两种格式，当浏览器都支持时任意播放，而有的浏览器不支持其中一种时选用另一种可支持的格式播放：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
	</head>

	<body>
		<audio controls="controls" autoplay="autoplay" loop="loop">
			<source src="../music/陈奕迅-爱情转移.ogg" type="audio/ogg">
			<source src="../music/陈奕迅-爱情转移.mp3" type="audio/mp3">
		</audio>
	</body>

</html>

结语

以上就是全部内容，篇幅较长，感谢您的阅读和支持，若有表述或代码中有不当之处，望指出！您的指出和建议能给作者带来很大的动力！！！

以上是关于前端笔记 — canvas的主要内容，如果未能解决你的问题，请参考以下文章

5个前端练手项目(html css js canvas)

HTML5与移动端web学习笔记

HTML5与移动端web学习笔记

springmvc学习笔记-前端控制器

web前端笔记

超硬核 Web 前端学霸笔记，学完就去找工作！