html里，用什么绘制曲线图_随笔

选数据区域——菜单栏——插入——图表——自定义类型：两轴线-柱图——下一步——下一步：标题：输入相应标题；网络线：数值(Y)轴：主要网络线；图例：显示图例（取消勾选，你的抓图没有）；数据标志：值；数据表：显示数据表——完成。

<!DOCTYPE html>

<html>

<head>

<title>Cos演示</title>

</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>

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>

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/zaji/6270801.html

html里，用什么绘制曲线图

发表评论

评论列表（0条）