Canvas画线

最新推荐文章于 2024-04-10 16:05:41 发布

学习笔记666

最新推荐文章于 2024-04-10 16:05:41 发布

阅读量602

点赞数

分类专栏： HTML5

本文链接：https://blog.csdn.net/github_26672553/article/details/51281285

版权

HTML5 专栏收录该内容

43 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<title>画线</title>
	<style type="text/css">
		*{margin: 0;padding: 0}
	</style>
</head>
<body>
	<canvas id="myCanvas" width="200" height="100">你的浏览器不支持HTML5</canvas>

	<script type="text/javascript">
		var c = document.getElementById("myCanvas");
		var ctx = c.getContext("2d");
		ctx.lineWidth = 10;
		ctx.strokeStyle = "red";

		ctx.lineCap = "butt";
		ctx.beginPath();
		ctx.moveTo(10,10);
		ctx.lineTo(150,10);
		ctx.stroke();

		ctx.lineCap = "round";
		ctx.beginPath();
		ctx.moveTo(10,40);
		ctx.lineTo(150,40);
		ctx.stroke();

		ctx.lineCap = "square";
		ctx.beginPath();
		ctx.moveTo(10,70);
		ctx.lineTo(150,70);
		ctx.stroke();

	</script>
</body>
</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

学习笔记666

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Canvas画线

画线 *{margin: 0;padding: 0} 你的浏览器不支持HTML5 var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.lineWidth = 10; ctx.strokeStyle = "red"; ctx.lineCap = "b
复制链接

扫一扫