如何用html5写特殊符号五角星

如何用html5写特殊符号五角星,第1张

首先贴出HTML5页面的代码:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8" />

<title>Canvas案例</title>

</head>

<script type="text/javascript" src="script.js"></script>

<body onload="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=0i<5i++){

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=0i<5i++){

var x = Math.sin(i*dig)

var y = Math.cos(i*dig)

context.lineTo(dx+x*s,dy+y*s)//划线

}

context.closePath()//结束路径

}

好了到了这里我们就完成了HTML5中,五角星的绘制。

#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)

}

#star-five:before {

   border-bottom: 80px solid red

   border-left: 30px solid transparent

   border-right: 30px solid transparent

   position: absolute

   height: 0

   width: 0

   top: -45px

   left: -65px

   display: block

   content: ''

   -webkit-transform: rotate(-35deg)

   -moz-transform:    rotate(-35deg)

   -ms-transform:     rotate(-35deg)

   -o-transform:      rotate(-35deg)

}

#star-five:after {

   position: absolute

   display: block

   color: red

   top: 3px

   left: -105px

   width: 0px

   height: 0px

   border-right: 100px solid transparent

   border-bottom: 70px solid red

   border-left: 100px solid transparent

   -webkit-transform: rotate(-70deg)

   -moz-transform:    rotate(-70deg)

   -ms-transform:     rotate(-70deg)

   -o-transform:      rotate(-70deg)

   content: ''

}

用css3就可以直接实现五角星在html上的实现


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/6265294.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-19
下一篇 2023-03-19

发表评论

登录后才能评论

评论列表(0条)

保存