怎么样制作JavaScript心形代码

JavaScript011

怎么样制作JavaScript心形代码,第1张

脚本说明:

第一步:把如下代码加入<body>区域中

<style type="text/css">

body

{

background-color:#FFFFFF

font-family: Arial

font-size:10pt

}

</style>

<script>

text=new Array('www','njcatv','net','需要放大的

/\/\

\ /

\/

文字')

var numText=4

color=new Array('#000000','#2F2F2F','#4F4F4F','#7F7F7F','#408080')

var numColors=5

var endSize=70

var Zspeed=30

var Cspeed=200

var font='Arial Black'

var hide=false

var size=10

var gonum=0

var ie, n

if (document.all) {

n=0

ie=1

zoomText='document.all.zoom.innerText=text[num]'

zoomSize='document.all.zoom.style.fontSize=size'

closeIt=""

fadeColor="document.all.zoom.style.color=color[num]"

}

if (document.layers) {

n=1ie=0

zoomText=""

zoomSize="document.zoom.document.write('<p align=\"center\" style=\"font-family:'+font+'font-size:'+size+'pxcolor:'+color[0]+'\">'+text[num]+'</p>')"

closeIt="document.zoom.document.close()"

fadeColor="document.zoom.document.write('<p align=\"center\" style=\"font-family:'+font+'font-size:'+endSize+'pxcolor:'+color[num]+'\">'+text[numText-1]+'</p>')"

}

function zoom(num,fn){

if (size<endSize){

eval(zoomText)

eval(zoomSize)

eval(closeIt)

size+=5

setTimeout("zoom("+num+",'"+fn+"')",Zspeed)

}else{

eval(fn)

}

}

function fadeIt(num){

if (num<numColors){

eval(fadeColor)

eval(closeIt)

num+=1

setTimeout("fadeIt("+num+")",Cspeed)

}else{

hideIt()

}

}

function hideIt(){

if(hide){

if(ie)document.all.zoom.style.visibility="hidden"

if(n)document.layers.zoom.visibility="hidden"

}

}

function init(){

if(ie){

document.all.zoom.style.color=color[0]

document.all.zoom.style.fontFamily=font

}

if(ie || n) go(0)

}

function go(num){

gonum+=1

size=10

if(num<numText){

zoom(num,'go('+gonum+')')

}else{

fadeIt(0)

}

}

</script>

<div id="zoom" align="center" style="position:absolutetop:150">

html5确实很方便

<!doctype html>

<html>

<head>

<meta charset="UTF-8">

<title>Untitled Document</title>

</head>

<body>

<p style="text-align:center"><canvas id="canvas1" height="600" width="600"></canvas></p>

<script type="text/javascript">

var canvas = document.getElementById("canvas1")

var ctx = canvas.getContext("2d")

ctx.translate(300,300) //sets center in the middle of the picture

drawHeart()

function drawHeart() {

   ctx.beginPath()

   ctx.moveTo(0,-100)

   ctx.bezierCurveTo(120,-300, 300,-100, 200,50)

   ctx.lineTo(0,250)

   ctx.lineTo(-200,50)

   ctx.bezierCurveTo(-300,-100, -120,-300, 0,-100)

   ctx.closePath()

   ctx.fillStyle="#ff0000"

   ctx.fill()

}

</script>

</body>

</html>

在电脑上用代码弄爱心方法如下:

1、打开运行电脑中安装的dreamware软件,打开“文件”菜单中的“新建”功能,创建一个新的HTML文件。

2、在body标签中加入如下的html代码,设置显示爱心的对象。

3、在head标签中添加css样式标签<style>,并写入CSS样式,把爱心的对象变成红色的方块。

4、给这个元素设置伪元素CSS样式。

5、这个爱心的一半就出来了,再给它进行一下角度的45度旋转。

6、接下来只需要再添加另外一边的爱心,再把两个叠加在一起就完成了。