HTML5中canvas画图之绘制路径

最新推荐文章于 2024-04-08 20:58:26 发布

花2不谢

最新推荐文章于 2024-04-08 20:58:26 发布

阅读量4k

点赞数 1

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

本文链接：https://blog.csdn.net/qq_25821067/article/details/51627917

版权

这篇博客是作者学习HTML5的实践记录，重点介绍了如何使用canvas元素进行图形绘制，通过代码展示了如何绘制一个简单的三角形，是初学者入门canvas的好资料。

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

刚开始认真学习H5，虽然以前大概看过H5的教程，但是都是属于空看，一直没有认真练习，所以打算从现在开始来认真练习。下面的代码实现的功能是绘制一个三角形。代码比较简单。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>利用路径绘制一个三角形</title>
</head>
<body>
	<canvas id="canvas" width="300" height="300"></canvas>
	<script type="text/javascript">
		var canvas=document.getElementById("canvas");
		var ctx=canvas.getContext("2d");
		ctx.beginPath();//开始绘制路径
		ctx.moveTo(0,0);
		ctx.lineTo(0,290);
		ctx.lineTo(290,290);
		ctx.closePath();//结束路径
		//下面两行是填充图形内部的代码
		ctx.fillStyle="rgb(200,0,0)";//指定填充时使用的颜色与样式
		ctx.fill();
		//下面两行是绘制那个周围路径的代码
		ctx.strokeStyle="rgb(0,0,0)";//指定路径的线颜色与样式
		ctx.stroke();
		
	</script>
</body>
</html>

花2不谢

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5中canvas画图之绘制路径

刚开始认真学习H5，虽然以前大概看过H5的教程，但是都是属于空看，一直没有认真练习，所以打算从现在开始来认真练习。下面的代码实现的功能是绘制一个三角形。代码比较简单。利用路径绘制一个三角形 var canvas=document.getElementById("canvas"); var ctx=canvas.getContext("2d"); ctx.be
复制链接

扫一扫

专栏目录