Canvas_ity:一个微型、单头文件C++ 2D 光栅化器,类似于 ``。
Canvas_ity: A tiny, single-header -like 2D rasterizer for C++

原始链接: https://github.com/a-e-k/canvas_ity

这段代码使用自定义画布库(`canvas_ity.hpp`)在C++中生成星形图像,并在HTML文件中使用JavaScript的Canvas API复制相同的视觉输出。 C++部分首先创建一个256x256的画布并绘制一个五角星。它应用了投影阴影,用黄色填充星形,并用粗红色的描边和虚线的橙色描边勾勒出来。然后,在顶部应用线性渐变以创建闪光效果。最后,提取像素数据并保存为TGA图像文件。 JavaScript代码在HTML画布元素中镜像此过程。它使用浏览器内置的画布函数绘制相同的星形,样式相同——阴影、填充、描边和渐变。两种实现都产生视觉上相似的带有闪光效果的星形图像。

Hacker News 新闻 | 过去 | 评论 | 提问 | 展示 | 招聘 | 提交 登录 Canvas_ity: 一个微小的、单头文件 C++ 2D 光栅化器,类似于 `` (github.com/a-e-k) 9 分,PaulHoule 发表于 1 小时前 | 隐藏 | 过去 | 收藏 | 4 条评论 帮助 nicoburns 发表于 19 分钟前 | 下一个 [–] 其中一个 issue 中的“推荐阅读”列表看起来很棒:https://github.com/a-e-k/canvas_ity/issues/11#issuecomment-2... 回复 ranger_danger 发表于 23 分钟前 | 上一个 [–] 氛围编码? nicoburns 发表于 21 分钟前 | 父评论 [–] 很可能不是,因为包含大部分实现的提交是在 2022 年发布的。 ranger_danger 发表于 15 分钟前 | 根评论 | 父评论 [–] 也许只是 README 文件吧 指南 | 常见问题 | 列表 | API | 安全 | 法律 | 申请 YC | 联系方式 搜索:
相关文章

原文
#include <algorithm>
#include <fstream>
// Include the library header and implementation.
#define CANVAS_ITY_IMPLEMENTATION
#include "canvas_ity.hpp"
int main()
{
    // Construct the canvas.
    static int const width = 256, height = 256;
    canvas_ity::canvas context( width, height );

    // Build a star path.
    context.move_to( 128.0f,  28.0f ); context.line_to( 157.0f,  87.0f );
    context.line_to( 223.0f,  97.0f ); context.line_to( 175.0f, 143.0f );
    context.line_to( 186.0f, 208.0f ); context.line_to( 128.0f, 178.0f );
    context.line_to(  69.0f, 208.0f ); context.line_to(  80.0f, 143.0f );
    context.line_to(  32.0f,  97.0f ); context.line_to(  98.0f,  87.0f );
    context.close_path();

    // Set up the drop shadow.
    context.set_shadow_blur( 8.0f );
    context.shadow_offset_y = 4.0f;
    context.set_shadow_color( 0.0f, 0.0f, 0.0f, 0.5f );

    // Fill the star with yellow.
    context.set_color( canvas_ity::fill_style, 1.0f, 0.9f, 0.2f, 1.0f );
    context.fill();

    // Draw the star with a thick red stroke and rounded points.
    context.line_join = canvas_ity::rounded;
    context.set_line_width( 12.0f );
    context.set_color( canvas_ity::stroke_style, 0.9f, 0.0f, 0.5f, 1.0f );
    context.stroke();

    // Draw the star again with a dashed thinner orange stroke.
    float segments[] = { 21.0f, 9.0f, 1.0f, 9.0f, 7.0f, 9.0f, 1.0f, 9.0f };
    context.set_line_dash( segments, 8 );
    context.line_dash_offset = 10.0f;
    context.line_cap = canvas_ity::circle;
    context.set_line_width( 6.0f );
    context.set_color( canvas_ity::stroke_style, 0.95f, 0.65f, 0.15f, 1.0f );
    context.stroke();

    // Turn off the drop shadow.
    context.set_shadow_color( 0.0f, 0.0f, 0.0f, 0.0f );

    // Add a shine layer over the star.
    context.set_linear_gradient( canvas_ity::fill_style, 64.0f, 0.0f, 192.0f, 256.0f );
    context.add_color_stop( canvas_ity::fill_style, 0.30f, 1.0f, 1.0f, 1.0f, 0.0f );
    context.add_color_stop( canvas_ity::fill_style, 0.35f, 1.0f, 1.0f, 1.0f, 0.8f );
    context.add_color_stop( canvas_ity::fill_style, 0.45f, 1.0f, 1.0f, 1.0f, 0.8f );
    context.add_color_stop( canvas_ity::fill_style, 0.50f, 1.0f, 1.0f, 1.0f, 0.0f );

    context.global_composite_operation = canvas_ity::source_atop;
    context.fill_rectangle( 0.0f, 0.0f, 256.0f, 256.0f );

    // Fetch the rendered RGBA pixels from the entire canvas.
    unsigned char *image = new unsigned char[ height * width * 4 ];
    context.get_image_data( image, width, height, width * 4, 0, 0 );
    // Write them out to a TGA image file (TGA uses BGRA order).
    unsigned char header[] = { 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0,
        width & 255, width >> 8, height & 255, height >> 8, 32, 40 };
    for ( int pixel = 0; pixel < height * width; ++pixel )
        std::swap( image[ pixel * 4 + 0 ], image[ pixel * 4 + 2 ] );
    std::ofstream stream( "example.tga", std::ios::binary );
    stream.write( reinterpret_cast< char * >( header ), sizeof( header ) );
    stream.write( reinterpret_cast< char * >( image ), height * width * 4 );
    delete[] image;
}
<!DOCTYPE html>
<html>
<head>
  <title>Example</title>
</head>
<body>
  <canvas id="example" width="256" height="256"></canvas>
  <script type="text/javascript">
    const context = document.getElementById( "example" ).getContext( "2d" );


    // Build a star path.
    context.moveTo( 128.0,  28.0 ); context.lineTo( 157.0,  87.0 );
    context.lineTo( 223.0,  97.0 ); context.lineTo( 175.0, 143.0 );
    context.lineTo( 186.0, 208.0 ); context.lineTo( 128.0, 178.0 );
    context.lineTo(  69.0, 208.0 ); context.lineTo(  80.0, 143.0 );
    context.lineTo(  32.0,  97.0 ); context.lineTo(  98.0,  87.0 );
    context.closePath();

    // Set up the drop shadow.
    context.shadowBlur = 8.0;
    context.shadowOffsetY = 4.0;
    context.shadowColor = "rgba(0,0,0,0.5)";

    // Fill the star with yellow.
    context.fillStyle = "#ffe633";
    context.fill();

    // Draw the star with a thick red stroke and rounded points.
    context.lineJoin = "round";
    context.lineWidth = 12.0;
    context.strokeStyle = "#e60080";
    context.stroke();

    // Draw the star again with a dashed thinner orange stroke.
    const segments = [ 21.0, 9.0, 1.0, 9.0, 7.0, 9.0, 1.0, 9.0 ];
    context.setLineDash( segments );
    context.lineDashOffset = 10.0;
    context.lineCap = "round";
    context.lineWidth = 6.0;
    context.strokeStyle = "#f2a626";
    context.stroke();

    // Turn off the drop shadow.
    context.shadowColor = "rgba(0,0,0,0.0)";

    // Add a shine layer over the star.
    let gradient = context.createLinearGradient( 64.0, 0.0, 192.0, 256.0 );
    gradient.addColorStop( 0.30, "rgba(255,255,255,0.0)" );
    gradient.addColorStop( 0.35, "rgba(255,255,255,0.8)" );
    gradient.addColorStop( 0.45, "rgba(255,255,255,0.8)" );
    gradient.addColorStop( 0.50, "rgba(255,255,255,0.0)" );
    context.fillStyle = gradient;
    context.globalCompositeOperation = "source-atop";
    context.fillRect( 0.0, 0.0, 256.0, 256.0 );

  </script>
</body>
</html>










联系我们 contact @ memedata.com