HTML5作业2绘画h5标志

最新推荐文章于 2024-05-31 22:20:16 发布

沫雨娉娉

最新推荐文章于 2024-05-31 22:20:16 发布

阅读量398

点赞数

文章标签： html5 css

本文链接：https://blog.csdn.net/Sad_dog/article/details/104707730

版权

分析
1定位出整个页面背景区域，并实现背景光束
2使用画布定义logo样式，并画出盾牌的背景
3画出盾牌的右半边
4画出浅橘色区域
5画出“5”的左半边
6画出“5”的右半边
7在盾牌上方添加“HTML”字样
源代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>HTML5 Logo</title>
		<style type="text/css">
			body{
			    margin: 0;padding: 0;
			}
			div{
			    position: absolute;
			}
			/*给整个容器设置样式*/
			.bg{
			    width: 800px;  height: 600px;  background: #f2f2f2;   overflow: hidden;
			}
			/*给beam元素设置样式*/
			.beam{
			    width: 1600px;   height: 20px;  background: #fff;  top: 290px;  left: -400px;
			}
			#box{
				z-index: 2;
				margin-left: 260px;
				margin-top: 190px;
			}
			h1{
				z-index: 3;
				font-size: 60px;
				position: absolute;
				margin-left: 299px;
				margin-top: 111px;
			}
		</style>
		<script type="text/javascript">
			function draw() {
				var c = document.getElementById("firstcancas");
				var cxt = c.getContext("2d");
				//红色区域，及其坐标   
				cxt.fillStyle = "#E34C26";
				cxt.beginPath();
				cxt.moveTo(39, 250);
				cxt.lineTo(17, 0);
				cxt.lineTo(262, 0);
				cxt.lineTo(239, 250);
				cxt.lineTo(139, 278);
				cxt.closePath();
				cxt.fill();
				
				// 盾牌的右半边
				cxt.fillStyle = "#F06529";
				cxt.beginPath();
				cxt.moveTo(139, 257);
				cxt.lineTo(220, 234);
				cxt.lineTo(239, 20);
				cxt.lineTo(139, 20);
				cxt.closePath();
				cxt.fill();

				// 左半边5
				cxt.fillStyle = "#EBEBEB";
				cxt.beginPath();
				cxt.moveTo(139, 113);
				cxt.lineTo(98, 113);
				cxt.lineTo(96, 82);
				cxt.lineTo(139, 82);
				cxt.lineTo(139, 51);
				cxt.lineTo(62, 51);
				cxt.lineTo(70, 144);
				cxt.lineTo(139, 144);
				cxt.closePath();
				cxt.fill();

				cxt.beginPath();
				cxt.moveTo(139, 193);
				cxt.lineTo(105, 184);
				cxt.lineTo(103, 159);
				cxt.lineTo(76, 159);
				cxt.lineTo(76, 207);
				cxt.lineTo(139, 225);
				cxt.closePath();
				cxt.fill();
				
				// 右半边5
				cxt.fillStyle = "#fff";
				cxt.beginPath();
				cxt.moveTo(139, 51);
				cxt.lineTo(209, 51);
				cxt.lineTo(207, 82);
				cxt.lineTo(139, 82);
				cxt.closePath();
				cxt.fill();
				

				
				cxt.beginPath();
				cxt.moveTo(139, 113);
				cxt.lineTo(205, 113);
				cxt.lineTo(199, 207);
				cxt.lineTo(139, 225);
				cxt.lineTo(139, 193);
				cxt.lineTo(165, 184);
				cxt.lineTo(170, 144);
				cxt.lineTo(139, 144);
				
				cxt.closePath();
				cxt.fill();
			}
		</script>

	</head>
	<body onLoad="draw();">
		<h1>HTML</h1>
		<div class="bg"><!-- logo最外层的盒子div -->
		          <div class="beam" style="transform:rotate(5deg)"></div>
		          <div class="beam" style="transform:rotate(15deg)"></div>
		          <div class="beam" style="transform:rotate(25deg)"></div>
		          <div class="beam" style="transform:rotate(35deg)"></div>
		          <div class="beam" style="transform:rotate(45deg)"></div>
		          <div class="beam" style="transform:rotate(55deg)"></div>
		          <div class="beam" style="transform:rotate(65deg)"></div>
		          <div class="beam" style="transform:rotate(75deg)"></div>
		          <div class="beam" style="transform:rotate(85deg)"></div>
		          <div class="beam" style="transform:rotate(95deg)"></div>
		          <div class="beam" style="transform:rotate(105deg)"></div>
		          <div class="beam" style="transform:rotate(115deg)"></div>
		          <div class="beam" style="transform:rotate(125deg)"></div>
		          <div class="beam" style="transform:rotate(135deg)"></div>
		          <div class="beam" style="transform:rotate(145deg)"></div>
		          <div class="beam" style="transform:rotate(155deg)"></div>
		          <div class="white beam" style="transform:rotate(165deg)"></div>
		          <div class="white beam" style="transform:rotate(175deg)"></div>
		        
		        
		    </div>
		<div id="box">
			<canvas id="firstcancas"  width="600" height="400"></canvas>
		</div>
		
	</body>
</html>

结果如图
在这里插入图片描述

沫雨娉娉

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5作业2绘画h5标志

分析1定位出整个页面背景区域，并实现背景光束2使用画布定义logo样式，并画出盾牌的背景3画出盾牌的右半边4画出浅橘色区域5画出“5”的左半边6画出“5”的右半边7在盾牌上方添加“HTML”字样源代码如下<!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" con...
复制链接

扫一扫