[{"data":1,"prerenderedAt":1153},["ShallowReactive",2],{"doc-\u002Fdocs\u002Ftutorial\u002Feduwin-canvas":3},{"id":4,"title":5,"body":6,"description":16,"extension":1147,"meta":1148,"navigation":48,"path":1149,"seo":1150,"stem":1151,"__hash__":1152},"content\u002Fdocs\u002Ftutorial\u002Feduwin-canvas.md","eduwin 画布绘图教程",{"type":7,"value":8,"toc":1134},"minimark",[9,13,17,20,25,62,68,88,90,94,187,189,193,218,246,249,278,280,284,324,354,357,402,405,425,427,431,446,468,502,504,508,511,561,564,641,643,647,661,688,727,729,733,748,783,785,789,804,818,866,868,872,887,893,913,915,918,1116,1119,1130],[10,11,5],"h1",{"id":12},"eduwin-画布绘图教程",[14,15,16],"p",{},"eduwin 的画布（Canvas）组件提供完整的 2D 绘图能力，基于 GDI+ 实现，支持线、矩形、椭圆、多边形、扇形、贝塞尔曲线、路径、文本、图像等绘制，还内置双缓冲离屏渲染，天然无闪烁。",[18,19],"hr",{},[21,22,24],"h2",{"id":23},"_1-创建画布","1. 创建画布",[26,27,32],"pre",{"className":28,"code":29,"language":30,"meta":31,"style":31},"language-c shiki shiki-themes github-light github-dark","#include \"eduwin.h\"\n\nHWND win = create_window(L\"画布演示\", 640, 480);\nHWND canvas = create_canvas(win, 0, 0, 640, 480);\n","c","",[33,34,35,43,50,56],"code",{"__ignoreMap":31},[36,37,40],"span",{"class":38,"line":39},"line",1,[36,41,42],{},"#include \"eduwin.h\"\n",[36,44,46],{"class":38,"line":45},2,[36,47,49],{"emptyLinePlaceholder":48},true,"\n",[36,51,53],{"class":38,"line":52},3,[36,54,55],{},"HWND win = create_window(L\"画布演示\", 640, 480);\n",[36,57,59],{"class":38,"line":58},4,[36,60,61],{},"HWND canvas = create_canvas(win, 0, 0, 640, 480);\n",[14,63,64,67],{},[33,65,66],{},"create_canvas"," 在窗口中创建一个画布控件，参数依次为父窗口、x、y、宽度、高度。",[69,70,71],"blockquote",{},[14,72,73,81,83,84,87],{},[74,75,76,77,80],"strong",{},"注意：所有绘图操作必须在 ",[33,78,79],{},"show_window"," 之后调用！",[33,82,79],{}," 触发 ",[33,85,86],{},"WM_SIZE"," 消息，画布会重新创建离屏位图，之前绘制的内容会被清空。",[18,89],{},[21,91,93],{"id":92},"_2-基本绘图流程","2. 基本绘图流程",[26,95,97],{"className":28,"code":96,"language":30,"meta":31,"style":31},"show_window(win);\n\n\u002F\u002F 1. 清空画布背景\ncanvas_clear(canvas, 240, 240, 240, 255);  \u002F\u002F 灰色不透明背景\n\n\u002F\u002F 2. 设置画笔（轮廓）\ncanvas_set_pen(canvas, 0, 0, 255, 255, 3);  \u002F\u002F 蓝色 3px 不透明\n\n\u002F\u002F 3. 设置画刷（填充）\ncanvas_set_brush(canvas, 255, 200, 200, 255); \u002F\u002F 粉色不透明\n\n\u002F\u002F 4. 绘图\ncanvas_draw_rect(canvas, 20, 20, 100, 80);    \u002F\u002F 矩形边框\ncanvas_fill_ellipse(canvas, 140, 20, 100, 80); \u002F\u002F 填充椭圆\ncanvas_draw_line(canvas, 20, 120, 300, 120);   \u002F\u002F 直线\ncanvas_draw_text(canvas, L\"Hello 画布\", 20, 140, 0, 0, 0, 255, 20); \u002F\u002F 文字\n",[33,98,99,104,108,113,118,123,129,135,140,146,152,157,163,169,175,181],{"__ignoreMap":31},[36,100,101],{"class":38,"line":39},[36,102,103],{},"show_window(win);\n",[36,105,106],{"class":38,"line":45},[36,107,49],{"emptyLinePlaceholder":48},[36,109,110],{"class":38,"line":52},[36,111,112],{},"\u002F\u002F 1. 清空画布背景\n",[36,114,115],{"class":38,"line":58},[36,116,117],{},"canvas_clear(canvas, 240, 240, 240, 255);  \u002F\u002F 灰色不透明背景\n",[36,119,121],{"class":38,"line":120},5,[36,122,49],{"emptyLinePlaceholder":48},[36,124,126],{"class":38,"line":125},6,[36,127,128],{},"\u002F\u002F 2. 设置画笔（轮廓）\n",[36,130,132],{"class":38,"line":131},7,[36,133,134],{},"canvas_set_pen(canvas, 0, 0, 255, 255, 3);  \u002F\u002F 蓝色 3px 不透明\n",[36,136,138],{"class":38,"line":137},8,[36,139,49],{"emptyLinePlaceholder":48},[36,141,143],{"class":38,"line":142},9,[36,144,145],{},"\u002F\u002F 3. 设置画刷（填充）\n",[36,147,149],{"class":38,"line":148},10,[36,150,151],{},"canvas_set_brush(canvas, 255, 200, 200, 255); \u002F\u002F 粉色不透明\n",[36,153,155],{"class":38,"line":154},11,[36,156,49],{"emptyLinePlaceholder":48},[36,158,160],{"class":38,"line":159},12,[36,161,162],{},"\u002F\u002F 4. 绘图\n",[36,164,166],{"class":38,"line":165},13,[36,167,168],{},"canvas_draw_rect(canvas, 20, 20, 100, 80);    \u002F\u002F 矩形边框\n",[36,170,172],{"class":38,"line":171},14,[36,173,174],{},"canvas_fill_ellipse(canvas, 140, 20, 100, 80); \u002F\u002F 填充椭圆\n",[36,176,178],{"class":38,"line":177},15,[36,179,180],{},"canvas_draw_line(canvas, 20, 120, 300, 120);   \u002F\u002F 直线\n",[36,182,184],{"class":38,"line":183},16,[36,185,186],{},"canvas_draw_text(canvas, L\"Hello 画布\", 20, 140, 0, 0, 0, 255, 20); \u002F\u002F 文字\n",[18,188],{},[21,190,192],{"id":191},"_3-绘图状态","3. 绘图状态",[26,194,196],{"className":28,"code":195,"language":30,"meta":31,"style":31},"void canvas_clear(HWND canvas, int r, int g, int b, int a);\nvoid canvas_set_pen(HWND canvas, int r, int g, int b, int a, int width);\nvoid canvas_set_brush(HWND canvas, int r, int g, int b, int a);\nvoid canvas_set_font(HWND canvas, const WCHAR *family, int size);\n",[33,197,198,203,208,213],{"__ignoreMap":31},[36,199,200],{"class":38,"line":39},[36,201,202],{},"void canvas_clear(HWND canvas, int r, int g, int b, int a);\n",[36,204,205],{"class":38,"line":45},[36,206,207],{},"void canvas_set_pen(HWND canvas, int r, int g, int b, int a, int width);\n",[36,209,210],{"class":38,"line":52},[36,211,212],{},"void canvas_set_brush(HWND canvas, int r, int g, int b, int a);\n",[36,214,215],{"class":38,"line":58},[36,216,217],{},"void canvas_set_font(HWND canvas, const WCHAR *family, int size);\n",[219,220,221,228,234,240],"ul",{},[222,223,224,227],"li",{},[33,225,226],{},"canvas_clear"," 用指定颜色填充整个画布（清除原有内容），参数为 RGBA，范围 0–255",[222,229,230,233],{},[33,231,232],{},"canvas_set_pen"," 设置轮廓画笔的颜色、透明度和线宽（默认黑色 1px 不透明）",[222,235,236,239],{},[33,237,238],{},"canvas_set_brush"," 设置填充画刷的颜色和透明度（默认白色不透明）",[222,241,242,245],{},[33,243,244],{},"canvas_set_font"," 设置文本字体和字号（默认 Microsoft YaHei 14）",[14,247,248],{},"绘图状态是全局的——设置后影响后续所有绘制，直到再次修改。",[26,250,252],{"className":28,"code":251,"language":30,"meta":31,"style":31},"canvas_set_pen(canvas, 255, 0, 0, 255, 5);   \u002F\u002F 红色 5px 画笔\ncanvas_draw_rect(canvas, 10, 10, 100, 100);  \u002F\u002F 红色5px边框\n\ncanvas_set_pen(canvas, 0, 128, 0, 200, 1);   \u002F\u002F 绿色半透明 1px 画笔\ncanvas_draw_rect(canvas, 130, 10, 100, 100); \u002F\u002F 绿色1px边框\n",[33,253,254,259,264,268,273],{"__ignoreMap":31},[36,255,256],{"class":38,"line":39},[36,257,258],{},"canvas_set_pen(canvas, 255, 0, 0, 255, 5);   \u002F\u002F 红色 5px 画笔\n",[36,260,261],{"class":38,"line":45},[36,262,263],{},"canvas_draw_rect(canvas, 10, 10, 100, 100);  \u002F\u002F 红色5px边框\n",[36,265,266],{"class":38,"line":52},[36,267,49],{"emptyLinePlaceholder":48},[36,269,270],{"class":38,"line":58},[36,271,272],{},"canvas_set_pen(canvas, 0, 128, 0, 200, 1);   \u002F\u002F 绿色半透明 1px 画笔\n",[36,274,275],{"class":38,"line":120},[36,276,277],{},"canvas_draw_rect(canvas, 130, 10, 100, 100); \u002F\u002F 绿色1px边框\n",[18,279],{},[21,281,283],{"id":282},"_4-基本几何图形","4. 基本几何图形",[26,285,287],{"className":28,"code":286,"language":30,"meta":31,"style":31},"void canvas_draw_line(HWND canvas, int x1, int y1, int x2, int y2);\nvoid canvas_draw_rect(HWND canvas, int x, int y, int w, int h);\nvoid canvas_fill_rect(HWND canvas, int x, int y, int w, int h);\nvoid canvas_draw_ellipse(HWND canvas, int x, int y, int w, int h);\nvoid canvas_fill_ellipse(HWND canvas, int x, int y, int w, int h);\nvoid canvas_fill_polygon(HWND canvas, const PointF *pts, int count);\nvoid canvas_fill_pie(HWND canvas, int x, int y, int w, int h, float start_angle, float sweep_angle);\n",[33,288,289,294,299,304,309,314,319],{"__ignoreMap":31},[36,290,291],{"class":38,"line":39},[36,292,293],{},"void canvas_draw_line(HWND canvas, int x1, int y1, int x2, int y2);\n",[36,295,296],{"class":38,"line":45},[36,297,298],{},"void canvas_draw_rect(HWND canvas, int x, int y, int w, int h);\n",[36,300,301],{"class":38,"line":52},[36,302,303],{},"void canvas_fill_rect(HWND canvas, int x, int y, int w, int h);\n",[36,305,306],{"class":38,"line":58},[36,307,308],{},"void canvas_draw_ellipse(HWND canvas, int x, int y, int w, int h);\n",[36,310,311],{"class":38,"line":120},[36,312,313],{},"void canvas_fill_ellipse(HWND canvas, int x, int y, int w, int h);\n",[36,315,316],{"class":38,"line":125},[36,317,318],{},"void canvas_fill_polygon(HWND canvas, const PointF *pts, int count);\n",[36,320,321],{"class":38,"line":131},[36,322,323],{},"void canvas_fill_pie(HWND canvas, int x, int y, int w, int h, float start_angle, float sweep_angle);\n",[219,325,326,339],{},[222,327,328,331,332,331,335,338],{},[33,329,330],{},"draw_line"," \u002F ",[33,333,334],{},"draw_rect",[33,336,337],{},"draw_ellipse"," 用当前画笔绘制轮廓",[222,340,341,331,344,331,347,331,350,353],{},[33,342,343],{},"fill_rect",[33,345,346],{},"fill_ellipse",[33,348,349],{},"fill_polygon",[33,351,352],{},"fill_pie"," 用当前画刷填充",[14,355,356],{},"填充多边形示例：",[26,358,360],{"className":28,"code":359,"language":30,"meta":31,"style":31},"\u002F* 绘制一个蓝色三角形 *\u002F\nPointF pts[3] = {\n    {200, 50},  \u002F* 顶点 *\u002F\n    {150, 150}, \u002F* 左下 *\u002F\n    {250, 150}  \u002F* 右下 *\u002F\n};\ncanvas_set_brush(canvas, 50, 100, 200, 200);  \u002F\u002F 半透明蓝色\ncanvas_fill_polygon(canvas, pts, 3);\n",[33,361,362,367,372,377,382,387,392,397],{"__ignoreMap":31},[36,363,364],{"class":38,"line":39},[36,365,366],{},"\u002F* 绘制一个蓝色三角形 *\u002F\n",[36,368,369],{"class":38,"line":45},[36,370,371],{},"PointF pts[3] = {\n",[36,373,374],{"class":38,"line":52},[36,375,376],{},"    {200, 50},  \u002F* 顶点 *\u002F\n",[36,378,379],{"class":38,"line":58},[36,380,381],{},"    {150, 150}, \u002F* 左下 *\u002F\n",[36,383,384],{"class":38,"line":120},[36,385,386],{},"    {250, 150}  \u002F* 右下 *\u002F\n",[36,388,389],{"class":38,"line":125},[36,390,391],{},"};\n",[36,393,394],{"class":38,"line":131},[36,395,396],{},"canvas_set_brush(canvas, 50, 100, 200, 200);  \u002F\u002F 半透明蓝色\n",[36,398,399],{"class":38,"line":137},[36,400,401],{},"canvas_fill_polygon(canvas, pts, 3);\n",[14,403,404],{},"填充扇形示例：",[26,406,408],{"className":28,"code":407,"language":30,"meta":31,"style":31},"\u002F* 绘制一个从 0° 到 90° 的扇形 *\u002F\ncanvas_set_brush(canvas, 200, 100, 50, 220);\ncanvas_fill_pie(canvas, 300, 50, 120, 120, 0, 90);\n",[33,409,410,415,420],{"__ignoreMap":31},[36,411,412],{"class":38,"line":39},[36,413,414],{},"\u002F* 绘制一个从 0° 到 90° 的扇形 *\u002F\n",[36,416,417],{"class":38,"line":45},[36,418,419],{},"canvas_set_brush(canvas, 200, 100, 50, 220);\n",[36,421,422],{"class":38,"line":52},[36,423,424],{},"canvas_fill_pie(canvas, 300, 50, 120, 120, 0, 90);\n",[18,426],{},[21,428,430],{"id":429},"_5-弧形与贝塞尔曲线","5. 弧形与贝塞尔曲线",[26,432,434],{"className":28,"code":433,"language":30,"meta":31,"style":31},"void canvas_draw_arc(HWND canvas, int x, int y, int w, int h, float start_angle, float sweep_angle);\nvoid canvas_draw_bezier(HWND canvas, int x1, int y1, int x2, int y2, int x3, int y3, int x4, int y4);\n",[33,435,436,441],{"__ignoreMap":31},[36,437,438],{"class":38,"line":39},[36,439,440],{},"void canvas_draw_arc(HWND canvas, int x, int y, int w, int h, float start_angle, float sweep_angle);\n",[36,442,443],{"class":38,"line":45},[36,444,445],{},"void canvas_draw_bezier(HWND canvas, int x1, int y1, int x2, int y2, int x3, int y3, int x4, int y4);\n",[219,447,448,462],{},[222,449,450,453,454,457,458,461],{},[33,451,452],{},"draw_arc"," 绘制椭圆弧线段，",[33,455,456],{},"start_angle"," 为起始角度（度），",[33,459,460],{},"sweep_angle"," 为扫过的角度（逆时针为正）",[222,463,464,467],{},[33,465,466],{},"draw_bezier"," 绘制三次贝塞尔曲线，4 个点依次为起点、控制点 1、控制点 2、终点",[26,469,471],{"className":28,"code":470,"language":30,"meta":31,"style":31},"\u002F* 弧线：从 0° 到 180° *\u002F\ncanvas_set_pen(canvas, 200, 50, 50, 255, 3);\ncanvas_draw_arc(canvas, 50, 200, 100, 80, 0, 180);\n\n\u002F* 贝塞尔曲线 *\u002F\ncanvas_draw_bezier(canvas, 200, 200, 250, 100, 350, 300, 400, 200);\n",[33,472,473,478,483,488,492,497],{"__ignoreMap":31},[36,474,475],{"class":38,"line":39},[36,476,477],{},"\u002F* 弧线：从 0° 到 180° *\u002F\n",[36,479,480],{"class":38,"line":45},[36,481,482],{},"canvas_set_pen(canvas, 200, 50, 50, 255, 3);\n",[36,484,485],{"class":38,"line":52},[36,486,487],{},"canvas_draw_arc(canvas, 50, 200, 100, 80, 0, 180);\n",[36,489,490],{"class":38,"line":58},[36,491,49],{"emptyLinePlaceholder":48},[36,493,494],{"class":38,"line":120},[36,495,496],{},"\u002F* 贝塞尔曲线 *\u002F\n",[36,498,499],{"class":38,"line":125},[36,500,501],{},"canvas_draw_bezier(canvas, 200, 200, 250, 100, 350, 300, 400, 200);\n",[18,503],{},[21,505,507],{"id":506},"_6-路径系统","6. 路径系统",[14,509,510],{},"路径（Path）允许你将多条线段、弧线、椭圆、矩形组合成一个图形，然后统一绘制或填充。",[26,512,514],{"className":28,"code":513,"language":30,"meta":31,"style":31},"void *canvas_create_path(void);\nvoid canvas_add_path_line(void *path, float x1, float y1, float x2, float y2);\nvoid canvas_add_path_arc(void *path, float x, float y, float w, float h, float start_angle, float sweep_angle);\nvoid canvas_add_path_ellipse(void *path, float x, float y, float w, float h);\nvoid canvas_add_path_rect(void *path, float x, float y, float w, float h);\nvoid canvas_close_path(void *path);\nvoid canvas_draw_path(HWND canvas, void *path);\nvoid canvas_fill_path(HWND canvas, void *path);\nvoid canvas_delete_path(void *path);\n",[33,515,516,521,526,531,536,541,546,551,556],{"__ignoreMap":31},[36,517,518],{"class":38,"line":39},[36,519,520],{},"void *canvas_create_path(void);\n",[36,522,523],{"class":38,"line":45},[36,524,525],{},"void canvas_add_path_line(void *path, float x1, float y1, float x2, float y2);\n",[36,527,528],{"class":38,"line":52},[36,529,530],{},"void canvas_add_path_arc(void *path, float x, float y, float w, float h, float start_angle, float sweep_angle);\n",[36,532,533],{"class":38,"line":58},[36,534,535],{},"void canvas_add_path_ellipse(void *path, float x, float y, float w, float h);\n",[36,537,538],{"class":38,"line":120},[36,539,540],{},"void canvas_add_path_rect(void *path, float x, float y, float w, float h);\n",[36,542,543],{"class":38,"line":125},[36,544,545],{},"void canvas_close_path(void *path);\n",[36,547,548],{"class":38,"line":131},[36,549,550],{},"void canvas_draw_path(HWND canvas, void *path);\n",[36,552,553],{"class":38,"line":137},[36,554,555],{},"void canvas_fill_path(HWND canvas, void *path);\n",[36,557,558],{"class":38,"line":142},[36,559,560],{},"void canvas_delete_path(void *path);\n",[14,562,563],{},"使用模式：创建路径 → 添加图形 → 绘制\u002F填充 → 销毁路径。",[26,565,567],{"className":28,"code":566,"language":30,"meta":31,"style":31},"\u002F* 创建一个心形路径 *\u002F\nvoid *path = canvas_create_path();\ncanvas_add_path_ellipse(path, 0, 0, 80, 80);    \u002F\u002F 左圆\ncanvas_add_path_ellipse(path, 60, 0, 80, 80);   \u002F\u002F 右圆\ncanvas_add_path_line(path, 0, 50, 70, 140);      \u002F\u002F 左侧边\ncanvas_add_path_line(path, 70, 140, 140, 50);     \u002F\u002F 右侧边\ncanvas_close_path(path);\n\ncanvas_set_brush(canvas, 220, 60, 80, 255);\ncanvas_fill_path(canvas, path);\n\ncanvas_set_pen(canvas, 180, 30, 50, 255, 2);\ncanvas_draw_path(canvas, path);\n\ncanvas_delete_path(path);\n",[33,568,569,574,579,584,589,594,599,604,608,613,618,622,627,632,636],{"__ignoreMap":31},[36,570,571],{"class":38,"line":39},[36,572,573],{},"\u002F* 创建一个心形路径 *\u002F\n",[36,575,576],{"class":38,"line":45},[36,577,578],{},"void *path = canvas_create_path();\n",[36,580,581],{"class":38,"line":52},[36,582,583],{},"canvas_add_path_ellipse(path, 0, 0, 80, 80);    \u002F\u002F 左圆\n",[36,585,586],{"class":38,"line":58},[36,587,588],{},"canvas_add_path_ellipse(path, 60, 0, 80, 80);   \u002F\u002F 右圆\n",[36,590,591],{"class":38,"line":120},[36,592,593],{},"canvas_add_path_line(path, 0, 50, 70, 140);      \u002F\u002F 左侧边\n",[36,595,596],{"class":38,"line":125},[36,597,598],{},"canvas_add_path_line(path, 70, 140, 140, 50);     \u002F\u002F 右侧边\n",[36,600,601],{"class":38,"line":131},[36,602,603],{},"canvas_close_path(path);\n",[36,605,606],{"class":38,"line":137},[36,607,49],{"emptyLinePlaceholder":48},[36,609,610],{"class":38,"line":142},[36,611,612],{},"canvas_set_brush(canvas, 220, 60, 80, 255);\n",[36,614,615],{"class":38,"line":148},[36,616,617],{},"canvas_fill_path(canvas, path);\n",[36,619,620],{"class":38,"line":154},[36,621,49],{"emptyLinePlaceholder":48},[36,623,624],{"class":38,"line":159},[36,625,626],{},"canvas_set_pen(canvas, 180, 30, 50, 255, 2);\n",[36,628,629],{"class":38,"line":165},[36,630,631],{},"canvas_draw_path(canvas, path);\n",[36,633,634],{"class":38,"line":171},[36,635,49],{"emptyLinePlaceholder":48},[36,637,638],{"class":38,"line":177},[36,639,640],{},"canvas_delete_path(path);\n",[18,642],{},[21,644,646],{"id":645},"_7-绘制文本","7. 绘制文本",[26,648,650],{"className":28,"code":649,"language":30,"meta":31,"style":31},"void canvas_set_font(HWND canvas, const WCHAR *family, int size);\nvoid canvas_draw_text(HWND canvas, const WCHAR *text, int x, int y, int r, int g, int b, int a, int size);\n",[33,651,652,656],{"__ignoreMap":31},[36,653,654],{"class":38,"line":39},[36,655,217],{},[36,657,658],{"class":38,"line":45},[36,659,660],{},"void canvas_draw_text(HWND canvas, const WCHAR *text, int x, int y, int r, int g, int b, int a, int size);\n",[219,662,663,672],{},[222,664,665,667,668,671],{},[33,666,244],{}," 设置全局字体和字号（",[33,669,670],{},"size"," 为 0 时不影响后续单次绘制）",[222,673,674,677,678,681,682,684,685,687],{},[33,675,676],{},"canvas_draw_text"," 的 ",[33,679,680],{},"r g b a"," 为文字颜色和透明度，",[33,683,670],{}," 传 0 使用 ",[33,686,244],{}," 设定的字号",[26,689,691],{"className":28,"code":690,"language":30,"meta":31,"style":31},"\u002F* 设置全局字体 *\u002F\ncanvas_set_font(canvas, L\"SimSun\", 24);     \u002F\u002F 宋体 24 号\ncanvas_draw_text(canvas, L\"你好，eduwin\", 50, 300, 50, 50, 50, 255, 0);  \u002F\u002F 用全局设置\n\n\u002F* 单次绘制指定字号 *\u002F\ncanvas_draw_text(canvas, L\"大标题\", 50, 340, 200, 50, 50, 255, 36);\ncanvas_draw_text(canvas, L\"小标注\", 50, 390, 128, 128, 128, 255, 12);\n",[33,692,693,698,703,708,712,717,722],{"__ignoreMap":31},[36,694,695],{"class":38,"line":39},[36,696,697],{},"\u002F* 设置全局字体 *\u002F\n",[36,699,700],{"class":38,"line":45},[36,701,702],{},"canvas_set_font(canvas, L\"SimSun\", 24);     \u002F\u002F 宋体 24 号\n",[36,704,705],{"class":38,"line":52},[36,706,707],{},"canvas_draw_text(canvas, L\"你好，eduwin\", 50, 300, 50, 50, 50, 255, 0);  \u002F\u002F 用全局设置\n",[36,709,710],{"class":38,"line":58},[36,711,49],{"emptyLinePlaceholder":48},[36,713,714],{"class":38,"line":120},[36,715,716],{},"\u002F* 单次绘制指定字号 *\u002F\n",[36,718,719],{"class":38,"line":125},[36,720,721],{},"canvas_draw_text(canvas, L\"大标题\", 50, 340, 200, 50, 50, 255, 36);\n",[36,723,724],{"class":38,"line":131},[36,725,726],{},"canvas_draw_text(canvas, L\"小标注\", 50, 390, 128, 128, 128, 255, 12);\n",[18,728],{},[21,730,732],{"id":731},"_8-绘制图像","8. 绘制图像",[26,734,736],{"className":28,"code":735,"language":30,"meta":31,"style":31},"void *load_image_from_file(const WCHAR *filepath, UINT *width, UINT *height);\nvoid canvas_draw_image(HWND canvas, void *image, int x, int y, int w, int h);\n",[33,737,738,743],{"__ignoreMap":31},[36,739,740],{"class":38,"line":39},[36,741,742],{},"void *load_image_from_file(const WCHAR *filepath, UINT *width, UINT *height);\n",[36,744,745],{"class":38,"line":45},[36,746,747],{},"void canvas_draw_image(HWND canvas, void *image, int x, int y, int w, int h);\n",[26,749,751],{"className":28,"code":750,"language":30,"meta":31,"style":31},"UINT iw, ih;\nvoid *img = load_image_from_file(L\"photo.png\", &iw, &ih);\nif (img)\n{\n    canvas_draw_image(canvas, img, 10, 10, (int)iw, (int)ih);\n}\n",[33,752,753,758,763,768,773,778],{"__ignoreMap":31},[36,754,755],{"class":38,"line":39},[36,756,757],{},"UINT iw, ih;\n",[36,759,760],{"class":38,"line":45},[36,761,762],{},"void *img = load_image_from_file(L\"photo.png\", &iw, &ih);\n",[36,764,765],{"class":38,"line":52},[36,766,767],{},"if (img)\n",[36,769,770],{"class":38,"line":58},[36,771,772],{},"{\n",[36,774,775],{"class":38,"line":120},[36,776,777],{},"    canvas_draw_image(canvas, img, 10, 10, (int)iw, (int)ih);\n",[36,779,780],{"class":38,"line":125},[36,781,782],{},"}\n",[18,784],{},[21,786,788],{"id":787},"_9-局部清除与文件输出","9. 局部清除与文件输出",[26,790,792],{"className":28,"code":791,"language":30,"meta":31,"style":31},"void canvas_clear_rect(HWND canvas, int x, int y, int w, int h, int r, int g, int b, int a);\nvoid canvas_save_image(HWND canvas, const WCHAR *filepath);\n",[33,793,794,799],{"__ignoreMap":31},[36,795,796],{"class":38,"line":39},[36,797,798],{},"void canvas_clear_rect(HWND canvas, int x, int y, int w, int h, int r, int g, int b, int a);\n",[36,800,801],{"class":38,"line":45},[36,802,803],{},"void canvas_save_image(HWND canvas, const WCHAR *filepath);\n",[14,805,806,809,810,813,814,817],{},[33,807,808],{},"canvas_clear_rect"," 用颜色填充指定矩形区域（局部清除），",[33,811,812],{},"a"," 为透明度。",[33,815,816],{},"canvas_save_image"," 将画布当前内容保存为图像文件（根据扩展名自动选择编码器，支持 png\u002Fjpg\u002Fbmp）。",[26,819,821],{"className":28,"code":820,"language":30,"meta":31,"style":31},"\u002F* 在灰色区域中挖一个矩形 *\u002F\ncanvas_set_brush(canvas, 180, 180, 180, 255);\ncanvas_fill_rect(canvas, 10, 10, 200, 100);\n\n\u002F* 局部清除并填充绿色 *\u002F\ncanvas_clear_rect(canvas, 50, 30, 100, 40, 100, 200, 50, 255);\n\n\u002F* 保存为文件 *\u002F\ncanvas_save_image(canvas, L\"output.png\");\n",[33,822,823,828,833,838,842,847,852,856,861],{"__ignoreMap":31},[36,824,825],{"class":38,"line":39},[36,826,827],{},"\u002F* 在灰色区域中挖一个矩形 *\u002F\n",[36,829,830],{"class":38,"line":45},[36,831,832],{},"canvas_set_brush(canvas, 180, 180, 180, 255);\n",[36,834,835],{"class":38,"line":52},[36,836,837],{},"canvas_fill_rect(canvas, 10, 10, 200, 100);\n",[36,839,840],{"class":38,"line":58},[36,841,49],{"emptyLinePlaceholder":48},[36,843,844],{"class":38,"line":120},[36,845,846],{},"\u002F* 局部清除并填充绿色 *\u002F\n",[36,848,849],{"class":38,"line":125},[36,850,851],{},"canvas_clear_rect(canvas, 50, 30, 100, 40, 100, 200, 50, 255);\n",[36,853,854],{"class":38,"line":131},[36,855,49],{"emptyLinePlaceholder":48},[36,857,858],{"class":38,"line":137},[36,859,860],{},"\u002F* 保存为文件 *\u002F\n",[36,862,863],{"class":38,"line":142},[36,864,865],{},"canvas_save_image(canvas, L\"output.png\");\n",[18,867],{},[21,869,871],{"id":870},"_10-画布尺寸","10. 画布尺寸",[26,873,875],{"className":28,"code":874,"language":30,"meta":31,"style":31},"int canvas_get_width(HWND canvas);\nint canvas_get_height(HWND canvas);\n",[33,876,877,882],{"__ignoreMap":31},[36,878,879],{"class":38,"line":39},[36,880,881],{},"int canvas_get_width(HWND canvas);\n",[36,883,884],{"class":38,"line":45},[36,885,886],{},"int canvas_get_height(HWND canvas);\n",[14,888,889,890,892],{},"获取画布的实际像素尺寸，通常配合 ",[33,891,79],{}," 之后使用：",[26,894,896],{"className":28,"code":895,"language":30,"meta":31,"style":31},"int cw = canvas_get_width(canvas);\nint ch = canvas_get_height(canvas);\ncanvas_draw_text(canvas, L\"居中文字\", cw \u002F 2 - 60, ch \u002F 2, 0, 0, 0, 255, 20);\n",[33,897,898,903,908],{"__ignoreMap":31},[36,899,900],{"class":38,"line":39},[36,901,902],{},"int cw = canvas_get_width(canvas);\n",[36,904,905],{"class":38,"line":45},[36,906,907],{},"int ch = canvas_get_height(canvas);\n",[36,909,910],{"class":38,"line":52},[36,911,912],{},"canvas_draw_text(canvas, L\"居中文字\", cw \u002F 2 - 60, ch \u002F 2, 0, 0, 0, 255, 20);\n",[18,914],{},[21,916,917],{"id":917},"完整示例",[26,919,921],{"className":28,"code":920,"language":30,"meta":31,"style":31},"#include \"eduwin.h\"\n\nint main(void)\n{\n    init_app();\n\n    HWND win = create_window(L\"画布绘图教程\", 400, 400);\n    HWND canvas = create_canvas(win, 0, 0, 400, 400);\n\n    show_window(win);\n\n    \u002F* 白色背景 *\u002F\n    canvas_clear(canvas, 255, 255, 255, 255);\n\n    \u002F* 红色矩形边框 *\u002F\n    canvas_set_pen(canvas, 220, 50, 50, 255, 3);\n    canvas_draw_rect(canvas, 20, 20, 160, 100);\n\n    \u002F* 蓝色填充椭圆 *\u002F\n    canvas_set_brush(canvas, 60, 120, 200, 200);\n    canvas_fill_ellipse(canvas, 220, 20, 160, 100);\n\n    \u002F* 绿色直线 *\u002F\n    canvas_set_pen(canvas, 60, 160, 60, 255, 2);\n    canvas_draw_line(canvas, 20, 180, 380, 180);\n\n    \u002F* 半透明填充三角形 *\u002F\n    canvas_set_brush(canvas, 200, 160, 60, 180);\n    PointF pts[3] = {{200, 220}, {100, 350}, {300, 350}};\n    canvas_fill_polygon(canvas, pts, 3);\n\n    \u002F* 灰色文字 *\u002F\n    canvas_draw_text(canvas, L\"eduwin 画布\", 140, 370, 80, 80, 80, 255, 16);\n\n    run_app();\n    return 0;\n}\n",[33,922,923,927,931,936,940,945,949,954,959,963,968,972,977,982,986,991,996,1002,1007,1013,1019,1025,1030,1036,1042,1048,1053,1059,1065,1071,1077,1082,1088,1094,1099,1105,1111],{"__ignoreMap":31},[36,924,925],{"class":38,"line":39},[36,926,42],{},[36,928,929],{"class":38,"line":45},[36,930,49],{"emptyLinePlaceholder":48},[36,932,933],{"class":38,"line":52},[36,934,935],{},"int main(void)\n",[36,937,938],{"class":38,"line":58},[36,939,772],{},[36,941,942],{"class":38,"line":120},[36,943,944],{},"    init_app();\n",[36,946,947],{"class":38,"line":125},[36,948,49],{"emptyLinePlaceholder":48},[36,950,951],{"class":38,"line":131},[36,952,953],{},"    HWND win = create_window(L\"画布绘图教程\", 400, 400);\n",[36,955,956],{"class":38,"line":137},[36,957,958],{},"    HWND canvas = create_canvas(win, 0, 0, 400, 400);\n",[36,960,961],{"class":38,"line":142},[36,962,49],{"emptyLinePlaceholder":48},[36,964,965],{"class":38,"line":148},[36,966,967],{},"    show_window(win);\n",[36,969,970],{"class":38,"line":154},[36,971,49],{"emptyLinePlaceholder":48},[36,973,974],{"class":38,"line":159},[36,975,976],{},"    \u002F* 白色背景 *\u002F\n",[36,978,979],{"class":38,"line":165},[36,980,981],{},"    canvas_clear(canvas, 255, 255, 255, 255);\n",[36,983,984],{"class":38,"line":171},[36,985,49],{"emptyLinePlaceholder":48},[36,987,988],{"class":38,"line":177},[36,989,990],{},"    \u002F* 红色矩形边框 *\u002F\n",[36,992,993],{"class":38,"line":183},[36,994,995],{},"    canvas_set_pen(canvas, 220, 50, 50, 255, 3);\n",[36,997,999],{"class":38,"line":998},17,[36,1000,1001],{},"    canvas_draw_rect(canvas, 20, 20, 160, 100);\n",[36,1003,1005],{"class":38,"line":1004},18,[36,1006,49],{"emptyLinePlaceholder":48},[36,1008,1010],{"class":38,"line":1009},19,[36,1011,1012],{},"    \u002F* 蓝色填充椭圆 *\u002F\n",[36,1014,1016],{"class":38,"line":1015},20,[36,1017,1018],{},"    canvas_set_brush(canvas, 60, 120, 200, 200);\n",[36,1020,1022],{"class":38,"line":1021},21,[36,1023,1024],{},"    canvas_fill_ellipse(canvas, 220, 20, 160, 100);\n",[36,1026,1028],{"class":38,"line":1027},22,[36,1029,49],{"emptyLinePlaceholder":48},[36,1031,1033],{"class":38,"line":1032},23,[36,1034,1035],{},"    \u002F* 绿色直线 *\u002F\n",[36,1037,1039],{"class":38,"line":1038},24,[36,1040,1041],{},"    canvas_set_pen(canvas, 60, 160, 60, 255, 2);\n",[36,1043,1045],{"class":38,"line":1044},25,[36,1046,1047],{},"    canvas_draw_line(canvas, 20, 180, 380, 180);\n",[36,1049,1051],{"class":38,"line":1050},26,[36,1052,49],{"emptyLinePlaceholder":48},[36,1054,1056],{"class":38,"line":1055},27,[36,1057,1058],{},"    \u002F* 半透明填充三角形 *\u002F\n",[36,1060,1062],{"class":38,"line":1061},28,[36,1063,1064],{},"    canvas_set_brush(canvas, 200, 160, 60, 180);\n",[36,1066,1068],{"class":38,"line":1067},29,[36,1069,1070],{},"    PointF pts[3] = {{200, 220}, {100, 350}, {300, 350}};\n",[36,1072,1074],{"class":38,"line":1073},30,[36,1075,1076],{},"    canvas_fill_polygon(canvas, pts, 3);\n",[36,1078,1080],{"class":38,"line":1079},31,[36,1081,49],{"emptyLinePlaceholder":48},[36,1083,1085],{"class":38,"line":1084},32,[36,1086,1087],{},"    \u002F* 灰色文字 *\u002F\n",[36,1089,1091],{"class":38,"line":1090},33,[36,1092,1093],{},"    canvas_draw_text(canvas, L\"eduwin 画布\", 140, 370, 80, 80, 80, 255, 16);\n",[36,1095,1097],{"class":38,"line":1096},34,[36,1098,49],{"emptyLinePlaceholder":48},[36,1100,1102],{"class":38,"line":1101},35,[36,1103,1104],{},"    run_app();\n",[36,1106,1108],{"class":38,"line":1107},36,[36,1109,1110],{},"    return 0;\n",[36,1112,1114],{"class":38,"line":1113},37,[36,1115,782],{},[14,1117,1118],{},"编译命令：",[26,1120,1124],{"className":1121,"code":1122,"language":1123,"meta":31,"style":31},"language-bat shiki shiki-themes github-light github-dark","cl canvas_demo.c \u002FFeoutput.exe \u002FI include \u002Flink eduwin.lib lib\\*.lib\n","bat",[33,1125,1126],{"__ignoreMap":31},[36,1127,1128],{"class":38,"line":39},[36,1129,1122],{},[1131,1132,1133],"style",{},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":31,"searchDepth":45,"depth":45,"links":1135},[1136,1137,1138,1139,1140,1141,1142,1143,1144,1145,1146],{"id":23,"depth":45,"text":24},{"id":92,"depth":45,"text":93},{"id":191,"depth":45,"text":192},{"id":282,"depth":45,"text":283},{"id":429,"depth":45,"text":430},{"id":506,"depth":45,"text":507},{"id":645,"depth":45,"text":646},{"id":731,"depth":45,"text":732},{"id":787,"depth":45,"text":788},{"id":870,"depth":45,"text":871},{"id":917,"depth":45,"text":917},"md",{},"\u002Fdocs\u002Ftutorial\u002Feduwin-canvas",{"title":5,"description":16},"docs\u002Ftutorial\u002Feduwin-canvas","hIYP7sIEtJw9iSbaWOl8Jk6MvjGU5Wgo7GrIAngjimU",1782488679845]