H5起步02之-----canvas_01基本用法及其注意点

最新推荐文章于 2025-05-17 10:21:40 发布

原创最新推荐文章于 2025-05-17 10:21:40 发布 · 206 阅读

0 ·

CC 4.0 BY-SA版权

本文深入讲解HTML5的Canvas元素，探讨其概念、属性、使用技巧及注意事项，包括如何利用JavaScript进行绘图和动画创作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

01，概念
<canvas>是HTML5新增的元素标签【不是属性】，可用于通过Javascript的脚本来绘制图形或则创建动画

02，<canvas>标签内部元素
如果浏览器支持canvas，则不会读取canvas内部的任何消息
若不支持，则正常读取渲染【所以我们一般会在canvas里面设置提示语】

03，<canvas>属性
<canvas>的两个属性，width，height和background-color；
若没有设置，则canvas默认width300,height150，background-color为浏览器的background-color

04，画布width和height的放置位置【注意】
放置在内联HTML中只会影响画布本身不影响画布内容
放置在CSS中不但会影响画布本身还会影响画布内容等比例缩放

05，渲染上下文
<canvas>只是负责提供一个场所画布，但是要想在其上面绘画，我们必须要找到画笔【渲染上下文】 .getContext是一个获取渲染上下文和它的绘画权限的功能方法，其中的参数‘2d’,是渲染上下文格式

简单示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>基本用法及其注意点</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			
			/* 隐藏X轴滚动条 */
			html,body{
				height: 100%;
				overflow-x: hidden;
				background-color: pink;
			}
	
	        /**
	        canvas默认width300,height150
	        背景颜色为浏览器背景颜色
	        注意点：
	        01，canvas的width,height不要设置在CSS中
	        	不然会影响画布内容大小的，最好设置在内联html中。
	        02，如果浏览器支持canvas，则不会读取canvas内部的任何消息
	        	若不支持，则正常读取渲染【所以我们一般会在canvas里面设置提示语】
	        */
			#test{
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				margin: auto;
				background-color: white;
			}
		</style>
	</head>
	<body>
		<canvas id="test" width="300px" height="200px">
			<!-- 提示语 -->
			<span> 对不起，您的浏览器版本太低。<a href="https://www.twinkstar.com/">点我</a>下载星愿浏览器 </span>
		</canvas>
	</body>
	<script type="text/javascript">
		//注意querySelector有坑,可以通过查看官方文档
		let testNode = document.querySelector('#test');
		//首先我们得判断浏览器支不支持这个接口
		if(testNode.getContext) {
			//然后我们要拿到画笔
			let ctx = testNode.getContext('2d');
			/**
			 * 画笔有两个口
			 * 一个是画填充的口，fill;另一个是画线的口，stroke
			 * 在这里给实心口注入pink粉色
			 */
			ctx.fillStyle = "pink";
			ctx.fillRect(75, 50, 100, 100);
		}
 	</script>
</html>

在这里插入图片描述
04注意点demo:
将width和heigth放在CSS中

	#test{
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
		width: 300px;
		height: 200px;
		background-color: white;
	}

内容会等比例伸缩
在这里插入图片描述