<!DOCTYPE html>
<html>
<head>
<style>
#myCanvas{
box-shadow:0 0 10px rgba(0,0,0,0.8);
}
</style>
<title>曲线</title>
</head>
<body>
<canvas id=myCanvas width=800 height=800></canvas>
<script>
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
-
ctx.shadowColor='black';
ctx.shadowOffsetX=8;
ctx.shadowOffsetY=10;
ctx.shadowBlur=3;
-
//抛物线
ctx.save();
ctx.translate(100,700);
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(700,0);
ctx.moveTo(0,0);
for(var i=0;i<25;i+=0.1)
{
var x=i*10;
var y=-(((i-12)*(i-12))-20);
ctx.lineTo(x,y);
}
ctx.stroke();
ctx.restore();
</script>
</body>
</html>