HTML5——canvas小练习——函数图

最新推荐文章于 2023-11-18 14:11:47 发布

loringray

最新推荐文章于 2023-11-18 14:11:47 发布

阅读量1.5k

点赞数 2

分类专栏：前端 HTML5 文章标签： HTML5

本文链接：https://blog.csdn.net/loringray/article/details/89214788

版权

这篇博客通过HTML5的canvas元素进行小练习，展示了如何绘制数学中的正弦函数图像，提供了一段实现代码并附带实际效果展示。

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

HTML5小练习之canvas画图练习，画一个数学sin函数：

效果图如下:

代码:

<!DOCTYPE html>
<html>
<head>
    <!-- Css样式 -->
    <style type="text/css">
        .mainone {
            display: inline-block;
        }
        .headone {
            margin-left: 280px;
        }
        #MyCanvas {
            background-color: #fbd0d0;
            margin-left: 200px;
        }

    </style>

    <script type="text/javascript">
        function draw(){
            var my_canvas = document.getElementById( "MyCanvas" );
            var co = my_canvas.getContext( "2d" );
            co.translate(10, 110);
            co.beginPath();
            co.strokeStyle = '#000000';   //设定线条颜色
            co.lineWidth = 0.5;