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

最新推荐文章于 2024-07-30 14:53:04 发布

原创

最新推荐文章于 2024-07-30 14:53:04 发布 · 1.7k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#HTML5

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

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;       //设定线条宽度，预设为1
            co.lineCap = 'round';     //设定线头格式
            //画一条水