HTML5作业2绘画h5标志
分析
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>
