HTML5作业2绘画h5标志
程序员文章站
2022-04-19 21:27:29
...
分析
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>
结果如图
推荐阅读