Canvas ——画函数线

子非鱼，安知鱼之乐~

已于 2022-05-08 23:51:06 修改

阅读量1k

点赞数

分类专栏： web 文章标签： html 前端

于 2022-04-29 23:06:36 首次发布

本文链接：https://blog.csdn.net/qq_45935715/article/details/124506146

版权

本文介绍如何使用HTML5的Canvas元素结合Math.sin(x)和Math.exp(x)函数，以Math.PI为单位，绘制数学图形。内容涵盖canvas基本用法和数学函数的应用，提供了代码实现和图形运行展示。

摘要由CSDN通过智能技术生成

Canvas ——画函数线

canvas学习

2.请运用HTML5的Canvas功能，画出以下的三个数学图形。使用Math.sin(x), Math.exp(x)函数，其中x以Math.PI(3.14159)为单位。请同学完成此网页内容与相应所需的java script。

涉及的知识

canvas 的使用
数学函数的使用

代码实现

<!DOCTYPE html>
<html>
<head>
    <style>
        #mycanvas1 {
     
            background-color: khaki;
        }

        #mycanvas2 {
     
            background-color:aquamarine;
        }

        #mycanvas3 {
     
            background-color:goldenrod;
        }

    </style>

    <title >2-画函数图</title>

    <script type="text/javascript">
        function drawShape() {
     
            //使用DOM获取画布元素
            var canvas = document.getElementById('mycanvas1');

            var cot1 = canvas.getContext("2d");


            cot1.translate(10, 110); //转换坐标原点
            cot1.strokeStyle = '#000000';//设定线条颜色  预设为 黑色
            cot1.lineWidth = 0.5;//设定线条宽度  预设为 1
            cot1.lineCap = 'round'; //设定线头格式 square / round / butt  默认值为square

            cot1.beginPath();
            //画一条水平的线
            cot1.moveTo(-10, 0);//移到那一个坐标点 (X,Y)
            cot1.lineTo(220, 0);//从x点到y点
            //画一条垂直的线
            cot1.moveTo(0, -110);
            cot1.lineTo(0, 110);
            cot1.closePath(); //关闭绘制路径
            cot1.stroke();//绘制边线

            //画出多条虚线
            cot1.setLineDash([2, 6]);
            cot1.moveTo(-10, -100);//上虚线
            cot1.lineTo(220, -100);

            cot1.moveTo(-10, 100);//下虚线
            cot1.lineTo(220, 100);

            cot1.moveTo(100, -110);//中虚线
            cot1.lineTo(100, 110);

            cot1.moveTo(

最低0.47元/天解锁文章

子非鱼，安知鱼之乐~

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Canvas ——画函数线

请运用HTML5的Canvas功能，画出以下的三个数学图形。使用Math.sin(x), Math.exp(x)函数，其中x以Math.PI(3.14159)为单位。请同学完成此网页内容与相应所需的java script。
复制链接

扫一扫

专栏目录