育才学习网1.如何用html5写特殊符号五角星
首先贴出HTML5页面的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Canvas案例</title>
</head>
<script type="text/javascript" src="script.js"></script>
<body onl oad="draw('canvas')">
<h1>Canvas案例</h1>
<canvas id='canvas' width="400" height="300" />
</body>
</html>
在这个页面中我们写了一个canvas元素。该元素的ID为canvas。然后链接了script.js这个文件。
//script.js
function draw(id)
{
var canvas = document.getElementById(id);
if(canvas==null){
return false;
}
var context = canvas.getContext('2d');
context.fillStyle="#eeeeff";
context.fillRect(0,0,400,300);
context.fillStyle='rgba(255,0,0,0.25)';
context.translate(200,50);
createFiveStar(context);
context.fill();
}
function createFiveStar(context){
var dx = 0;
var dy = 100;
var s = 50;
context.beginPath();
var x = Math.sin(0);
var y = Math.cos(0);
var dig = Math.PI/5*4;
for(var i=0;i<5;i++){
var x = Math.sin(i*dig);
var y = Math.cos(i*dig);
context.lineTo(dx+x*s,dy+y*s);
}
context.closePath();
}
我们提供了两个方法一个是draw方法。当页面加载完成的时候就会执行draw方法中的内容。
而draw方法中呢又会执行createFiveStart函数。
下面我来分析下createFiveStart函数的内容：
function createFiveStar(context){
var dx = 0；//画出来的五角星x偏移位置
var dy = 100；//画出来的五角星y偏移位置
var s = 50；//画出来的五角星的大小
context.beginPath（)；//开始路径绘制
var x = Math.sin(0)；//默认的x坐标
var y = Math.cos(0)；//默认的y坐标
var dig = Math.PI/5*4；//弧度值
for(var i=0;i<5;i++){
var x = Math.sin(i*dig);
var y = Math.cos(i*dig);
context.lineTo(dx+x*s,dy+y*s)；//划线
}
context.closePath（)；//结束路径
}
好了到了这里我们就完成了HTML5中，五角星的绘制。
2.html怎么显示五角星
CSS样式：
.star-five {
margin: 50px 0;
position: relative;
display: block;
color: red;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid red;
border-left: 100px solid transparent;
-moz-transform: rotate(35deg);
-webkit-transform: rotate(35deg);
-ms-transform: rotate(35deg);
-o-transform: rotate(35deg);
}
3.如何用html5写特殊符号五角星
首先贴出HTML5页面的代码：<！DOCTYPE html>
<meta charset="UTF-8" />