坐标轴用来定义一个坐标系的一组直线或一组线；位于坐标轴上的点的位置由一个坐标值所唯一确定，而其他的坐标轴上的点的位置由一个坐标值所唯一确定，而其他的坐标在此轴上的值是零。
<!DOCTYPE html><html>
<head>
<title>Cos演示</title>
<meta charset='utf-8'>
</head>
<body style='<a href="https://www.baidu.com/s?wd=text-align&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1dhmynLuj0vuH01rj9-rjI90ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EnHT4PH6kPjcsrHf3Pj0LPHcvPs" target="_blank" class="baidu-highlight">text-align</a>:center'>
<canvas width='800' height='600' id='canvas' style='border:1px solid'>
</canvas>
<script>
var canvas=document.getElementById('canvas')
var ctx=canvas.getContext('2d')
function drawAxis(){
ctx.translate(400,300)
//x 轴
ctx.beginPath()
ctx.moveTo(-380,0)
ctx.lineTo(380,0)
ctx.lineTo(372,3)
ctx.lineTo(372,-3)
ctx.lineTo(380,0)
ctx.stroke() //描边
//y 轴
ctx.moveTo(0,200)
ctx.lineTo(0,-200)
ctx.lineTo(3,-192)
ctx.lineTo(-3,-192)
ctx.lineTo(0,-200)
ctx.stroke() //描边
//画坐标
ctx.save()
ctx.strokeStyle='rgba(100,100,255,0.5)'
ctx.moveTo(-Math.PI*100,100)
ctx.lineTo(-Math.PI*100,-100)
ctx.lineTo(Math.PI*100,-100)
ctx.lineTo(Math.PI*100,100)
ctx.lineTo(-Math.PI*100,100)
ctx.stroke() //描边
ctx.fillStyle='rgba(0,0,0,1)'
ctx.fillText("-π",-Math.PI*100,10)
ctx.fillText("π",Math.PI*100,10)
ctx.fillText("-1",5,100)
ctx.fillText("1",5,-100)
ctx.restore()
}
function drawCos(){
var x = -Math.PI*100
ctx.beginPath()
ctx.moveTo(x,100)
for(x = -Math.PI*100x<Math.PI*100x++){
var cx = x/100
var cy = Math.cos(cx)
var y = -cy*100
ctx.lineTo(x,y)
}
ctx.stroke() //描边
}
function draw(){
ctx.clearRect(0,0,canvas.width,canvas.height)
ctx.save()
ctx.shadowColor='rgba(0,0,0,0.8)'
ctx.shadowOffsetX=12
ctx.shadowOffsetY=12
ctx.shadowBlur=15
drawAxis()
drawCos()
ctx.restore()
}
ctx.fillStyle='rgba(100,140,230,0.5)'
ctx.strokeStyle='rgba(33,33,33,1)'
draw()
</script>
</body>
</html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）