浅谈canvas

最新推荐文章于 2023-03-26 20:47:40 发布

前水员

最新推荐文章于 2023-03-26 20:47:40 发布

阅读量441

点赞数

分类专栏： js 前端文章标签： canvas javascript

本文链接：https://blog.csdn.net/qq_43465434/article/details/115468539

版权

本文详细介绍了HTML5的Canvas标签，包括新建Canvas、基本使用方法如填充和绘制，以及像素化和动画思想。通过实例展示了如何填充矩形、创建动画以及绘制不规则路径，同时提到了Canvas的API和浏览器兼容性问题。

摘要由CSDN通过智能技术生成

Canvas标签是HTML5提出的一个新标签，颠覆了之前Flash在网页的主导地位。它是一个轻量级的画布，我们使用Canvas进行JS编程时，不需要添加额外的插件，在PC端、移动端性能表现良好，逐渐成为主流。

文章目录

新建一个Canvas

首先，我们看一下一个标准canvas标签是什么样子的：

<canvas width="500" height="400">
当前的浏览器不支持，请升级更新浏览器！
</canvas>

canvas的标签属性只有两个，即width和height,分别表示画布的宽度和高度。
【注意】canvas的width和height无法使用css进行设置，否则画布会出现失真现象。

canvas便签内的文字是提示文本。它有两个特点：
1.当在高浏览器版本时，canvas标签内的文本不会出现。
2.当在低浏览器版本时，canvas标签内的文本会出现并代替画布的内容。

一句话，这是为了适应不同浏览器版本而产生的功能，当浏览器版本过低时，canvas画布本身的内容无法显示，文本内容则会提示使用者升级浏览器。这也是canvas目前的弊端——浏览器兼容性并不完美。

低版本浏览器效果

Canvas的基本使用——填充

同样，我们先来看canvas填充一个2d图案是的使用场景：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<canvas 
			width="500" 
			height="400" 
			id="myCanvas"
		>
			您的浏览器版本过低，请升级更新浏览器！
		</canvas>
		<script>
			//得到canvas画布
			let canvas = document.querySelector("#myCanvas");
			//得到所有的上下文，上下文有两个，分别时2d和3d上下文
			//所有的图形都在js中设置，和canvas标签本身以及css都没有关系
			let ctx = canvas.getContext("2d");
			//设置颜色
			ctx.fillStyle = 'orangered';
			//绘制形状，这里举例为矩形
			ctx.fillRect(100,100,200,50);
		</script>
	</body>
</html>

实现的效果图如下：
在这里插入图片描述
通过如上代码，我们成功填充了一个红色矩形，下面来介绍canvas的绘制步骤
1.获取上下文
上下文共有两种，分别为2d和3d。顾名思义，也就是2D图形和3D图形。这里我们填充一个矩形，所以我们首先要获取2d的上下文。获取上下文需要getContext()方法，里面的参数为字符串，如果我们需要获取2d上下文，只需向里面传入‘2d’即可。
2.设置2d图案样式
根据canvas的定义，我们需要先设置颜色，再设置形状。如果顺序颠倒，则无法正常显示。