HTML5 高级之canvas 绘制图形

最新推荐文章于 2025-06-23 17:49:05 发布

猫爷001

最新推荐文章于 2025-06-23 17:49:05 发布

阅读量5.9k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： HTML5 文章标签： HTML5 canvas

本文链接：https://blog.youkuaiyun.com/maoye198602102339/article/details/82941084

本文深入探讨HTML5 canvas如何用于在网页上绘制图形。canvas提供了一系列API，如save、restore、translate等，用于图形绘制。此外，文章介绍了颜色、渐变的设置，以及如何创建线性渐变和放射性渐变。通过strokeStyle和fillStyle可以指定线条和填充颜色，全局透明度可通过globalAlpha调整。同时，canvas支持自定义路径来绘制复杂形状，包括beginPath、closePath、stroke和fill等方法。最后，举例展示了如何利用这些技巧绘制一个圆形。

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

canvas是HTML5中新增的标签，像所有dom一样，拥有自己的属性、方法、和事件，其中就有绘图的方法，js能够调用它在网页上完成绘图。

canvas也是HTML5中最强大的特性之一，允许开发者使用动态和交互式方法在web上实现桌面应用程序的功能

canvas元素会在网页上创建一个空白区域，然后通过API操作这个区域，与空白的div元素相似，用途完全不同

语法：<canvas id="ddd" width="200" height="200"></canvas>

绘制矩形：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>canvas</title>
	<script type="text/javascript">
		function init(argument) {
			//获取canvas区域
			var canvas = document.getElementById("canvas");
			//获取绘图canvas的上下文，接收两个参数2d或者3d
			var ctx = canvas.getContext("2d");
			//绘制一个带描边的矩形 参数：（x,y,width,height）
			ctx.strokeRect(10,10,260,260);
			//绘制一个颜色实心的矩形
			ctx.fillRect(20,20,240,240);
			//清除一个矩形形状的区域
			ctx.clearRect(30,30,220,220);
		}
		window.addEventListener("load",init,false);
	</script>
</head>
<body&g