组件中的画布渲染在Svelte上不起作用
组件中的画布渲染在Svelte上不起作用
提问于 2021-11-05 23:43:57
我正在尝试渲染画布，并使用svelte.js在画布上绘制矩形，但如果我在组件端编写渲染代码，它将不起作用。
Here是再现REPL。
如果我将Canvas.svelte中的整个代码移到app.svelte中，它就会起作用。
App.svelte：
<script>
import Canvas from './Canvas.svelte';
</script>
<Canvas/>Canvas.svelte：
<script>
import { onMount } from 'svelte';
let canvasEl;
const canvas = {
width: 1000,
height: 1000
};
const drawRect = (context) => {
context.beginPath();
context.fillStyle = '#000000';
context.rect(0, 0, 40, 10);
context.fill();
};
onMount(() => {
console.log('Onmount');
const context = canvasEl.getContext('2d');
canvas.width = document.body.clientWidth;
canvas.height = document.body.clientHeight;
drawRect(context);
});
</script>
<canvas bind:this={canvasEl} width={canvas.width} height={canvas.height} />有人知道解决方案吗？
谢谢,
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-11-10 02:13:51
未找到错误原因，但已找到原因：
onMount(() => {
//...
// this 2 lines cause silent error
canvas.width = document.body.clientWidth;
canvas.height = document.body.clientHeight;
//...
});移除它们，您将看到画布和矩形
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69860352
复制相关文章
相似问题
腾讯云开发者
