{"id":18717533,"url":"https://github.com/encaik/canvas-learn","last_synced_at":"2026-01-31T12:02:38.799Z","repository":{"id":106464112,"uuid":"278818952","full_name":"Encaik/canvas-learn","owner":"Encaik","description":"学习使用canvas做一个代码美化截图页面","archived":false,"fork":false,"pushed_at":"2020-07-11T08:20:10.000Z","size":3,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-15T02:41:50.835Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Encaik.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2020-07-11T08:17:52.000Z","updated_at":"2023-10-19T07:24:28.000Z","dependencies_parsed_at":null,"dependency_job_id":"aeebf3b2-054d-481d-aa0d-990dda6dfdae","html_url":"https://github.com/Encaik/canvas-learn","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Encaik/canvas-learn","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Encaik%2Fcanvas-learn","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Encaik%2Fcanvas-learn/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Encaik%2Fcanvas-learn/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Encaik%2Fcanvas-learn/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Encaik","download_url":"https://codeload.github.com/Encaik/canvas-learn/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Encaik%2Fcanvas-learn/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28941924,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-31T11:39:38.044Z","status":"ssl_error","status_checked_at":"2026-01-31T11:39:27.765Z","response_time":128,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-07T13:16:32.813Z","updated_at":"2026-01-31T12:02:38.778Z","avatar_url":"https://github.com/Encaik.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 推荐在博客观看教程：https://encaik.top/blog/canvas.html\n\n# 学习canvas制作一个代码美化截图页面\n\n## 使用canvas\n\n在HTML中插入canvas标签,并添加id为唯一标识方便通过DOM获取。\n\n```html\n\u003ccanvas id=\"canvas\"\u003e\u003c/canvas\u003e\n```\n\n用js操作DOM获取canvas标签，并设置宽高，然后拿到canvas上下文。\n\n```js\nconst canvas = document.getElementById('canvas');\nconst width = window.innerWidth;\nconst height = window.innerHeight;\ncanvas.width = width;\ncanvas.height = height;\nconst ctx = canvas.getContext('2d');\n```\n\n完成这一步就可以在页面上使用canvas了，接下来开始绘制图形。\n\n## 绘制图形\n\n以下为已完成图示效果：\n\n![canvas图示](/img/blog/canvas-1.png)\n\n### 定义需要的常量及变量\n\n```js\nlet content =\n`\n/* 绘制圆角矩形 */\nfunction roundRect(ctx, x, y, width, height, radius, fillColor) {\n    if (2 * radius \u003e width || 2 * radius \u003e height) { return width = height = 2 * radius; }\n    ctx.save();\n    ctx.translate(x, y);\n    ctx.beginPath(0);\n    ctx.arc(width - radius, height - radius, radius, 0, Math.PI / 2);\n    ctx.lineTo(radius, height);\n    ctx.arc(radius, height - radius, radius, Math.PI / 2, Math.PI);\n    ctx.lineTo(0, radius);\n    ctx.arc(radius, radius, radius, Math.PI, Math.PI * 3 / 2);\n    ctx.lineTo(width - radius, 0);\n    ctx.arc(width - radius, radius, radius, Math.PI * 3 / 2, Math.PI * 2);\n    ctx.lineTo(width, height - radius);\n    ctx.closePath();\n    ctx.shadowBlur = 20;\n    ctx.shadowColor = fillColor || \"#000\";\n    ctx.fillStyle = fillColor || \"#000\";\n    ctx.fill();\n    ctx.restore();\n}\n`;\nlet contentArray = content.split(\"\\n\");\nlet lineHeight = 25;\nlet fontWidth = 10;\nlet rectHeight = contentArray.length * lineHeight + 20;\nlet rectWidth = 0;\nfor (let index = 0; index \u003c contentArray.length; index++) {\n    if (contentArray[index].split(\"\").length * fontWidth \u003e rectWidth) {\n        rectWidth = contentArray[index].split(\"\").length * fontWidth\n    }\n}\n```\n\n这些变量的作用分别是：\n\n- content：显示在框里的文本\n- contentArray：通过换行符拆分的由行组成的数组\n- lineHeight：显示文本的行高\n- fontWidth：显示文本的字宽\n- rectHeight：框的高度，由行数乘以行高加上20的头部计算得来\n- rectWidth：框的宽度，由每行的字符数乘以字宽计算得来\n\n### 绘制背景\n\n背景为一个与画布相同大小的填充矩形，代码如下：\n\n```js\n/* 绘制背景色 */\nfunction background(ctx, x, y, width, height, fillColor) {\n    ctx.fillStyle=fillColor || \"#fff\";\n    ctx.fillRect(x,y,width,height);\n}\nbackground(ctx,0,0,width,height,\"#d2d2d2\")\n```\n\n### 绘制圆角矩形框\n\n圆角矩形右四个1/4圆弧和四段线段组成，从右下角开始顺时针画，代码如下：\n\n```js\n/* 绘制圆角矩形 */\nfunction roundRect(ctx, x, y, width, height, radius, fillColor) {\n    if (2 * radius \u003e width || 2 * radius \u003e height) { return width = height = 2 * radius; }\n    ctx.save();\n    ctx.translate(x, y);\n    ctx.beginPath(0);\n    ctx.arc(width - radius, height - radius, radius, 0, Math.PI / 2);\n    ctx.lineTo(radius, height);\n    ctx.arc(radius, height - radius, radius, Math.PI / 2, Math.PI);\n    ctx.lineTo(0, radius);\n    ctx.arc(radius, radius, radius, Math.PI, Math.PI * 3 / 2);\n    ctx.lineTo(width - radius, 0);\n    ctx.arc(width - radius, radius, radius, Math.PI * 3 / 2, Math.PI * 2);\n    ctx.lineTo(width, height - radius);\n    ctx.closePath();\n    ctx.shadowBlur = 20;\n    ctx.shadowColor = fillColor || \"#000\";\n    ctx.fillStyle = fillColor || \"#000\";\n    ctx.fill();\n    ctx.restore();\n}\nroundRect(ctx, width/2-rectWidth/2, height/2-rectHeight/2, rectWidth, rectHeight, 8, 'rgb(50,50,50)');\n```\n\n### 绘制左上角小按钮\n\n小按钮为三个填充圆形，代码如下：\n\n```js\n/* 绘制左上角三个小按钮 */\nfunction circle(ctx, x, y, radius, fillColor) {\n    ctx.beginPath();\n    ctx.arc(x, y, radius, 0, Math.PI * 2);\n    ctx.closePath();\n    ctx.fillStyle = fillColor || \"#fff\";\n    ctx.fill();\n}\ncircle(ctx, width/2-rectWidth/2+20, height/2-rectHeight/2+20, 8, 'rgb(197,79,103)');\ncircle(ctx, width/2-rectWidth/2+45, height/2-rectHeight/2+20, 8, 'rgb(210,191,77)');\ncircle(ctx, width/2-rectWidth/2+70, height/2-rectHeight/2+20, 8, 'rgb(103,212,98)');\n```\n\n### 绘制文本\n\n文本为每绘制一行就移动位置，否则会重叠在一起，代码如下：\n\n```js\n/* 绘制文本 */\nfunction text(ctx, x, y, lineHeight, contentArray, fillColor) {\n    ctx.font = \"20px bold 微软雅黑\";\n    ctx.fillStyle = fillColor || \"#fff\";\n    ctx.textAlign = \"left\";\n    ctx.textBaseline = \"middle\";\n    for (let index = 0; index \u003c contentArray.length; index++) {\n        if(contentArray[index].trim() === \"\"){\n            contentArray.splice(index,1)\n            index --;\n        }else{\n            ctx.fillText(contentArray[index], x, y + index * lineHeight);\n        }\n    }\n}\ntext(ctx, width/2-rectWidth/2+20, height/2-rectHeight/2+60, lineHeight, contentArray, 'rgb(97,175,239)');\n```\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fencaik%2Fcanvas-learn","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fencaik%2Fcanvas-learn","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fencaik%2Fcanvas-learn/lists"}