renyt/canvas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1

Browse Source
This commit is contained in:
renyt 2025-05-08 11:36:25 +08:00
parent 4242018a6d
commit 8cba464fc0
6 changed files with 15 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
pages/index/index.vue
View File

@ -9,14 +9,15 @@
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { ref, onMounted ,getCurrentInstance } from 'vue'
const canvasWidth = ref(200) // 动态设置Canvas宽度
const canvasHeight = ref(200) // 动态设置Canvas高度
const instance = getCurrentInstance()
// 定义绘图函数
function draw() {
const ctx = uni.createCanvasContext('canvas') // 创建canvas绘图上下文
const ctx = uni.createCanvasContext('canvas',instance) // 创建canvas绘图上下文
console.log(ctx,'12');
// 绘制外圆
ctx.beginPath() // 开始路径
ctx.arc(100, 100, 80, 0, Math.PI * 2) // 在坐标(100, 100)处绘制半径为80的圆形
@ -28,10 +29,7 @@
ctx.arc(100, 100, 75, 0, Math.PI * 2) // 在相同中心点(100, 100)，但半径为60的圆形
ctx.setFillStyle('white') // 设置填充颜色为白色
ctx.fill() // 填充以“清除”内部区域，形成环形
ctx.draw(false, setTimeout(()=>{
console.log(3)
},300))
// ctx.draw(true) // 将上述所有操作提交到canvas进行渲染
ctx.draw()
}
// 按钮点击事件处理函数

2
unpackage/dist/dev/.sourcemap/mp-weixin-devtools/index.js.map vendored
View File

@ -1 +1 @@
{"version":3,"names":["canvasWidth","common_vendor","ref","canvasHeight","draw","ctx","index","createCanvasContext","beginPath","arc","Math","PI","setFillStyle","fill","setTimeout","__f__","handleDraw","onMounted"],"sources":["index.vue"],"sourcesContent":["<template>\n\t<view>\n\t\t<!-- 定义canvas画布 // 设置canvas大小为200x200像素 -->\n\t\t<canvas canvas-id=\"canvas\" id=\"canvas\" style=\"width: 200px; height: 200px;border: 1px solid red;\" :width=\"canvasWidth\" :height=\"canvasHeight\"></canvas>\n\n\t\t<!-- 添加一个按钮，用于触发绘图 -->\n\t\t<button @click=\"handleDraw\">点击绘制圆形</button>\n\t</view>\n</template>\n\n<script setup>\n\timport { ref, onMounted } from 'vue'\n\n\tconst canvasWidth = ref(200) // 动态设置Canvas宽度\n\tconst canvasHeight = ref(200) // 动态设置Canvas高度\n\n\t// 定义绘图函数\n\tfunction draw() {\n\t\tconst ctx = uni.createCanvasContext('canvas') // 创建canvas绘图上下文\n\t\t// 绘制外圆\n\t\tctx.beginPath() // 开始路径\n\t\tctx.arc(100, 100, 80, 0, Math.PI * 2) // 在坐标(100, 100)处绘制半径为80的圆形\n\t\tctx.setFillStyle('rgba(0, 0, 0, 1)') // 设置填充颜色为黑色，无透明度\n\t\tctx.fill() // 填充所创建的路径\n\t\t\n\t\t// 绘制内圆以形成环形效果\n\t\tctx.beginPath() // 开始新的路径\n\t\tctx.arc(100, 100, 75, 0, Math.PI * 2) // 在相同中心点(100, 100)，但半径为60的圆形\n\t\tctx.setFillStyle('white') // 设置填充颜色为白色\n\t\tctx.fill() // 填充以“清除”内部区域，形成环形\r\n\t\tthis.ctx.draw(false, setTimeout(()=>{\r\n\t\t console.log(3)\r\n\t\t},300))\r\n\t\t\t// ctx.draw(true) // 将上述所有操作提交到canvas进行渲染\r\n\t}\n\n\t// 按钮点击事件处理函数\n\tconst handleDraw = () => {\r\n\t\tconsole.log('111111');\n\t\tdraw(); // 调用绘图函数\r\n\t\tconsole.log('222222222');\n\t}\n\n\tonMounted(() => {\r\n\t\t// 确保在组件挂载后可以获取到Canvas元素\n\t})\n</script>\n\n<style scoped>\n\tbutton {\n\t\tmargin-top: 10px;\n\t}\n</style>"],"mappings":";;;;;;;IAaC,IAAMA,WAAA,GAAcC,aAAA,CAAGC,GAAA,CAAC,GAAG;IAC3B,IAAMC,YAAA,GAAeF,aAAA,CAAGC,GAAA,CAAC,GAAG;IAG5B,SAASE,KAAA,EAAO;MACf,IAAMC,GAAA,GAAMJ,aAAA,CAAAK,KAAA,CAAIC,mBAAA,CAAoB,QAAQ;MAE5CF,GAAA,CAAIG,SAAA,EAAW;MACfH,GAAA,CAAII,GAAA,CAAI,KAAK,KAAK,IAAI,GAAGC,IAAA,CAAKC,EAAA,GAAK,CAAC;MACpCN,GAAA,CAAIO,YAAA,CAAa,kBAAkB;MACnCP,GAAA,CAAIQ,IAAA,EAAM;MAGVR,GAAA,CAAIG,SAAA,EAAW;MACfH,GAAA,CAAII,GAAA,CAAI,KAAK,KAAK,IAAI,GAAGC,IAAA,CAAKC,EAAA,GAAK,CAAC;MACpCN,GAAA,CAAIO,YAAA,CAAa,OAAO;MACxBP,GAAA,CAAIQ,IAAA,EAAM;MACV,KAAKR,GAAA,CAAID,IAAA,CAAK,OAAOU,UAAA,CAAW,YAAI;QAChCb,aAAA,CAAAK,KAAA,CAAYS,KAAA,wCAAC;MAChB,GAAC,GAAG,CAAC;IAEN;IAGD,IAAMC,UAAA,GAAa,SAAbA,WAAA,EAAmB;MACxBf,aAAA,CAAAK,KAAA,CAAYS,KAAA,+CAAQ;MACpBX,IAAA;MACAH,aAAA,CAAAK,KAAA,CAAAS,KAAA,uCAAY,WAAW;IACvB;IAEDd,aAAA,CAAAgB,SAAA,CAAU,YAAM,CAEjB,CAAE","ignoreList":[]}
{"version":3,"names":["canvasWidth","common_vendor","ref","canvasHeight","draw","ctx","index","createCanvasContext","__f__","beginPath","arc","Math","PI","setFillStyle","fill","setTimeout","handleDraw","onMounted"],"sources":["index.vue"],"sourcesContent":["<template>\n\t<view>\n\t\t<!-- 定义canvas画布 // 设置canvas大小为200x200像素 -->\n\t\t<canvas canvas-id=\"canvas\" id=\"canvas\" style=\"width: 200px; height: 200px;border: 1px solid red;\" :width=\"canvasWidth\" :height=\"canvasHeight\"></canvas>\n\n\t\t<!-- 添加一个按钮，用于触发绘图 -->\n\t\t<button @click=\"handleDraw\">点击绘制圆形</button>\n\t</view>\n</template>\n\n<script setup>\n\timport { ref, onMounted } from 'vue'\n\n\tconst canvasWidth = ref(200) // 动态设置Canvas宽度\n\tconst canvasHeight = ref(200) // 动态设置Canvas高度\n\n\t// 定义绘图函数\n\tfunction draw() {\n\t\tconst ctx = uni.createCanvasContext('canvas',this) // 创建canvas绘图上下文\r\n\t\tconsole.log(ctx,'12');\r\n\t\t// 绘制外圆\n\t\tctx.beginPath() // 开始路径\n\t\tctx.arc(100, 100, 80, 0, Math.PI * 2) // 在坐标(100, 100)处绘制半径为80的圆形\n\t\tctx.setFillStyle('rgba(0, 0, 0, 1)') // 设置填充颜色为黑色，无透明度\n\t\tctx.fill() // 填充所创建的路径\n\t\t\n\t\t// 绘制内圆以形成环形效果\n\t\tctx.beginPath() // 开始新的路径\n\t\tctx.arc(100, 100, 75, 0, Math.PI * 2) // 在相同中心点(100, 100)，但半径为60的圆形\n\t\tctx.setFillStyle('white') // 设置填充颜色为白色\n\t\tctx.fill() // 填充以“清除”内部区域，形成环形\r\n\t\tctx.draw(false, setTimeout(()=>{\r\n\t\t console.log(3)\r\n\t\t},300))\r\n\t}\n\n\t// 按钮点击事件处理函数\n\tconst handleDraw = () => {\r\n\t\tconsole.log('111111');\n\t\tdraw(); // 调用绘图函数\r\n\t\tconsole.log('222222222');\n\t}\n\n\tonMounted(() => {\r\n\t\t// 确保在组件挂载后可以获取到Canvas元素\n\t})\n</script>\n\n<style scoped>\n\tbutton {\n\t\tmargin-top: 10px;\n\t}\n</style>"],"mappings":";;;;;;;IAaC,IAAMA,WAAA,GAAcC,aAAA,CAAGC,GAAA,CAAC,GAAG;IAC3B,IAAMC,YAAA,GAAeF,aAAA,CAAGC,GAAA,CAAC,GAAG;IAG5B,SAASE,KAAA,EAAO;MACf,IAAMC,GAAA,GAAMJ,aAAA,CAAGK,KAAA,CAACC,mBAAA,CAAoB,UAAS,IAAI;MACjDN,aAAA,CAAAK,KAAA,CAAAE,KAAA,uCAAYH,GAAA,EAAI,IAAI;MAEpBA,GAAA,CAAII,SAAA,EAAW;MACfJ,GAAA,CAAIK,GAAA,CAAI,KAAK,KAAK,IAAI,GAAGC,IAAA,CAAKC,EAAA,GAAK,CAAC;MACpCP,GAAA,CAAIQ,YAAA,CAAa,kBAAkB;MACnCR,GAAA,CAAIS,IAAA,EAAM;MAGVT,GAAA,CAAII,SAAA,EAAW;MACfJ,GAAA,CAAIK,GAAA,CAAI,KAAK,KAAK,IAAI,GAAGC,IAAA,CAAKC,EAAA,GAAK,CAAC;MACpCP,GAAA,CAAIQ,YAAA,CAAa,OAAO;MACxBR,GAAA,CAAIS,IAAA,EAAM;MACVT,GAAA,CAAID,IAAA,CAAK,OAAOW,UAAA,CAAW,YAAI;QAC3Bd,aAAA,CAAAK,KAAA,CAAYE,KAAA,wCAAC;MAChB,GAAC,GAAG,CAAC;IACN;IAGD,IAAMQ,UAAA,GAAa,SAAbA,WAAA,EAAmB;MACxBf,aAAA,CAAAK,KAAA,CAAYE,KAAA,+CAAQ;MACpBJ,IAAA;MACAH,aAAA,CAAAK,KAAA,CAAAE,KAAA,uCAAY,WAAW;IACvB;IAEDP,aAAA,CAAAgB,SAAA,CAAU,YAAM,CAEjB,CAAE","ignoreList":[]}

2
unpackage/dist/dev/.sourcemap/mp-weixin/common/vendor.js.map vendored
View File

File diff suppressed because one or more lines are too long

2
unpackage/dist/dev/.sourcemap/mp-weixin/index.js.map vendored
View File

@ -1 +1 @@
{"version":3,"file":"index.js","sources":["pages/index/index.vue"],"sourcesContent":["<template>\n\t<view>\n\t\t<!-- 定义canvas画布 // 设置canvas大小为200x200像素 -->\n\t\t<canvas canvas-id=\"canvas\" id=\"canvas\" style=\"width: 200px; height: 200px;border: 1px solid red;\" :width=\"canvasWidth\" :height=\"canvasHeight\"></canvas>\n\n\t\t<!-- 添加一个按钮，用于触发绘图 -->\n\t\t<button @click=\"handleDraw\">点击绘制圆形</button>\n\t</view>\n</template>\n\n<script setup>\n\timport { ref, onMounted } from 'vue'\n\n\tconst canvasWidth = ref(200) // 动态设置Canvas宽度\n\tconst canvasHeight = ref(200) // 动态设置Canvas高度\n\n\t// 定义绘图函数\n\tfunction draw() {\n\t\tconst ctx = uni.createCanvasContext('canvas') // 创建canvas绘图上下文\n\t\t// 绘制外圆\n\t\tctx.beginPath() // 开始路径\n\t\tctx.arc(100, 100, 80, 0, Math.PI * 2) // 在坐标(100, 100)处绘制半径为80的圆形\n\t\tctx.setFillStyle('rgba(0, 0, 0, 1)') // 设置填充颜色为黑色，无透明度\n\t\tctx.fill() // 填充所创建的路径\n\t\t\n\t\t// 绘制内圆以形成环形效果\n\t\tctx.beginPath() // 开始新的路径\n\t\tctx.arc(100, 100, 75, 0, Math.PI * 2) // 在相同中心点(100, 100)，但半径为60的圆形\n\t\tctx.setFillStyle('white') // 设置填充颜色为白色\n\t\tctx.fill() // 填充以“清除”内部区域，形成环形\r\n\t\tctx.draw(false, setTimeout(()=>{\r\n\t\t console.log(3)\r\n\t\t},300))\r\n\t\t\t// ctx.draw(true) // 将上述所有操作提交到canvas进行渲染\r\n\t}\n\n\t// 按钮点击事件处理函数\n\tconst handleDraw = () => {\r\n\t\tconsole.log('111111');\n\t\tdraw(); // 调用绘图函数\r\n\t\tconsole.log('222222222');\n\t}\n\n\tonMounted(() => {\r\n\t\t// 确保在组件挂载后可以获取到Canvas元素\n\t})\n</script>\n\n<style scoped>\n\tbutton {\n\t\tmargin-top: 10px;\n\t}\n</style>"],"names":["ref","uni","onMounted"],"mappings":";;;;;AAaC,UAAM,cAAcA,cAAG,IAAC,GAAG;AAC3B,UAAM,eAAeA,cAAG,IAAC,GAAG;AAG5B,aAAS,OAAO;AACf,YAAM,MAAMC,cAAAA,MAAI,oBAAoB,QAAQ;AAE5C,UAAI,UAAW;AACf,UAAI,IAAI,KAAK,KAAK,IAAI,GAAG,KAAK,KAAK,CAAC;AACpC,UAAI,aAAa,kBAAkB;AACnC,UAAI,KAAM;AAGV,UAAI,UAAW;AACf,UAAI,IAAI,KAAK,KAAK,IAAI,GAAG,KAAK,KAAK,CAAC;AACpC,UAAI,aAAa,OAAO;AACxB,UAAI,KAAM;AACV,UAAI,KAAK,OAAO,WAAW,MAAI;AAC3BA,sBAAAA,MAAY,MAAA,OAAA,+BAAA,CAAC;AAAA,MAChB,GAAC,GAAG,CAAC;AAAA,IAEN;AAGD,UAAM,aAAa,MAAM;AACxBA,oBAAAA,MAAY,MAAA,OAAA,+BAAA,QAAQ;AACpB;AACAA,oBAAAA,MAAA,MAAA,OAAA,+BAAY,WAAW;AAAA,IACvB;AAEDC,kBAAAA,UAAU,MAAM;AAAA,IAEjB,CAAE;;;;;;;;;;;;"}
{"version":3,"file":"index.js","sources":["pages/index/index.vue"],"sourcesContent":["<template>\n\t<view>\n\t\t<!-- 定义canvas画布 // 设置canvas大小为200x200像素 -->\n\t\t<canvas canvas-id=\"canvas\" id=\"canvas\" style=\"width: 200px; height: 200px;border: 1px solid red;\" :width=\"canvasWidth\" :height=\"canvasHeight\"></canvas>\n\n\t\t<!-- 添加一个按钮，用于触发绘图 -->\n\t\t<button @click=\"handleDraw\">点击绘制圆形</button>\n\t</view>\n</template>\n\n<script setup>\n\timport { ref, onMounted ,getCurrentInstance } from 'vue'\n\n\tconst canvasWidth = ref(200) // 动态设置Canvas宽度\n\tconst canvasHeight = ref(200) // 动态设置Canvas高度\n\tconst instance = getCurrentInstance() \n\t// 定义绘图函数\n\tfunction draw() {\n\t\tconst ctx = uni.createCanvasContext('canvas',instance) // 创建canvas绘图上下文\r\n\t\tconsole.log(ctx,'12');\r\n\t\t// 绘制外圆\n\t\tctx.beginPath() // 开始路径\n\t\tctx.arc(100, 100, 80, 0, Math.PI * 2) // 在坐标(100, 100)处绘制半径为80的圆形\n\t\tctx.setFillStyle('rgba(0, 0, 0, 1)') // 设置填充颜色为黑色，无透明度\n\t\tctx.fill() // 填充所创建的路径\n\t\t\n\t\t// 绘制内圆以形成环形效果\n\t\tctx.beginPath() // 开始新的路径\n\t\tctx.arc(100, 100, 75, 0, Math.PI * 2) // 在相同中心点(100, 100)，但半径为60的圆形\n\t\tctx.setFillStyle('white') // 设置填充颜色为白色\n\t\tctx.fill() // 填充以“清除”内部区域，形成环形\r\n\t\tctx.draw()\r\n\t}\n\n\t// 按钮点击事件处理函数\n\tconst handleDraw = () => {\r\n\t\tconsole.log('111111');\n\t\tdraw(); // 调用绘图函数\r\n\t\tconsole.log('222222222');\n\t}\n\n\tonMounted(() => {\r\n\t\t// 确保在组件挂载后可以获取到Canvas元素\n\t})\n</script>\n\n<style scoped>\n\tbutton {\n\t\tmargin-top: 10px;\n\t}\n</style>"],"names":["ref","getCurrentInstance","uni","onMounted"],"mappings":";;;;;AAaC,UAAM,cAAcA,cAAG,IAAC,GAAG;AAC3B,UAAM,eAAeA,cAAG,IAAC,GAAG;AAC5B,UAAM,WAAWC,cAAAA,mBAAoB;AAErC,aAAS,OAAO;AACf,YAAM,MAAMC,cAAG,MAAC,oBAAoB,UAAS,QAAQ;AACrDA,oBAAA,MAAA,MAAA,OAAA,+BAAY,KAAI,IAAI;AAEpB,UAAI,UAAW;AACf,UAAI,IAAI,KAAK,KAAK,IAAI,GAAG,KAAK,KAAK,CAAC;AACpC,UAAI,aAAa,kBAAkB;AACnC,UAAI,KAAM;AAGV,UAAI,UAAW;AACf,UAAI,IAAI,KAAK,KAAK,IAAI,GAAG,KAAK,KAAK,CAAC;AACpC,UAAI,aAAa,OAAO;AACxB,UAAI,KAAM;AACV,UAAI,KAAM;AAAA,IACV;AAGD,UAAM,aAAa,MAAM;AACxBA,oBAAAA,MAAY,MAAA,OAAA,+BAAA,QAAQ;AACpB;AACAA,oBAAAA,MAAA,MAAA,OAAA,+BAAY,WAAW;AAAA,IACvB;AAEDC,kBAAAA,UAAU,MAAM;AAAA,IAEjB,CAAE;;;;;;;;;;;;"}

1
unpackage/dist/dev/mp-weixin/common/vendor.js vendored
View File

@ -7787,6 +7787,7 @@ const createSubpackageApp = initCreateSubpackageApp();
}
exports._export_sfc = _export_sfc;
exports.createSSRApp = createSSRApp;
exports.getCurrentInstance = getCurrentInstance;
exports.index = index;
exports.o = o;
exports.onMounted = onMounted;

12
unpackage/dist/dev/mp-weixin/index.js vendored
View File

@ -5,8 +5,10 @@ const _sfc_main = {
setup(__props) {
const canvasWidth = common_vendor.ref(200);
const canvasHeight = common_vendor.ref(200);
const instance = common_vendor.getCurrentInstance();
function draw() {
const ctx = common_vendor.index.createCanvasContext("canvas");
const ctx = common_vendor.index.createCanvasContext("canvas", instance);
common_vendor.index.__f__("log", "at pages/index/index.vue:20", ctx, "12");
ctx.beginPath();
ctx.arc(100, 100, 80, 0, Math.PI * 2);
ctx.setFillStyle("rgba(0, 0, 0, 1)");
@ -15,14 +17,12 @@ const _sfc_main = {
ctx.arc(100, 100, 75, 0, Math.PI * 2);
ctx.setFillStyle("white");
ctx.fill();
ctx.draw(false, setTimeout(() => {
common_vendor.index.__f__("log", "at pages/index/index.vue:32", 3);
}, 300));
ctx.draw();
}
const handleDraw = () => {
common_vendor.index.__f__("log", "at pages/index/index.vue:39", "111111");
common_vendor.index.__f__("log", "at pages/index/index.vue:37", "111111");
draw();
common_vendor.index.__f__("log", "at pages/index/index.vue:41", "222222222");
common_vendor.index.__f__("log", "at pages/index/index.vue:39", "222222222");
};
common_vendor.onMounted(() => {
});