bresenham 画线算法

最新推荐文章于 2025-06-04 14:21:04 发布

一刀不二

最新推荐文章于 2025-06-04 14:21:04 发布

阅读量965

点赞数

CC 4.0 BY-SA版权

分类专栏： [JavaScript] [Geometry and Graphics ]

本文链接：https://blog.youkuaiyun.com/pandora_madara/article/details/47060491

[JavaScript] 同时被 2 个专栏收录

7 篇文章

订阅专栏

[Geometry and Graphics ]

5 篇文章

订阅专栏

本文介绍了一个使用HTML5 Canvas API实现的简单画线示例，通过JavaScript编程，展示了如何在一个600x600像素的画布上绘制从左上角到指定位置的直线。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <canvas width="600" height="600" id="C"></canvas>
        <script type="text/javascript">
            
            var canvas = document.getElementById( "C" );
            var context = canvas.getContext( "2d" );
            var image_data = context.getImageData( 0, 0, 600, 600 );
            
            function put_pixel( img_data, x, y ) {
                var index = ( x + y * img_data.width ) * 4;
                img_data.data[index++] = 0;
                img_data.data[index++] = 0;
                img_data.data[index++] = 0;
                img_data.data[index++] = 255;
            }
            
            function draw_line( x1, y1, x2, y2 ) {
                var dx = x2 - x1;
                var dy = y2 - y1;
                var slope  = dy / dx;
                var x = x1, y = y1;
                var error = slope - 0.5;
                for ( var i = 1; i <= dx; ++i ) {
                    put_pixel( image_data, x, y );
                    if ( error >= 0 ) {
                        y = y + 1;
                        error = error - 1;
                    }
                    x = x + 1;
                    error = error + slope;
                }
            }
            
            draw_line( 0, 0, 400, 10 );
            
            context.putImageData( image_data, 0, 0 );
            
        </script>
    </body>
</html>