Canvas 画布组件

用于绘制和操作图形的画布组件，统一写法，适配PC端鼠标事件

支持平台

安卓	ios	web	微信小程序	支付宝小程序	QQ小程序
√	√	√	x	x	x

示例

<template>
	<t-page title="画布" class="p.30">
		<t-card title="Canvas 画布" class="mb.30" sub-title="统一写法"></t-card>
		<t-canvas class='tdb-h.400-tdr-mb.30' @initFinished="initFun"></t-canvas>
	</t-page>
</template>

<script setup>
	import { TuiTouchEvent } from '@/uni_modules/t-ui/';
	function drawRoundedRect(ctx : CanvasRenderingContext2D, x : number, y : number, width : number, height : number, radius : number) {
		ctx.fillStyle = '#007BFF';
		// ctx.beginPath();
		ctx.moveTo(x, y + radius);
		ctx.arcTo(x, y + height, x + radius, y + height, radius);
		ctx.arcTo(x + width, y + height, x + width, y + height - radius, radius);
		ctx.arcTo(x + width, y, x + width - radius, y, radius);
		ctx.arcTo(x, y, x, y + radius, radius);
		// ctx.closePath();
		ctx.fill();
		ctx.stroke()
		
	}
	function initFun(ctx : CanvasContext) {
		drawRoundedRect(ctx.getContext('2d')!, 10, 10, 50, 30, 15)
		// ctx.save()
		// ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height)
		// ctx.beginPath()
		// ctx.lineWidth = 2
		// ctx.arc(75, 75, 50, 0, Math.PI * 2, true)
		// ctx.moveTo(110, 75)
		// ctx.arc(75, 75, 35, 0, Math.PI, false)
		// ctx.moveTo(65, 65)
		// ctx.arc(60, 65, 5, 0, Math.PI * 2, true)
		// ctx.moveTo(95, 65)
		// ctx.arc(90, 65, 5, 0, Math.PI * 2, true)
		// ctx.stroke()
		// ctx.restore()
	}
</script>

Props

名称	描述	类型	默认值	可选值
-	-	-	-	-

Events

事件名	描述	回调参数	版本
initFinished	画布初始化完成后触发	CanvasContext	-

Methods

名称	描述	返回类型
toDataURL	转换画布内容为DataURL	Promise:String

Slots

名称	描述
-	-