{"id":19509803,"url":"https://github.com/dcloudio/nvuecanvasdemo","last_synced_at":"2025-04-26T03:32:01.301Z","repository":{"id":65985164,"uuid":"206477624","full_name":"dcloudio/NvueCanvasDemo","owner":"dcloudio","description":"nvue canvas demo for  uni-app.","archived":false,"fork":false,"pushed_at":"2023-02-03T03:46:20.000Z","size":48,"stargazers_count":29,"open_issues_count":14,"forks_count":17,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-04-04T07:23:39.529Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dcloudio.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-09-05T04:55:51.000Z","updated_at":"2025-01-27T05:34:55.000Z","dependencies_parsed_at":"2023-02-19T19:35:13.138Z","dependency_job_id":null,"html_url":"https://github.com/dcloudio/NvueCanvasDemo","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dcloudio%2FNvueCanvasDemo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dcloudio%2FNvueCanvasDemo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dcloudio%2FNvueCanvasDemo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dcloudio%2FNvueCanvasDemo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dcloudio","download_url":"https://codeload.github.com/dcloudio/NvueCanvasDemo/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250926832,"owners_count":21509045,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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-10T23:13:24.685Z","updated_at":"2025-04-26T03:32:00.877Z","avatar_url":"https://github.com/dcloudio.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"### 概要\nHBuilderX2.2.5（alpha）开始nvue页面支持Canvas。\n\nCanvas插件基于[GCanvas](https://github.com/alibaba/GCanvas)实现了微信小程序[CanvasContext API](https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.html),  W3C [WebGL API](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API),\n此工程为uni-app项目中nvue页面使用Canvas的演示demo\n\n### 使用\n1. 将gcanvas目录复制到HBX uniapp 工程下\n2. 在页面中引入canvas js\n```javascript\nimport {\n\tenable,\n\tWeexBridge\n} from '[自己的路径]/gcanvas/index.js';\n```\n3. 获取Canvas context\n```javascript\n /*通过元素引用获取canvas对象*/\n var ganvas = this.$refs[\"gcanvess\"];\n var canvasObj = enable(ganvas, {bridge: WeexBridge});\n /*获取绘图所需的上下文*/\n var context = canvasObj.getContext('2d');\n var gl = canvasObj.getContext(\"webgl\");\n /*调用具体API*/\n```\n## API支持情况\n* Canvas API\n\nAPI|Status|\n:-|:-|\ncreateOffscreenCanvas|❌\ncanvasToTempFilePath|✅\ncanvasPutImageData|✅\ncanvasGetImageData|✅\ncreateImage|✅\nrequestAnimationFrame|❌\nCanvasGradient|✅\nColor|✅\nImage|✅\nOffscreenCanvas|❌\n* CanvasContext API\n\nAPI|Status|\n:-|:-|\narc|✅\narcTo|✅\nbeginPath|✅\t\nbezierCurveTo|✅\t\nclearRect|✅\nclip|✅\nclosePath|✅\ncreateCircularGradient|✅\ncreateLinearGradient|✅\ncreatePattern|❌\ndraw|✅\ndrawImage|✅\t\nfill|✅\nfillRect|✅\nfillText|✅\nlineTo|✅\nmeasureText|✅\nmoveTo|✅\nquadraticCurveTo|✅\nrect|✅\nrestore|✅\nrotate|✅\nsave|✅\nscale|✅\nsetFillStyle|✅\nsetFontSize|✅\nsetGlobalAlpha|✅\nsetLineCap|✅\nsetLineDash|❌\nsetLineJoin|✅\nsetLineWidth|✅\nsetMiterLimit|✅\nsetShadow| ❌\nsetStrokeStyle|✅\nsetTextAlign|✅\nsetTextBaseline|✅\nsetTransform|✅\nstroke|✅\nstrokeRect|✅\nstrokeText|✅\ntransform|✅\ntranslate|✅\n* WebGL请参考[https://alibaba.github.io/GCanvas/docs/WebGL.html](https://alibaba.github.io/GCanvas/docs/WebGL.html)\n\n### 云端打包\nCanvas是作为独立的模块，打包时需要选择使用Canvas模块才能正常使用相关的功能。\n需要在manifest.json的代码视图中配置如下（暂时还不支持可视化界面操作）：\n```javascript\n    \"app-plus\" : {\n        /* 模块配置 */\n        \"modules\" : {\n            \"Canvas\" : \"nvue canvas\"    //使用Canvas模块\n        },\n\t//...\n    },\n    //...\n```\n保存好提交云端打包。\n\n### 离线打包\n#### Android\n复制weex_gcanvas-release.aar到libs目录下，然后在build.gradle中添加依赖即可。（weex_gcanvas-release.aar位于SDK/libs目录下）\n\n#### iOS\n导入 对应版本离线SDK目录下 SDK/Libs/libDCUniCanvas.a 库。\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdcloudio%2Fnvuecanvasdemo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdcloudio%2Fnvuecanvasdemo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdcloudio%2Fnvuecanvasdemo/lists"}