# t-canvas

Canvas 画布

t-canvas 组件介绍

t-canvas 是一个统一的 Canvas 画布组件，简化了 Canvas 的初始化配置，增加了 PC 端对 touchmove 事件的支持，通过事件返回绘制对象，使 Canvas 的使用更加简单。组件的 API 使用方法与原生 Canvas 一致，适用于各种需要绘制图形、动画、图表等场景。

t-canvas 平台兼容

Harmony	H5	Android	iOS	小程序	UTS
✅	✅	✅	✅	✅	✅

t-canvas 基础用法

基础用法参考 demo/canvas/canvas.uvue，通过 initFinished 事件获取 Canvas 上下文进行绘制。

<template>
	<view class="p-15">
		<t-card title="Canvas 画布" class="mb-15"
			sub-title="统一写法 初始化更简单 增加pc端支持touchmove事件，通过事件返回绘制对象，简化了cannvas初始化配置等。Api使用方法和canvas一致"></t-card>
		<t-canvas class='tvg h-200 r-5 mb-15' @initFinished="initFun"></t-canvas>
	</view>
</template>

<script setup>
	/**
	 * 初始化完成回调
	 */
	function initFun(canvasContext : CanvasContext) {
		// 获取 2D 绘图上下文
		const ctx = canvasContext.getContext('2d')!;

		// 绘制圆角矩形
		// drawRoundedRect(ctx, 10, 10, 100, 100, 15)

		// 保存状态
		ctx.save();

		// 清除画布
		ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
		// 绘制笑脸
		ctx.beginPath();
		ctx.lineWidth = 2;
		ctx.fillStyle = '#007BFF';
		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>

t-canvas Props

属性名	说明	类型	默认值
path	点击组件后跳转的页面路径；为空时仅响应事件	string	''
hover	是否启用点击效果	boolean	false
type	组件主题类型，可选 info、primary、error、warning、success	string	''
disabled	是否禁用	boolean	false
effect	组件显示主题，可选 normal、dark、light、plain	string	''
size	组件尺寸，可选 large、medium、small、mini	string	''

t-canvas Events

事件名	说明	回调参数
click	点击时触发	UniPointerEvent
initFinished	组件初始化完成时触发，返回 Canvas 上下文	CanvasContext
touchstart	触摸开始时触发	UniTouchEvent
touchend	触摸结束时触发	UniTouchEvent
touchmove	触摸移动时触发	UniTouchEvent
touchcancel	触摸取消时触发	UniTouchEvent
transitionend	动画结束时触发	-

Methods

方法名	说明	返回值
toDataURL	将 Canvas 内容导出为图片	Promise<string>，图片地址