Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DCloud
hello uni-app x
提交
d2f0ead2
H
hello uni-app x
项目概览
DCloud
/
hello uni-app x
通知
5954
Star
89
Fork
162
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
18
列表
看板
标记
里程碑
合并请求
1
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
H
hello uni-app x
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
18
Issue
18
列表
看板
标记
里程碑
合并请求
1
合并请求
1
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
d2f0ead2
编写于
1月 02, 2024
作者:
H
hdx
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat(web): 新增 canvas 示例
上级
8977cf4f
变更
5
隐藏空白更改
内联
并排
Showing
5 changed file
with
658 addition
and
13 deletion
+658
-13
pages.json
pages.json
+16
-0
pages/API/canvas/canvas.uvue
pages/API/canvas/canvas.uvue
+366
-0
pages/component/canvas/canvas.uvue
pages/component/canvas/canvas.uvue
+259
-0
pages/tabBar/API.uvue
pages/tabBar/API.uvue
+14
-12
pages/tabBar/component.uvue
pages/tabBar/component.uvue
+3
-1
未找到文件。
pages.json
浏览文件 @
d2f0ead2
...
...
@@ -50,6 +50,14 @@
"navigationBarTitleText"
:
"button"
}
},
//
#ifdef
WEB
{
"path"
:
"pages/component/canvas/canvas"
,
"style"
:
{
"navigationBarTitleText"
:
"canvas"
}
},
//
#endif
{
"path"
:
"pages/component/radio/radio"
,
"style"
:
{
...
...
@@ -246,6 +254,14 @@
"backgroundColor"
:
"#F8F8F8"
}
},
//
#ifdef
WEB
{
"path"
:
"pages/API/canvas/canvas"
,
"style"
:
{
"navigationBarTitleText"
:
"创建绘画"
}
},
//
#endif
{
"path"
:
"pages/API/get-app/get-app"
,
"style"
:
{
...
...
pages/API/canvas/canvas.uvue
0 → 100644
浏览文件 @
d2f0ead2
<template>
<view>
<page-head :title="title"></page-head>
<view class="uni-common-mt">
<canvas class="canvas-element" canvas-id="canvas" id="canvas"></canvas>
<scroll-view class="canvas-buttons" scroll-y="true">
<block v-for="(name, index) in names" :key="index">
<button class="canvas-button" @click="handleCanvasButton(name)">{{name}}</button>
</block>
<button class="canvas-button" @click="toTempFilePath" type="primary">toTempFilePath</button>
</scroll-view>
</view>
</view>
</template>
<script>
var context = null;
export default {
data() {
return {
title: 'createContext',
names: ["rotate", "scale", "reset", "translate", "save", "restore", "drawImage", "fillText", "fill",
"stroke", "clearRect", "beginPath", "closePath", "moveTo", "lineTo", "rect", "arc",
"quadraticCurveTo", "bezierCurveTo", "setFillStyle", "setStrokeStyle", "setGlobalAlpha",
"setShadow", "setFontSize", "setLineCap", "setLineJoin", "setLineWidth", "setMiterLimit"
]
}
},
onReady: function () {
context = uni.createCanvasContext('canvas', this)
},
methods: {
toTempFilePath: function () {
uni.canvasToTempFilePath({
canvasId: 'canvas',
success: function (res) {
console.log(res.tempFilePath)
},
fail: function (err) {
console.error(JSON.stringify(err))
}
})
},
handleCanvasButton: function (name) {
this[name] && this[name]();
},
rotate: function () {
context.beginPath()
context.rotate(10 * Math.PI / 180)
context.rect(225, 75, 20, 10)
context.fill()
context.draw()
},
scale: function () {
context.beginPath()
context.rect(25, 25, 50, 50)
context.stroke()
context.scale(2, 2)
context.beginPath()
context.rect(25, 25, 50, 50)
context.stroke()
context.draw()
},
reset: function () {
context.beginPath()
context.setFillStyle('#000000')
context.setStrokeStyle('#000000')
context.setFontSize(10)
context.setGlobalAlpha(1)
context.setShadow(0, 0, 0, 'rgba(0, 0, 0, 0)')
context.setLineCap('butt')
context.setLineJoin('miter')
context.setLineWidth(1)
context.setMiterLimit(10)
context.draw()
},
translate: function () {
context.beginPath()
context.rect(10, 10, 100, 50)
context.fill()
context.translate(70, 70)
context.beginPath()
context.fill()
context.draw()
},
save: function () {
context.beginPath()
context.setStrokeStyle('#00ff00')
context.save()
context.scale(2, 2)
context.setStrokeStyle('#ff0000')
context.rect(0, 0, 100, 100)
context.stroke()
context.restore()
context.rect(0, 0, 50, 50)
context.stroke()
context.draw()
},
restore: function () {
[3, 2, 1].forEach(function (item) {
context.beginPath()
context.save()
context.scale(item, item)
context.rect(10, 10, 100, 100)
context.stroke()
context.restore()
});
context.draw()
},
drawImage: function () {
// #ifdef APP-PLUS
context.drawImage('../../../static/app-plus/uni@2x.png', 0, 0)
// #endif
// #ifndef APP-PLUS
context.drawImage('../../../static/uni.png', 0, 0)
// #endif
context.draw()
},
fillText: function () {
context.setStrokeStyle('#ff0000')
context.beginPath()
context.moveTo(0, 10)
context.lineTo(300, 10)
context.stroke()
// context.save()
// context.scale(1.5, 1.5)
// context.translate(20, 20)
context.setFontSize(10)
context.fillText('Hello World', 0, 30)
context.setFontSize(20)
context.fillText('Hello World', 100, 30)
// context.restore()
context.beginPath()
context.moveTo(0, 30)
context.lineTo(300, 30)
context.stroke()
context.draw()
},
fill: function () {
context.beginPath()
context.rect(20, 20, 150, 100)
context.setStrokeStyle('#00ff00')
context.fill()
context.draw()
},
stroke: function () {
context.beginPath()
context.moveTo(20, 20)
context.lineTo(20, 100)
context.lineTo(70, 100)
context.setStrokeStyle('#00ff00')
context.stroke()
context.draw()
},
clearRect: function () {
context.setFillStyle('#ff0000')
context.beginPath()
context.rect(0, 0, 300, 150)
context.fill()
context.clearRect(20, 20, 100, 50)
context.draw()
},
beginPath: function () {
context.beginPath()
context.setLineWidth(5)
context.setStrokeStyle('#ff0000')
context.moveTo(0, 75)
context.lineTo(250, 75)
context.stroke()
context.beginPath()
context.setStrokeStyle('#0000ff')
context.moveTo(50, 0)
context.lineTo(150, 130)
context.stroke()
context.draw()
},
closePath: function () {
context.beginPath()
context.setLineWidth(1)
context.moveTo(20, 20)
context.lineTo(20, 100)
context.lineTo(70, 100)
context.closePath()
context.stroke()
context.draw()
},
moveTo: function () {
context.beginPath()
context.moveTo(0, 0)
context.lineTo(300, 150)
context.stroke()
context.draw()
},
lineTo: function () {
context.beginPath()
context.moveTo(20, 20)
context.lineTo(20, 100)
context.lineTo(70, 100)
context.stroke()
context.draw()
},
rect: function () {
context.beginPath()
context.rect(20, 20, 150, 100)
context.stroke()
context.draw()
},
arc: function () {
context.beginPath()
context.setLineWidth(2)
context.arc(75, 75, 50, 0, Math.PI * 2, true)
context.moveTo(110, 75)
context.arc(75, 75, 35, 0, Math.PI, false)
context.moveTo(65, 65)
context.arc(60, 65, 5, 0, Math.PI * 2, true)
context.moveTo(95, 65)
context.arc(90, 65, 5, 0, Math.PI * 2, true)
context.stroke()
context.draw()
},
quadraticCurveTo: function () {
context.beginPath()
context.moveTo(20, 20)
context.quadraticCurveTo(20, 100, 200, 20)
context.stroke()
context.draw()
},
bezierCurveTo: function () {
context.beginPath()
context.moveTo(20, 20)
context.bezierCurveTo(20, 100, 200, 100, 200, 20)
context.stroke()
context.draw()
},
setFillStyle: function () {
['#fef957', 'rgb(242,159,63)', 'rgb(242,117,63)', '#e87e51'].forEach(function (item, index) {
context.setFillStyle(item)
context.beginPath()
context.rect(0 + 75 * index, 0, 50, 50)
context.fill()
})
context.draw()
},
setStrokeStyle: function () {
['#fef957', 'rgb(242,159,63)', 'rgb(242,117,63)', '#e87e51'].forEach(function (item, index) {
context.setStrokeStyle(item)
context.beginPath()
context.rect(0 + 75 * index, 0, 50, 50)
context.stroke()
})
context.draw()
},
setGlobalAlpha: function () {
context.setFillStyle('#000000');
[1, 0.5, 0.1].forEach(function (item, index) {
context.setGlobalAlpha(item)
context.beginPath()
context.rect(0 + 75 * index, 0, 50, 50)
context.fill()
})
context.draw()
context.setGlobalAlpha(1)
},
setShadow: function () {
context.beginPath()
context.setShadow(10, 10, 10, 'rgba(0, 0, 0, 199)')
context.rect(10, 10, 100, 100)
context.fill()
context.draw()
},
setFontSize: function () {
[10, 20, 30, 40].forEach(function (item, index) {
context.setFontSize(item)
context.fillText('Hello, world', 20, 20 + 40 * index)
})
context.draw()
},
setLineCap: function () {
context.setLineWidth(10);
['butt', 'round', 'square'].forEach(function (item, index) {
context.beginPath()
context.setLineCap(item)
context.moveTo(20, 20 + 20 * index)
context.lineTo(100, 20 + 20 * index)
context.stroke()
})
context.draw()
},
setLineJoin: function () {
context.setLineWidth(10);
['bevel', 'round', 'miter'].forEach(function (item, index) {
context.beginPath()
context.setLineJoin(item)
context.moveTo(20 + 80 * index, 20)
context.lineTo(100 + 80 * index, 50)
context.lineTo(20 + 80 * index, 100)
context.stroke()
})
context.draw()
},
setLineWidth: function () {
[2, 4, 6, 8, 10].forEach(function (item, index) {
context.beginPath()
context.setLineWidth(item)
context.moveTo(20, 20 + 20 * index)
context.lineTo(100, 20 + 20 * index)
context.stroke()
})
context.draw()
},
setMiterLimit: function () {
context.setLineWidth(4);
[2, 4, 6, 8, 10].forEach(function (item, index) {
context.beginPath()
context.setMiterLimit(item)
context.moveTo(20 + 80 * index, 20)
context.lineTo(100 + 80 * index, 50)
context.lineTo(20 + 80 * index, 100)
context.stroke()
})
context.draw()
}
}
}
</script>
<style>
.canvas-element-wrapper {
display: block;
margin-bottom: 100rpx;
}
.canvas-element {
width: 100%;
height: 500rpx;
background-color: #ffffff;
}
.canvas-buttons {
padding: 30rpx 50rpx 10rpx;
width: 100%;
height: 360rpx;
box-sizing: border-box;
}
.canvas-button {
float: left;
display: inline-flex;
align-items: center;
justify-content: center;
height: 40px;
line-height: 1;
width: 300rpx;
margin: 15rpx 12rpx;
}
</style>
pages/component/canvas/canvas.uvue
0 → 100644
浏览文件 @
d2f0ead2
<template>
<view>
<view class="page-body">
<!-- #ifdef APP-PLUS || H5 -->
<canvas canvas-id="canvas" class="canvas" :start="startStatus" :change:start="animate.start"
:data-width="canvasWidth" :data-height="canvasWidth"></canvas>
<!-- #endif -->
<!-- #ifndef APP-PLUS || H5 -->
<canvas canvas-id="canvas" id="canvas" class="canvas"></canvas>
<!-- #endif -->
</view>
</view>
</template>
<script module="animate" lang="renderjs">
function Ball({
x,
y,
vx,
vy,
canvasWidth,
canvasHeight,
ctx
}) {
this.canvasWidth = canvasWidth
this.canvasHeight = canvasHeight
this.ctx = ctx
this.x = x
this.y = y
this.vx = vx
this.vy = vy
this.radius = 5
}
Ball.prototype.draw = function() {
this.ctx.beginPath()
this.ctx.fillStyle = '#007AFF'
this.ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI)
this.ctx.closePath()
this.ctx.fill()
}
Ball.prototype.move = function() {
this.x += this.vx
this.y += this.vy
// 回到中心
// if (getDistance(this.x - this.canvasWidth / 2, this.y - this.canvasHeight / 2) >
// getDistance(this.canvasWidth / 2, this.canvasHeight / 2) + this.radius) {
// this.x = this.canvasWidth / 2
// this.y = this.canvasHeight / 2
// }
// 边框反弹
if (this.x < this.radius) {
this.vx = Math.abs(this.vx)
return
}
if (this.x > this.canvasWidth - this.radius) {
this.vx = -Math.abs(this.vx)
}
if (this.y < this.radius) {
this.vy = Math.abs(this.vy)
return
}
if (this.y > this.canvasWidth - this.radius) {
this.vy = -Math.abs(this.vy)
}
}
function getDistance(x, y) {
return Math.pow(Math.pow(x, 2) + Math.pow(y, 2), 0.5)
}
export default {
methods: {
start(newVal, oldVal, owner, ins) {
let canvasWidth = ins.getDataset().width,
canvasHeight = ins.getDataset().height,
canvasEle = document.querySelectorAll('.canvas>canvas')[0],
ctx = canvasEle.getContext('2d'),
speed = 3,
ballList = [],
layer = 3,
ballInlayer = 20
for (let i = 0; i < layer; i++) {
let radius = getDistance(canvasWidth / 2, canvasHeight / 2) / layer * i
for (let j = 0; j < ballInlayer; j++) {
let deg = j * 2 * Math.PI / ballInlayer,
sin = Math.sin(deg),
cos = Math.cos(deg),
x = radius * cos + canvasWidth / 2,
y = radius * sin + canvasHeight / 2,
vx = speed * cos,
vy = speed * sin
ballList.push(new Ball({
x,
y,
vx,
vy,
canvasWidth,
canvasHeight,
ctx,
radius: 5
}))
}
}
function animate(ballList) {
ctx.clearRect(0, 0, canvasEle.width, canvasEle.height)
ballList.forEach(function(item) {
item.move()
item.draw()
})
requestAnimationFrame(function() {
animate(ballList)
})
}
animate(ballList)
}
}
}
</script>
<script>
// #ifndef APP-PLUS || H5
let ctx = null,
interval = null;
function Ball(x, y, vx, vy, canvasWidth, canvasHeight, ctx) {
this.canvasWidth = canvasWidth
this.canvasHeight = canvasHeight
this.ctx = ctx
this.x = x
this.y = y
this.vx = vx
this.vy = vy
this.radius = 5
}
Ball.prototype.draw = function () {
this.ctx.setFillStyle('#007AFF')
this.ctx.beginPath()
this.ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI)
this.ctx.closePath()
this.ctx.fill()
}
Ball.prototype.move = function () {
this.x += this.vx
this.y += this.vy
// 回到中心
if (getDistance(this.x - this.canvasWidth / 2, this.y - this.canvasHeight / 2) >
getDistance(this.canvasWidth / 2, this.canvasHeight / 2) + this.radius) {
this.x = this.canvasWidth / 2
this.y = this.canvasHeight / 2
}
// 边框反弹
if (this.x < this.radius) {
this.vx = Math.abs(this.vx)
return
}
if (this.x > this.canvasWidth - this.radius) {
this.vx = -Math.abs(this.vx)
}
if (this.y < this.radius) {
this.vy = Math.abs(this.vy)
return
}
if (this.y > this.canvasWidth - this.radius) {
this.vy = -Math.abs(this.vy)
}
}
function getDistance(x, y) {
return 1
}
// #endif
export default {
data() {
return {
title: 'canvas',
canvasWidth: 0,
startStatus: false,
ballList: []
}
},
onReady: function () {
this.$nextTick(() => {
uni.createSelectorQuery().select(".canvas").boundingClientRect(data => {
this.canvasWidth = data.width
// #ifdef APP-PLUS || H5
this.startStatus = true
// #endif
// #ifndef APP-PLUS || H5
ctx = uni.createCanvasContext('canvas')
this.drawBall()
// #endif
}).exec()
})
},
// #ifndef APP-PLUS || H5
onUnload: function () {
clearInterval(interval);
},
methods: {
drawBall: function () {
let canvasWidth = this.canvasWidth,
canvasHeight = this.canvasWidth,
speed = 3,
ballList = [],
layer = 3,
ballInlayer = 20
for (let i = 0; i < layer; i++) {
let radius = getDistance(canvasWidth / 2, canvasHeight / 2) / layer * i
for (let j = 0; j < ballInlayer; j++) {
let deg = j * 2 * Math.PI / ballInlayer,
sin = Math.sin(deg),
cos = Math.cos(deg),
x = radius * cos + canvasWidth / 2,
y = radius * sin + canvasHeight / 2,
vx = speed * cos,
vy = speed * sin
ballList.push(new Ball(x, y, vx, vy, canvasWidth, canvasHeight, ctx))
}
}
function animate(ballList) {
ctx.clearRect(0, 0, canvasWidth, canvasHeight)
ballList.forEach(function (item) {
item.move()
item.draw()
})
ctx.draw()
}
interval = setInterval(function () {
animate(ballList)
}, 17)
}
}
// #endif
}
</script>
<style>
.page-body-wrapper {
text-align: center;
}
.canvas {
width: 1024px;
min-height: 1024px;
background-color: #fff;
}
</style>
pages/tabBar/API.uvue
浏览文件 @
d2f0ead2
...
...
@@ -135,21 +135,23 @@
id: 'ui',
name: '界面',
pages: [
/* {
name: "创建动画",
url: "animation",
enable: false
},
// {
// name: "创建动画",
// url: "animation",
// enable: false
// },
// #ifdef WEB
{
name: "创建绘画",
url: "canvas",
enable: false
},
{
name: "节点布局交互状态",
url: "intersection-observer",
enable: false
}, */
enable: true
},
// #endif
// {
// name: "节点布局交互状态",
// url: "intersection-observer",
// enable: false
// },
{
name: 'element元素',
url: 'get-element-by-id',
...
...
pages/tabBar/component.uvue
浏览文件 @
d2f0ead2
...
...
@@ -208,6 +208,8 @@ export default {
}
] as Page[]
},
*/
// #ifdef WEB
{
id: 'canvas',
name: '画布',
...
...
@@ -217,7 +219,7 @@ export default {
}
] as Page[]
},
*/
// #endif
{
id: 'web-view',
name: '网页',
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录