如何使用HTML5中canvas绘制一个立体金字塔图形？（javascript可以）

html-css022

如何使用HTML5中canvas绘制一个立体金字塔图形？（javascript可以）,第1张

<html>

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=UTF-8">

<title>MYJZT</title>

<body onload="draw('canvas')">

<div style="text-align:center">

<canvas id="myCanvas" width="400" height="500" solid #c3c3c3"></canvas>

<script type="text/javascript">

var c=document.getElementById("myCanvas")

var cxt=c.getContext("2d")

cxt.strokeStyle="black"

cxt.beginPath()

cxt.moveTo(200,0)

cxt.lineTo(0,400)

cxt.lineTo(400,400)

cxt.lineTo(200,0)

cxt.moveTo(200,0)

cxt.lineTo(50,200)

cxt.lineTo(0,400)

cxt.moveTo(200,0)

cxt.lineTo(350,200)

cxt.lineTo(400,400)

cxt.closePath()

cxt.stroke()

</script>

</body>

</head>

</html>

<!DOCTYPE html>

<html>

<head>

<script>

var row=10//把5替换成要生成的行数。

var Blank="　"//这儿如果用&nbsp生成的空格，并不会与*同样大，所以，就不好控制。现改为全角的空格，用于测试。

var Str="★"//*号改为用五角星来测试

for(r=0r<rowr++){//循环行

for(b=0b<row-r-1b++){//循环空格

document.write(Blank)//输出空格

}

for(s=0s<=r*2s++){//循环字符(这儿是*)

document.write(Str)//输出字符(这儿是*)

}

document.write("<br>")//输出换行符

}

</script>

</head>

<body>

</body>

</html>