用HTML绘制一个手机

最新推荐文章于 2024-06-11 17:08:43 发布

@CJL

最新推荐文章于 2024-06-11 17:08:43 发布

阅读量526

点赞数

分类专栏：练习

本文链接：https://blog.csdn.net/qq_44109821/article/details/103677250

版权

练习专栏收录该内容

36 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>绘制手机</title>
	</head>
	<body>
		<canvas id="mycanvas" width="500" height="500"style="border: 1px solid black;"></canvas>
		<script type="text/javascript">
			var c=document.getElementById("mycanvas")
			var ctx=c.getContext("2d")
			ctx.fillStyle="black";ctx.strokeStyle="black"
			ctx.moveTo(40,40);ctx.lineTo(150,40);
            ctx.moveTo(20,60);ctx.lineTo(20,300);
            ctx.moveTo(170,60);ctx.lineTo(170,300);
            ctx.moveTo(40,320);ctx.lineTo(150,320);
			ctx.stroke();
			ctx.beginPath();ctx.arc(150,300,20,0*Math.PI,0.5*Math.PI,false);ctx.stroke()
			ctx.beginPath();ctx.arc(40,300,20,0.5*Math.PI,1*Math.PI,false);ctx.stroke()
			ctx.beginPath();ctx.arc(40,60,20,1*Math.PI,1.5*Math.PI,false);ctx.stroke()
			ctx.beginPath();ctx.arc(150,60,20,1.5*Math.PI,2*Math.PI,false);ctx.stroke()
			ctx.beginPath();ctx.arc(81,60,6,0.5*Math.PI,1.5*Math.PI,false);ctx.fill()
			ctx.fillRect(81,54,30,12)
			ctx.beginPath();ctx.arc(109,60,6,1.5*Math.PI,0.5*Math.PI,false);ctx.fill()
			ctx.beginPath()
			ctx.fillRect(28,80,133,200)
			ctx.beginPath()
			ctx.arc(95,300,10,0*Math.PI,2*Math.PI,false);ctx.fill()
		</script>
	</body>
</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

@CJL

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用HTML绘制一个手机

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>绘制手机</title> </head> <body> <canvas id="mycanvas" width="500" height="500"style=...
复制链接

扫一扫