哪位javascript高手帮我写一下,用javasctipt和html画二次函数y=-1/50(

哪位javascript高手帮我写一下,用javasctipt和html画二次函数y=-1/50(x-50)+50的图像... 哪位javascript高手帮我写一下,用javasctipt和html画二次函数y=-1/50(x-50)+50的图像 展开
 我来答
dksnear
2015-05-09 · TA获得超过1211个赞
知道小有建树答主
回答量:399
采纳率:0%
帮助的人:640万
展开全部
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>svg</title>
<style>
svg{

transform: rotateX(180deg);
}
</style>
<script>

window.addEventListener('load',function(){

var svg_ns = 'http://www.w3.org/2000/svg';
var svg = document.createElementNS(svg_ns,'svg');
var svgFrg = document.createDocumentFragment();

var y = function(x){

// 你写的这是个一次函数
return -1/5*(x-50)+50;

// 根据我多年的经验这才是二次函数 你也可以试试
//return -1/50*(Math.pow(x,2)-50)+50;
};

var lineTo = function(x1,y1,x2,y2){

var line = document.createElementNS(svg_ns,'line');
line.setAttribute('x1',x1);
line.setAttribute('y1',y1);
line.setAttribute('x2',x2);
line.setAttribute('y2',y2);
line.setAttribute('stroke','black');
line.setAttribute('stroke-width',1);
svgFrg.appendChild(line);
};

// size 粒度
var draw = function(range,size){

for(var i=1*size;i<=range*size;i+=size){

lineTo(i-size,y(i-size),i,y(i));
}
};

draw(200,1);
svg.setAttribute('height','200');
svg.setAttribute('width','200');
svg.appendChild(svgFrg);
document.body.appendChild(svg);

});

</script>
</head>
<body>
</body>
</html>
追问
二次函数写错了,应该是y=-1/50(x-50)²+50
怎么结果是一条直线而不是抛物线啊?
小白前端圈
2015-05-09 · 小白前端学习圈子,圈子很小都是学前端的人
小白前端圈
采纳数:85 获赞数:158

向TA提问 私信TA
展开全部
自己写去,用canvas
追问
我会我还问你们啊
追答
直接写也许代码你认为用财务值可以???
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
虎虎ll
2015-05-09 · TA获得超过819个赞
知道小有建树答主
回答量:402
采纳率:0%
帮助的人:206万
展开全部
这是二次函数?
更多追问追答
追问
写错了,应该是这样:y=-1/50(x-50)²+50
追答

你留个联系方式,我自己写了个。在这里被百度限制字数了。预览:(完整版在附件中)

ctx.beginPath();
ctx.moveTo(0,Oy);
ctx.lineTo(canvas.width,Oy);
ctx.moveTo(Ox,0);
ctx.lineTo(Ox,canvas.height);
ctx.stroke();
ctx.closePath();
var x=y=0;//x,y坐标
var x1=-200,x2=200;//定义区间[x1,x2].
var Xrange=0.5;  //定义在区间[x1,x2]里面每隔多大x值画一个点
function drawCurve(){
for(x=x1;x<=x2;x+=Xrange){
y=(x-50)*(-x+50)/50+50;//这个式子是等价于y=-1/50(x-50)&#178;+50的。
ctx.strokeRect(x+Ox,Oy-y,Xrange/10,Xrange/10)
}
}
drawCurve();
canvas.addEventListener("mousemove",function(e){
document.getElementById("showXY").innerHTML="("+(e.clientX-Ox)+","+(Oy-e.clientY)+")";
})


已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 2条折叠回答
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式