HTML 5 绘图

菇毒

已于 2022-02-03 14:10:53 修改

阅读量1.2k

点赞数 1

分类专栏： web 前端学习文章标签： html javascript 前端 html5 图形

于 2022-02-02 21:17:49 首次发布

本文链接：https://blog.csdn.net/weixin_43960383/article/details/122772138

版权

web 前端学习专栏收录该内容

90 篇文章 4 订阅

订阅专栏

这篇博客介绍了HTML5的canvas标签及其绘图API的使用方法。通过示例代码展示了如何使用JavaScript设置画笔属性、绘制线段、圆形、矩形，并填充颜色。实例包括了不同形状的绘制，如直线、圆弧和实心图形，为初学者提供了基础的HTML5绘图教程。

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

HTML 5 新增画布标签 <canvas>，在 JavaScript 脚本里，使用上下文对象在画布里绘制矩形和圆等基本图形，还能显示图像、输出文字；

1 画布标签 `<canvas>`

画布标签在页面中显示一个设定背景色的画布；
示例代码如下：

<canvas id="canvas" height="300" width="300" style="background:black">你的浏览器不支持此标签</canvas>

在获取 HTML 5 的内容对象 context（画笔）后，借助 Canvas API 和 JavaScript 能实现画布或其他图像操作；
关键的代码如下所示：

var canvas=document.getElementById('canvas');        //获取画布 DOM
var ct=canvas.getContext('2d');        //设置绘图上下文对象

2. HTML 5 绘图 API

画图前，要先设置属性：lineWidth（线宽）、strokeStyle（画笔颜色）；
画直线前，先使用方法 moveTo( ) 定义起始点；
绘制某个图形后，再绘制新图形时，需使用方法 beginPath( )；
线段方法 lineTo( )、矩形方法 rect( )、**弧（圆）**方法 arc( )，还要使用方法 stroke( )，才能在画布上绘制出响应的路径；
填充某个封闭图形时，需设置属性 fillStyle 并使用方法 fill( )；
方法 strokeReck( ) 等效于 rect( ) + stroke( )；
方法 fillRect( ) 等效于 rect( ) + fill( )，使用 fill( ) 方法后，就不用 stroke( ) 方法了；
例子：HTML 5 绘图功能

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML 5 绘图</title>
		<!-- 画布宽、高、背景色 -->
		<canvas width="500" height="600" style="background:lawngreen" id="canvas"></canvas> 
	</head>
	<body>
		<script>
			var canvas=document.getElementById('canvas');		//获取画布 DOM
			var tx=canvas.getContext('2d');					//设置上下文对象
			console.log(canvas);							//测试
			//线段
			tx.lineWidth=5;									//线宽
			tx.strokeStyle="black";							//画笔颜色
			tx.moveTo(30,20);								//笔触位置（开始点）
			tx.lineTo(300,20);								//结束点
			tx.stroke();									//调用 stroke() 才能真正作用于画布，绘制已定义的路径
			//圆形
			tx.beginPath();									//开始路径，关键
			tx.lineWidth=3;									
			tx.strokeStyle="orange";						//设置绘画颜色
			tx.arc(80,100,50,0,360,false);					//画弧方法（左右，上下，大小，0,弧度，是否为全圆
			tx.stroke();									//必须
			tx.closePath();									//结束路径，可省略
			//实心圆形
			tx.beginPath();
			tx.fillStyle="rgb(133,130,0)";					//设置填充颜色
			tx.arc(200,100,50,0,360,false);
			tx.fill();										//填充
			tx.stroke();									//可省略，因前面使用了 fill() 方法
			tx.closePath();
			//矩形
			tx.strokeRect(20,220,100,100);					//矩形的位置（左右，上下，矩形上下边线长，左右边长
			//实心矩形
			tx.beginPath();
			tx.rect(150,220,100,100);
			tx.fill();										//填充
			tx.closePath();
			tx.fillRect(150,200,100,100);
		</script>
	</body>
</html>