HTML5应用:画布<Canvas>工具

最新推荐文章于 2024-08-05 22:52:23 发布

温暖会追上来的.

最新推荐文章于 2024-08-05 22:52:23 发布

阅读量1k

点赞数 4

分类专栏：前端HTML+CSS+JS基础

本文链接：https://blog.csdn.net/Strawberry_595/article/details/83513438

版权

前端HTML+CSS+JS基础专栏收录该内容

13 篇文章 0 订阅

订阅专栏

1.画布<Canvas>标签定义

2.画布 <Canvas>工具对象、坐标、路径和填充

3.使用画布 <Canvas>绘制图形

4.使用画布 <Canvas>绘制文字

5.使用画布 <Canvas>绘制特效

画布是HTML5新增的标签元素.画布<Canvas>工具允许通过脚本语言动态渲染绘制图形,例如:可以用画布<Canvas>标签实现画图、合成图像或者制作动画等功能。

Canvas的绘制区域有HTML代码定义的宽度和高度属性决定，Canvas有一套完全基于Javascript脚本语言绘制的应用程序接口，用过该接口可以访问Canvas的绘图区域，并完全绘图和生成图形的操作。

1.画布<Canvas>标签定义

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

定义<canvas>元素一般需要宽度“width”属性和“height"属性，当然者两个属性可选，还可以用DOM属性或者CSS来设置。默认是"width"=300px ”height“=150px；

很多老的浏览器并不支持Canvas特性,这是需要对支持Canvas特性的浏览器给出提示:

<canvas id="id_canvas" width="150" height="150">浏览器不支持Canvas元素</canvas>

2.画布<Canvas>工具对象、坐标、路径和填充

画布<canvas>区域其实是一个二维网格，其左上角的坐标为（0，0），因此也是画布的基点坐标。

画布<canvas>工具常用的路径方法如下：
moveTO(x, y)方法	定义线条开始的坐标
lineTO(x, y)方法	定义线条结束的坐标
arc(x, y, r, start, stop)方法	定义画圆

画布<canvas>工具常用的填充方法如下：
fillRect(x, y, width, height)方法	进行填充矩形画图操作
fil()方法	进行填充画图操作

当<canvas>标签元素被添加到HTML5页面上的时候，初始化渲染是空白的。在通过JavaScript脚本语言进行图形绘制操作之前，先要获得渲染的上下文对象。具体是通过Canvas对象的getContext()方法获取的。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title> Javascript Canvas</title>
		<script type="text/javascript">
			window.onload = function() {     //资源加载结束后触发
				var canvas =document.querySelector("canvas");  //获取canvas元素
				if(canvas.getContext){   //判断上下文对象是否有效
					var ctx = canvas.getContext("2d");   //获取渲染上下文
					ctx.fillStyle = "#6A6AA7";  //填充颜色
					ctx.fillRect(50,50, 200,200);  //绘制图形
				}
			}
		</script>
	</head>
	<body>
		<canvas width="300" height="300">浏览器不支持canvas工具</canvas>
	</body>
</html>

3.使用画布<Canvas>绘制图形

画布<Canvas>工具拥有很强大的绘图功能，基本可以实现绝大多数的二维图形效果。下面提供一些较为常用的绘图函数：

常用的绘图函数
方法	变量解释
1. rect(x, y, width, height)方法,用于创建矩形	x: 矩形左上角的x坐标; y: 矩形左上角的y坐标; width: 矩形的宽度,单位是像素; height: 矩形的高度,单位是像素;
2.fillRect(x, y, width, height)方法,绘制被填充的矩形
3. strokeRect(x, y, width, height)方法,用于绘制矩形(无填充)
4. fill()方法,填充当前绘图(路径).
5. stroke()方法, 绘制自己定义的路径.
6. beginPath()方法, 其实一条路径,或重置当前路径
7. moveTo(x, y)方法, 把路径移动到画布中指定点,不创建线条,	x: 路径的目标位置的x坐标; y: 路径的目标位置的y坐标;
8. closePath()方法,创建从当前点回到起始点的路径.
9. lineTo(x, y)方法,添加一个人新点,然后在画布中创建从该点到最后指定点的线条	x: 路径的目标位置的x坐标; y: 路径的目标位置的y坐标;
10. arcTo(x1, y1, x2, y2, r)方法,用于创建两切线之间的弧线或曲线	x1 : 弧起点的x坐标; y1 : 弧起点的y坐标; x2 : 弧终点的x坐标; y2 : 弧终点的y坐标; r : 弧的半径;
11. arc(x, y, r, sAngle, eAngle, counterclockwise)方法, 用于创建弧线或者曲线.	x: 圆中心的x坐标; y: 圆中心的y坐标; r: 圆半径; sAngle: 起始角, 以弧度计(弧的圆形的三点钟位置是0度); eAngle: 结束角, 以弧度计; countercolckwise: 可选,规定逆时针或顺时针方向绘图.true表示逆时针,false表示顺时针.

4.使用画布<Canvas>绘制文字

Canvas绘制文职的函数
方法	变量解释
1.fillText(text, x, y, maxWidth)方法,用于绘制带有填充颜色的文本	text: 文本内容; x: 相对于画布的x轴坐标; y: 相对于画布的y轴坐标; maxWidth: 可选, 允许的最大文本宽度,以像素计;
2. strokeText(text, x, y,maxWidth)方法, 用于绘制无填充颜色的文字.

5.使用画布<Canvas>绘制特效

Canvas关于特效功能的属性和方法
方法	变量说明
1. fillStyle属性, 设置用于填充绘图的颜色、渐变或模式。
2. strokeStyle属性，设置用于笔触的颜色、渐变或模式。
3. shadowColor属性，设置用于阴影的颜色。
4. shadowBlur属性，设置用于阴影的模糊级别。
5. shadowOffsetX属性，设置阴影距离形状的水平距离。
6. shadowOffsetY属性，设置阴影距离形状的垂直距离。
7. creatRadialGradient(x0, y0, x1, y1)方法，用于创建线性渐变（用于画布内容）。	x0：渐变开始点的x坐标； y0：渐变开始点的y坐标； x1：渐变j结束点的x坐标； y1：渐变结束点的y坐标；
8. createLinearGradient（x0, y0, r0, x1, y1, r1)方法，创建放射状或环形的渐变（用于画布内容）。	x0：渐变开始圆的x坐标； y0：渐变开始圆的y坐标； r0：开始圆的半径； x1：渐变结束圆的x坐标； y1：渐变结束圆的y坐标； r1：结束圆的半径