Please Call Me LeiFeng!!!
1.用canvas画个笑脸
"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
"http://www.w3.org/1999/xhtml">
"Content-Type" cOntent="text/html; charset=utf-8" />
<body align="center">
body>
2.用canvas画太极图,对老师提供的做了翻转操作
<html>
<head>
<title>作业太极图title>
<meta charset="utf-8">
head>
<body>
<canvas id="myCanvas" height="400" style="border:1px solid; background:#E1E1FF;">
canvas>
<script type="text/Javascript"> var canvas = document.getElementById("myCanvas"); var cOntext= canvas.getContext("2d"); context.beginPath(); context.arc(200,200,80,1.5*Math.PI,Math.PI/2,false); context.fillhljs-string">"white"; context.closePath(); context.fill(); context.beginPath(); context.arc(200,200,80,Math.PI/2,1.5*Math.PI,false); context.fillhljs-string">"black"; context.closePath(); context.fill(); context.beginPath(); context.arc(200,240,40,0,Math.PI*2,true); context.fillhljs-string">"black"; context.closePath(); context.fill(); context.beginPath(); context.arc(200,160,40,0,Math.PI*2,true); context.fillhljs-string">"white"; context.closePath(); context.fill(); context.beginPath(); context.arc(200,160,5,0,Math.PI*2,true); context.fillhljs-string">"black"; context.closePath(); context.fill(); context.beginPath(); context.arc(200,240,5,0,Math.PI*2,true); context.fillhljs-string">"white"; context.closePath(); context.fill(); script>
body>
html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>第三周太极图作业title>
head>
<body>
<canvas id="myCanvas" height="400" style="border:1px solid; background:#EEE9E9;">
你的浏览器不支持canvas画布元素,请更新浏览器获得演示效果。
canvas>
<script type="text/Javascript"> var canvas = document.getElementById("myCanvas"); var cOntext= canvas.getContext("2d"); context.beginPath(); context.arc(200,200,80,0,Math.PI,true); context.fillhljs-string">"white"; context.strokehljs-string">"white"; context.fill(); context.beginPath(); context.arc(200,200,80,0,Math.PI,false); context.fillhljs-string">"#000000"; context.strokehljs-string">"black"; context.fill(); context.beginPath(); context.arc(160,200,40,0,Math.PI*2,true); context.fillhljs-string">"black"; context.closePath(); context.fill(); context.beginPath(); context.arc(240,200,40,0,Math.PI*2,true); context.fillhljs-string">"white"; context.strokehljs-string">"white"; context.closePath(); context.fill(); context.stroke(); context.beginPath(); context.arc(160,200,5,0,Math.PI*2,true); context.fillhljs-string">"white"; context.closePath(); context.fill(); context.beginPath(); context.arc(240,200,5,0,Math.PI*2,true); context.fillhljs-string">"black"; context.closePath(); context.fill(); script>
body>
html>
3.自己任意画个图
"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
"http://www.w3.org/1999/xhtml">
"Content-Type" cOntent="text/html; charset=utf-8" />
<body>
矩形加赛贝尔曲线
body>
4.渐变和阴影效果的使用(在第二周作业基础上的)
"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
"http://www.w3.org/1999/xhtml">
"Content-Type" cOntent="text/html; charset=utf-8" />
矩形加赛贝尔曲线