canvas小案例绘制图形和线段

最新推荐文章于 2022-11-30 17:41:04 发布

么贺贵

最新推荐文章于 2022-11-30 17:41:04 发布

阅读量124

点赞数 1

分类专栏： H5学习文章标签： html5 canvas

本文链接：https://blog.csdn.net/ayhg1/article/details/118067902

版权

H5学习专栏收录该内容

14 篇文章 1 订阅

订阅专栏

canvas小案例绘制图形和线段

想了解更全面的canvas API可以点击右侧: canvas简介及常用API

canvas 使用

canvas 标签在页面只显示一个设定背景颜色画布，如果需要需要产生新内容或者进行画图操作，需要借助canvas API（HTML5 的内置对象context）和JavaScript操作实现画图或者其他图像操作。

<canvas id="mycanvas" width="300" height="300">
			您的浏览器不支持canvas标签
</canvas>

如下图所示，canvas元素默认被网格所覆盖。通常来说网格中的一个单元相当于canvas元素中的一像素。
在这里插入图片描述

canvas绘制图形样例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body {
				background-color: #99CCFF;
			}

			#canvas {
				background-color: #fff;
				border: 1px salmon solid;
				/*  
					css可以设置width 和height 但是不建议使用css设置画布的宽高，不会影响画布本身的宽高
					设置canvas的宽高，得用HTML的属性设置width和heigth
					 
					 */
				/* 				width: 300px;
					height: 300px; */

			}
		</style>
	</head>
	<body>
		<canvas id="canvas" width="500" height="500">
			您的浏览器不支持canvas标签，请升级浏览器
		</canvas>

		<script type="text/javascript">
			// 使用dom 方法 得到画布
			var canvas = document.getElementById('canvas');
			// 使用画布的上下文，获取绘图功能对象，就像拿到一支画笔，这只画笔只在当前画布有效
			var ctx = canvas.getContext('2d');
			// console.log(ctx);
			/* 
				x,y 指的就是矩形的左上角坐标
			 */
			ctx.fillRect(10, 10, 100, 100); //绘制填充矩形
			ctx.strokeRect(120, 10, 100, 200); // 绘制边框矩形
			ctx.fillRect(10, 120, 100, 200); //绘制填充矩形
			// 清除指定的矩形区域，然后这块区域会变的完全透明。
			ctx.clearRect(30, 30, 50, 50); //清除矩形

			// 实际在画布上绘制矩形得使用 fill 或 stroke 方法填充
			ctx.rect(230, 230, 60, 60); //创建矩形
			ctx.stroke();
			// ctx.fill();
		</script>
	</body>
</html>

绘制线段样例（html和css代码像上面就可以，这里只保存js）：

<script type="text/javascript">
			// 使用dom 方法 得到画布
			var canvas = document.getElementById('canvas');
			// 使用画布的上下文，获取绘图功能对象，就像拿到一支画笔，这只画笔只在当前画布有效
			var ctx =canvas.getContext('2d');
			
			/* 
				绘制路径的方法：使用路径绘制图形
					1. 创建路径的起点
					2. 调用绘制方法去绘制出路径(图形)
					3. 把路径封闭
					4. 一旦路径生成，通过描边或者填充路径来渲染图形。
			 */
			
			// 新建一条path
			ctx.beginPath();
			// x,y 将画笔移动到指定的坐标位置
			ctx.moveTo(50,50);
			ctx.lineTo(200,50);
			// 闭合路径 会拉一条从当前点到path 起点的直线。如果与当前点的起点重合，则什么都不做
			ctx.closePath();
			// ctx.lineTo(100,100);
			// 绘制路径(描边)
			ctx.stroke();
		</script>

绘制三角形（html和css代码像上面就可以，这里只保存js）：

<script type="text/javascript">
			// 使用dom 方法 得到画布
			var canvas = document.getElementById('canvas');
			// 使用画布的上下文，获取绘图功能对象，就像拿到一支画笔，这只画笔只在当前画布有效
			var ctx =canvas.getContext('2d');
			
			/* 
				绘制路径的方法：使用路径绘制图形
					1. 创建路径的起点
					2. 调用绘制方法去绘制出路径(图形)
					3. 把路径封闭
					4. 一旦路径生成，通过描边或者填充路径来渲染图形。
			 */
			
			// 新建一条path
			ctx.beginPath();
			// x,y 将画笔移动到指定的坐标位置
			ctx.moveTo(50,50);
			ctx.lineTo(200,50);
			ctx.lineTo(200,200);
			// 闭合路径 会拉一条从当前点到path 起点的直线。如果与当前点的起点重合，则什么都不做
			ctx.closePath();
			// ctx.lineTo(300,200);
			// 绘制路径(描边)
			// 创建矩形
			ctx.rect(50,50,5,5);
			ctx.rect(200,50,5,5);
			ctx.rect(200,200,5,5);
			ctx.stroke();
			// ctx.fill();
		</script>

制作整理不易，以上内容均为原创（参考了部分官方文档和老师整理的案例）。如要引用请附上本文链接，如有疑问可以在评论区畅所欲言，作者看到会第一时间回复，欢迎交流！

么贺贵

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
canvas小案例绘制图形和线段

canvas小案例绘制图形和线段想了解更全面的canvas API可以点击右侧: canvas简介及常用APIcanvas绘制图形样例：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> body { background-color: #99CCFF;
复制链接

扫一扫