uniapp 调用canvas画图代码

以下是一个简单的 uniapp 调用 canvas 画图的代码示例：

<template>
  <canvas canvas-id="myCanvas" style="width: 300px; height: 300px;"></canvas>
</template>

<script>
export default {
  onReady() {
    const ctx = uni.createCanvasContext('myCanvas', this);
    ctx.beginPath();
    ctx.arc(150, 150, 100, 0, 2 * Math.PI);
    ctx.fillStyle = 'red';
    ctx.fill();
    ctx.draw();
  },
};
</script>

在这个示例中，我们在页面的模板中定义了一个 canvas 元素，并指定了它的宽度和高度。然后在页面的 `onReady` 生命周期钩子中，我们使用 `uni.createCanvasContext` 方法创建了一个 canvas 绘图上下文对象，并指定了要绘制的 canvas 的 id 和当前页面实例。然后我们使用 `ctx.beginPath` 方法开始绘制一个圆形，并使用 `ctx.arc` 方法指定圆形的圆心和半径。我们还使用 `ctx.fillStyle` 属性指定了圆形的填充颜色，并使用 `ctx.fill` 方法进行填充。最后我们使用 `ctx.draw` 方法将绘制结果显示在页面上。

相关问题

uniapp使用canvas画图保存

### 回答1：
通过uniapp使用canvas画图后，可以通过canvas的toDataURL方法将画图结果保存下来。这个方法返回的是一个base64格式的字符串，可以通过将该字符串传输到服务器或者本地存储来保留保存画图结果。

### 回答2：
Uniapp 是一款跨平台的开发框架，使用 Vue.js 语法编写，使得开发者能够在一个代码库中同时构建iOS、Android、H5、小程序等多个平台的应用。Uniapp 中使用 Canvas 画图保存的过程大概分为以下几步：

1. 在页面上引入 Canvas 组件：

在 HTML 中引入 Canvas 组件，可以使用 <canvas> 标签，设置该组件的宽高、背景色等属性。

2. 创建画布：

在 js 文件中通过 uni.createCanvasContext() 方法创建画布。该方法可以设置画布的宽高以及 getContext() 方法的一个参数 type，可以指定是 2D 还是 3D 画布，这里我们需要用到 2D 的画布。

3. 绘图：

可以使用画布的 Arc、Rect、Image 等方法绘制需求的图形。由于此处要实现保存图片的功能，我们需要将要保存的内容绘制在画布上。

4. 保存图片：

在需要保存作品的时候，可以通过 canvas.toTempFilePath() 方法将画布内容转换为图片，返回临时文件路径。此处需要用到云开发的微信小程序云端能力，将图片下载至临时文件夹内。最后通过 uni.saveImageToPhotosAlbum() 方法将图片保存到手机相册内。

总体而言，Uniapp 通过几个基本的方法，就可以轻松实现 Canvas 画图保存的功能。开发人员可以根据需求进行个性化的开发和扩展。

### 回答3：
Uniapp 是一款基于 Vue.js 开发的开源框架，是一个跨平台的移动应用开发框架。它集合了微信小程序、H5、iOS、安卓等多个平台的特点，具有跨平台、高效、快速开发等优点。在 Uniapp 中可以通过 canvas 组件实现画图功能，并支持将画图内容保存为图片。

使用 canvas 组件绘制图形主要分为三个步骤：

1. 首先在.uni文件中引入 canvas 组件，并在页面内添加相应的 html 代码，例如：

<canvas style="width: 100%; height: 100%;"></canvas>

2. 接着在 js 文件中获取到 canvas 对象，可以通过 getContext 方法获取上下文对象并开始绘制图形：

export default {
mounted() {
const ctx = uni.createCanvasContext('canvas-id', this)
// 开始绘制图形
ctx.setStrokeStyle('red')
ctx.setLineWidth(10)
ctx.moveTo(10, 10)
ctx.lineTo(100, 100)
ctx.stroke()
}
}

3. 最后通过 toTempFilePath 方法将 canvas 中的图形保存为图片：

uni.canvasToTempFilePath({
canvasId: 'canvas-id',
success: function(res) {
console.log(res.tempFilePath)
}
})

以上就是使用 Uniapp 中 canvas 组件进行画图和保存的流程。需要注意的是，在画图时需要根据业务需求实现相应的算法和绘制逻辑，并为 canvas 组件设置具体的大小和样式，以保证绘制效果和保存的图片效果更佳。此外，为了避免前端数据在传输过程中泄漏，建议保存敏感图片时使用服务端进行存储。

uniapp使用canvas实现下雨动画代码

<template>
<canvas canvas-id="rainCanvas" :style="{width: canvasWidth + 'px', height: canvasHeight + 'px'}"></canvas>
</template>

<script>
export default {
data() {
return {
canvasWidth: 0,
canvasHeight: 0,
rainDrops: []
}
},
mounted() {
this.initCanvas()
this.startRain()
},
methods: {
initCanvas() {
const query = uni.createSelectorQuery()
query.select('#rainCanvas').boundingClientRect(res => {
this.canvasWidth = res.width
this.canvasHeight = res.height
}).exec()
},
startRain() {
const ctx = uni.createCanvasContext('rainCanvas')
setInterval(() => {
ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
this.rainDrops.forEach(drop => {
drop.y += drop.speed
if (drop.y > this.canvasHeight) {
drop.y = 0 - drop.length
}
ctx.beginPath()
ctx.moveTo(drop.x, drop.y)
ctx.lineTo(drop.x + drop.width, drop.y)
ctx.strokeStyle = drop.color
ctx.stroke()
})
}, 30)
setInterval(() => {
const drop = {
x: Math.random() * this.canvasWidth,
y: Math.random() * this.canvasHeight,
width: Math.random() * 3 + 1,
length: Math.random() * 10 + 10,
speed: Math.random() * 5 + 3,
color: '#FFFFFF'
}
this.rainDrops.push(drop)
}, 100)
}
}
}
</script>