Canvas 简单画个Z字母

贵哥的编程之路

发布于 2022-08-15 13:31:59

3330

发布于 2022-08-15 13:31:59

作者：陈业贵华为云享专家 51cto(专家博主明日之星 TOP红人) 阿里云专家博主

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<style type="text/css">
	canvas
	{
		border: 1px solid #ccc;
		
	}
</style>
<body>
<canvas id="myCanvas" width="800" height="600">
<!--固定语法，宽度800 高度600-->
</canvas>
	<script type="text/javascript">
	window.onload=function()
	{
		var oCanvas=document.querySelector("#myCanvas");//获取canvas对象
		oGc=oCanvas.getContext('2d');//类型2d
		oGc.beginPath();
		oGc.lineWidth=20;
		oGc.lineCap='round';//线条的开始与结尾处
		oGc.lineJoin='bevel';//两条直线连接处的形状
		oGc.moveTo(100,100);//开始点
		oGc.lineTo(300,100);//结束点
		oGc.lineTo(100,300);
		oGc.lineTo(300,300);
		oGc.stroke();//连接起
	}
	</script>
</body>
</html>