如何使用html5的canvas 做一个曲线图请附小例子

请附说明谢谢！！... 请附说明谢谢！！展开

 我来答

2个回答

#热议# 应届生在签三方时要注意什么？

http_p
推荐于2018-03-19 · TA获得超过1095个赞

知道小有建树答主

回答量：733

采纳率：100%

帮助的人：583万

我也去答题访问个人页

关注

展开全部

<!DOCTYPE HTML>
<html>
<title>canvas test</title>
<head>
<style>
#canvas{
    width:800px;
    height:800px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, .8);
    margin: 10px 10px;
}
</style>
</head>
<body>
    <canvas id='canvas' width=800 height=800>unsupport</canvas>

</body>
<script>
window.onload = function(){
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    ctx.strokeColor = 'black';
    ctx.lineWidth = 3;
    ctx.shadowOffsetX = 10;
    ctx.shadowOffsetY = 5;
    ctx.shadowBlur = 2;
    ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';
    ctx.save();
    ctx.translate(100, 100);
    ctx.beginPath();
    ctx.moveTo(0, 0);
    ctx.lineTo(400, 0);
    ctx.moveTo(0, 0);
    for(var i = 0; i < 20; i += 0.1){
        var x = i * 20;
        var y = Math.sin(i) * 20;
        ctx.lineTo(x, y);
    }
    ctx.stroke();
    ctx.restore();
    ctx.save();
    ctx.translate(100, 200);
    ctx.beginPath();
    ctx.moveTo(0, 0);
    ctx.lineTo(400, 0);
    ctx.moveTo(0, 0);
    ctx.quadraticCurveTo(150, -100, 200, 0);
    ctx.quadraticCurveTo(250, 200, 400, 0);
    ctx.stroke();
    ctx.restore();
    ctx.save();
    ctx.translate(100, 400);
    ctx.beginPath();
    ctx.moveTo(0, 0);
    ctx.lineTo(400, 0);
    ctx.moveTo(0, 0);
    ctx.bezierCurveTo(50, 0, 100, -50, 150, -100);
    ctx.bezierCurveTo(175, -75, 150, -25, 100, 0);
    ctx.bezierCurveTo(300, -75, 600, -100, 400, 0);
    ctx.stroke();
    ctx.restore();
    ctx.save();
    ctx.translate(100, 600);
    ctx.beginPath();
    ctx.moveTo(0, 0);
    ctx.lineTo(400, 0);
    ctx.moveTo(0, -124);
    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();
    ctx.save();
    ctx.beginPath();
    ctx.moveTo(100, 0);
    ctx.lineTo(100, 800);
    ctx.stroke();
    ctx.restore();
};
</script>
</html>

效果图

从上到下依次是正弦曲线二次曲线贝塞尔曲线抛物线

已赞过 已踩过<

评论收起

yugi111
推荐于2016-04-22 · TA获得超过8.1万个赞

知道大有可为答主

回答量：5.1万

采纳率：70%

帮助的人：1.3亿

我也去答题访问个人页

关注

展开全部

在右边在绘制一条直线角度和右边的棱大约25°，要稍微短一些，然后连接；
在右边在绘制一条直线角度和右边的棱大约35°；
例子如下：

<!DOCTYPE HTML>

<html>

<title>canvas test</title>

<head>

<style>

#canvas{

width:800px;

height:800px;

box-shadow: 0px 0px 10px rgba(0, 0, 0, .8);

margin: 10px 10px;

}

</style>

</head>

<body>

<canvas id='canvas' width=800 height=800>unsupport</canvas>

</body>

window.onload = function(){

var canvas = document.getElementById('canvas');

var ctx = canvas.getContext('2d');

ctx.strokeColor = 'black';

ctx.lineWidth = 3;

ctx.shadowOffsetX = 10;

ctx.shadowOffsetY = 5;

ctx.shadowBlur = 2;

ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';

ctx.save();

ctx.translate(100, 100);

ctx.beginPath();

ctx.moveTo(0, 0);

ctx.lineTo(400, 0);

ctx.moveTo(0, 0);

for(var i = 0; i < 20; i += 0.1){

var x = i * 20;

var y = Math.sin(i) * 20;

ctx.lineTo(x, y);

}

ctx.stroke();

ctx.restore();

ctx.save();

ctx.translate(100, 200);

ctx.beginPath();

ctx.moveTo(0, 0);

ctx.lineTo(400, 0);

ctx.moveTo(0, 0);

ctx.quadraticCurveTo(150, -100, 200, 0);

ctx.quadraticCurveTo(250, 200, 400, 0);

ctx.stroke();

ctx.restore();

ctx.save();

ctx.translate(100, 400);

ctx.beginPath();

ctx.moveTo(0, 0);

ctx.lineTo(400, 0);

ctx.moveTo(0, 0);

ctx.bezierCurveTo(50, 0, 100, -50, 150, -100);

ctx.bezierCurveTo(175, -75, 150, -25, 100, 0);

ctx.bezierCurveTo(300, -75, 600, -100, 400, 0);

ctx.stroke();

ctx.restore();

ctx.save();

ctx.translate(100, 600);

ctx.beginPath();

ctx.moveTo(0, 0);

ctx.lineTo(400, 0);

ctx.moveTo(0, -124);

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();

ctx.save();

ctx.beginPath();

ctx.moveTo(100, 0);

ctx.lineTo(100, 800);

ctx.stroke();

ctx.restore();

};

</script>

</html>

已赞过 已踩过<

评论收起

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

您可能关注的内容

实习僧-为你提供2024cad实习工作机会

2024cad实习工作机会去那找?就上实习僧，中国专注实习的垂直招聘平台。覆盖36万+企业用户;提供170万+实习岗位，2024找cad实习就上实习僧。

www.shixiseng.com广告

永久版cad角度-正版简体中文版-点击下载

CAD在线下载，永久使用，支持多台电脑安装-提供远程安装服务。版本更新，赠送超过100集零基础到高级视频教程，让你学习动画制作更轻松!

win.yuefeixiang.cn广告

如何使用html5的canvas 做一个曲线图 请附小例子

您可能关注的内容

其他类似问题

为你推荐：

如何使用html5的canvas 做一个曲线图请附小例子