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 10:49:06 +08:00
parent 02334a2377
commit 679ec79bc6
8 changed files with 65 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
pages/index/index.vue
View File

@ -1,52 +1,46 @@
<template>
<view class="content">
<image class="logo" src="/static/logo.png"></image>
<view class="text-area">
<text class="title">{{title}}</text>
</view>
<view>
<!-- 定义canvas画布 // 设置canvas大小为200x200像素 -->
<canvas
canvas-id="canvas"
id="canvas"
style="width: 200px; height: 200px;"
></canvas>
</view>
</template>
<script>
export default {
data() {
return {
title: 'Hello'
}
},
onLoad() {
<script setup>
import { onMounted } from 'vue'
},
methods: {
function draw() {
const ctx = uni.createCanvasContext('canvas') // 创建canvas绘图上下文
// 绘制外圆
ctx.beginPath() // 开始路径
ctx.arc(100, 100, 80, 0, Math.PI * 2) // 在坐标(100, 100)处绘制半径为80的圆形
ctx.setFillStyle('rgba(0, 0, 255, 0.3)') // 设置填充颜色为蓝色，透明度为0.3
ctx.fill() // 填充所创建的路径
// 绘制内圆以形成环形效果
// ctx.beginPath() // 开始新的路径
// ctx.arc(100, 100, 60, 0, Math.PI * 2) // 在相同中心点(100, 100)，但半径为60的圆形
// ctx.setFillStyle('white') // 设置填充颜色为白色
// ctx.fill() // 填充以“清除”内部区域，形成环形
// // 如果需要绘制一个方块，例如在(50, 50)位置绘制一个40x40像素的正方形：
// ctx.beginPath() // 开始一个新的路径
// ctx.rect(50, 50, 40, 40) // 在画布上绘制一个左上角位于(50, 50)，宽高都是40像素的矩形
// ctx.setFillStyle('green') // 设置填充颜色为绿色
// ctx.fill() // 填充矩形
ctx.draw() // 将上述所有操作提交到canvas进行渲染
}
}
onMounted(() => {
draw() // 页面加载完成后调用draw函数开始绘图
})
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
}
.text-area {
display: flex;
justify-content: center;
}
.title {
font-size: 36rpx;
color: #8f8f94;
}
<style scoped>
/* 样式部分 */
</style>

1
unpackage/dist/dev/.sourcemap/mp-weixin-devtools/pages/index/index.js.map vendored Normal file
View File

@ -0,0 +1 @@
{"version":3,"names":["draw","ctx","common_vendor","index","createCanvasContext","beginPath","arc","Math","PI","setFillStyle","setFillRule","fill","onMounted","wx","createPage","_sfc_main"],"sources":["index.vue","cGFnZXMvaW5kZXgvaW5kZXgudnVl"],"sourcesContent":["<template>\n\t<view>\n\t\t<canvas \n\t\t\tcanvas-id=\"canvas\" \n\t\t\tstyle=\"width: 100px; height: 100px;\"\n\t\t></canvas>\n\t</view>\n</template>\n\n<script setup>\nimport { onMounted } from 'vue'\n\nfunction draw() {\n\tconst ctx = uni.createCanvasContext('canvas')\n\n\tctx.beginPath()\n\tctx.arc(50, 50, 30, 0, Math.PI * 2, true)\n\tctx.arc(50, 50, 15, 0, Math.PI * 2, true)\n\tctx.setFillStyle('black')\n\tctx.setFillRule('evenodd') // 设置填充规则\n\tctx.fill()\n\n\tctx.draw()\n}\n\nonMounted(() => {\n\tdraw()\n})\n</script>\n\n<style scoped>\n</style>","import MiniProgramPage from 'C:/Users/hp/Desktop/app/canvas/pages/index/index.vue'\nwx.createPage(MiniProgramPage)"],"mappings":";;;;;;;IAYA,SAASA,KAAA,EAAO;MACf,IAAMC,GAAA,GAAMC,aAAA,CAAAC,KAAA,CAAIC,mBAAA,CAAoB,QAAQ;MAE5CH,GAAA,CAAII,SAAA,EAAW;MACfJ,GAAA,CAAIK,GAAA,CAAI,IAAI,IAAI,IAAI,GAAGC,IAAA,CAAKC,EAAA,GAAK,GAAG,IAAI;MACxCP,GAAA,CAAIK,GAAA,CAAI,IAAI,IAAI,IAAI,GAAGC,IAAA,CAAKC,EAAA,GAAK,GAAG,IAAI;MACxCP,GAAA,CAAIQ,YAAA,CAAa,OAAO;MACxBR,GAAA,CAAIS,WAAA,CAAY,SAAS;MACzBT,GAAA,CAAIU,IAAA,EAAM;MAEVV,GAAA,CAAID,IAAA,EAAM;IACX;IAEAE,aAAA,CAAAU,SAAA,CAAU,YAAM;MACfZ,IAAA,EAAM;IACP,CAAC;;;;;;AC1BDa,EAAA,CAAGC,UAAA,CAAWC,SAAe","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/pages/index/index.js.map vendored
View File

@ -1 +1 @@
{"version":3,"file":"index.js","sources":["pages/index/index.vue","../../HBuilderX/plugins/uniapp-cli-vite/uniPage:/cGFnZXMvaW5kZXgvaW5kZXgudnVl"],"sourcesContent":["<template>\r\n\t<view class=\"content\">\r\n\t\t<image class=\"logo\" src=\"/static/logo.png\"></image>\r\n\t\t<view class=\"text-area\">\r\n\t\t\t<text class=\"title\">{{title}}</text>\r\n\t\t</view>\r\n\t</view>\r\n</template>\r\n\r\n<script>\r\n\texport default {\r\n\t\tdata() {\r\n\t\t\treturn {\r\n\t\t\t\ttitle: 'Hello'\r\n\t\t\t}\r\n\t\t},\r\n\t\tonLoad() {\r\n\r\n\t\t},\r\n\t\tmethods: {\r\n\r\n\t\t}\r\n\t}\r\n</script>\r\n\r\n<style>\r\n\t.content {\r\n\t\tdisplay: flex;\r\n\t\tflex-direction: column;\r\n\t\talign-items: center;\r\n\t\tjustify-content: center;\r\n\t}\r\n\r\n\t.logo {\r\n\t\theight: 200rpx;\r\n\t\twidth: 200rpx;\r\n\t\tmargin-top: 200rpx;\r\n\t\tmargin-left: auto;\r\n\t\tmargin-right: auto;\r\n\t\tmargin-bottom: 50rpx;\r\n\t}\r\n\r\n\t.text-area {\r\n\t\tdisplay: flex;\r\n\t\tjustify-content: center;\r\n\t}\r\n\r\n\t.title {\r\n\t\tfont-size: 36rpx;\r\n\t\tcolor: #8f8f94;\r\n\t}\r\n</style>\n","import MiniProgramPage from 'C:/Users/hp/Desktop/app/canvas/pages/index/index.vue'\nwx.createPage(MiniProgramPage)"],"names":[],"mappings":";;;AAUC,MAAK,YAAU;AAAA,EACd,OAAO;AACN,WAAO;AAAA,MACN,OAAO;AAAA,IACR;AAAA,EACA;AAAA,EACD,SAAS;AAAA,EAER;AAAA,EACD,SAAS,CAET;AACD;;;;;;;;ACrBD,GAAG,WAAW,eAAe;"}
{"version":3,"file":"index.js","sources":["pages/index/index.vue","../../HBuilderX/plugins/uniapp-cli-vite/uniPage:/cGFnZXMvaW5kZXgvaW5kZXgudnVl"],"sourcesContent":["<template>\n <view>\n <!-- 定义canvas画布 // 设置canvas大小为200x200像素 -->\n <canvas \n canvas-id=\"canvas\" \n id=\"canvas\"\n style=\"width: 200px; height: 200px;\" \n ></canvas>\n </view>\n</template>\n\n<script setup>\nimport { onMounted } from 'vue'\n\nfunction draw() {\n const ctx = uni.createCanvasContext('canvas') // 创建canvas绘图上下文\n\n // 绘制外圆\n ctx.beginPath() // 开始路径\n ctx.arc(100, 100, 80, 0, Math.PI * 2) // 在坐标(100, 100)处绘制半径为80的圆形\n ctx.setFillStyle('rgba(0, 0, 255, 0.3)') // 设置填充颜色为蓝色，透明度为0.3\n ctx.fill() // 填充所创建的路径\n \n // 绘制内圆以形成环形效果\n // ctx.beginPath() // 开始新的路径\n // ctx.arc(100, 100, 60, 0, Math.PI * 2) // 在相同中心点(100, 100)，但半径为60的圆形\n // ctx.setFillStyle('white') // 设置填充颜色为白色\n // ctx.fill() // 填充以“清除”内部区域，形成环形\n\n // // 如果需要绘制一个方块，例如在(50, 50)位置绘制一个40x40像素的正方形：\n // ctx.beginPath() // 开始一个新的路径\n // ctx.rect(50, 50, 40, 40) // 在画布上绘制一个左上角位于(50, 50)，宽高都是40像素的矩形\n // ctx.setFillStyle('green') // 设置填充颜色为绿色\n // ctx.fill() // 填充矩形\n \n ctx.draw() // 将上述所有操作提交到canvas进行渲染\n}\n\nonMounted(() => {\n draw() // 页面加载完成后调用draw函数开始绘图\n})\n</script>\n\n<style scoped>\n/* 样式部分 */\n</style>","import MiniProgramPage from 'C:/Users/hp/Desktop/app/canvas/pages/index/index.vue'\nwx.createPage(MiniProgramPage)"],"names":["uni","onMounted"],"mappings":";;;;;AAcA,aAAS,OAAO;AACd,YAAM,MAAMA,cAAAA,MAAI,oBAAoB,QAAQ;AAG5C,UAAI,UAAW;AACf,UAAI,IAAI,KAAK,KAAK,IAAI,GAAG,KAAK,KAAK,CAAC;AACpC,UAAI,aAAa,sBAAsB;AACvC,UAAI,KAAM;AAcV,UAAI,KAAM;AAAA,IACZ;AAEAC,kBAAAA,UAAU,MAAM;AACd,WAAM;AAAA,IACR,CAAC;;;;;;;ACvCD,GAAG,WAAW,eAAe;"}

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

@ -88,37 +88,6 @@ const looseToNumber = (val) => {
const n = parseFloat(val);
return isNaN(n) ? val : n;
};
const toDisplayString = (val) => {
return isString(val) ? val : val == null ? "" : isArray(val) || isObject(val) && (val.toString === objectToString || !isFunction(val.toString)) ? JSON.stringify(val, replacer, 2) : String(val);
};
const replacer = (_key, val) => {
if (val && val.__v_isRef) {
return replacer(_key, val.value);
} else if (isMap(val)) {
return {
[`Map(${val.size})`]: [...val.entries()].reduce(
(entries, [key, val2], i) => {
entries[stringifySymbol(key, i) + " =>"] = val2;
return entries;
},
{}
)
};
} else if (isSet(val)) {
return {
[`Set(${val.size})`]: [...val.values()].map((v) => stringifySymbol(v))
};
} else if (isSymbol(val)) {
return stringifySymbol(val);
} else if (isObject(val) && !isArray(val) && !isPlainObject(val)) {
return String(val);
}
return val;
};
const stringifySymbol = (v, i = "") => {
var _a;
return isSymbol(v) ? `Symbol(${(_a = v.description) != null ? _a : i})` : v;
};
const LOCALE_ZH_HANS = "zh-Hans";
const LOCALE_ZH_HANT = "zh-Hant";
const LOCALE_EN = "en";
@ -4962,7 +4931,6 @@ function getCreateApp() {
return my[method];
}
}
const t = (val) => toDisplayString(val);
function createApp$1(rootComponent, rootProps = null) {
rootComponent && (rootComponent.mpType = "app");
return createVueApp(rootComponent, rootProps).use(plugin);
@ -5042,9 +5010,9 @@ function assertType(value, type) {
let valid;
const expectedType = getType(type);
if (isSimpleType(expectedType)) {
const t2 = typeof value;
valid = t2 === expectedType.toLowerCase();
if (!valid && t2 === "object") {
const t = typeof value;
valid = t === expectedType.toLowerCase();
if (!valid && t === "object") {
valid = value instanceof type;
}
} else if (expectedType === "Object") {
@ -7725,5 +7693,5 @@ const createSubpackageApp = initCreateSubpackageApp();
exports._export_sfc = _export_sfc;
exports.createSSRApp = createSSRApp;
exports.index = index;
exports.t = t;
exports.onMounted = onMounted;
//# sourceMappingURL=../../.sourcemap/mp-weixin/common/vendor.js.map

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

@ -1,22 +1,24 @@
"use strict";
const common_vendor = require("../../common/vendor.js");
const common_assets = require("../../common/assets.js");
const _sfc_main = {
data() {
return {
title: "Hello"
};
},
onLoad() {
},
methods: {}
};
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
return {
a: common_assets._imports_0,
b: common_vendor.t($data.title)
__name: "index",
setup(__props) {
function draw() {
const ctx = common_vendor.index.createCanvasContext("canvas");
ctx.beginPath();
ctx.arc(100, 100, 80, 0, Math.PI * 2);
ctx.setFillStyle("rgba(0, 0, 255, 0.3)");
ctx.fill();
ctx.draw();
}
common_vendor.onMounted(() => {
draw();
});
return (_ctx, _cache) => {
return {};
};
}
const MiniProgramPage = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render]]);
};
const MiniProgramPage = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["__scopeId", "data-v-1cf27b2a"]]);
wx.createPage(MiniProgramPage);
//# sourceMappingURL=../../../.sourcemap/mp-weixin/pages/index/index.js.map

2
unpackage/dist/dev/mp-weixin/pages/index/index.wxml vendored
View File

@ -1 +1 @@
<view class="content"><image class="logo" src="{{a}}"></image><view class="text-area"><text class="title">{{b}}</text></view></view>
<view class="data-v-1cf27b2a"><canvas class="data-v-1cf27b2a" canvas-id="canvas" id="canvas" style="width:200px;height:200px"></canvas></view>

23
unpackage/dist/dev/mp-weixin/pages/index/index.wxss vendored
View File

@ -1,23 +1,2 @@
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
}
.text-area {
display: flex;
justify-content: center;
}
.title {
font-size: 36rpx;
color: #8f8f94;
}
/* 样式部分 */