D J Y 2023-02-20 15:15 采纳率: 0%
浏览 28
已结题

使用canvas绘制图片失效

在vue2页面中,使用canvas绘制图片失效
#代码


```html
    <canvas  id="myCanvas"/>


 const canvas = document.getElementById('myCanvas')
    const ctx = canvas.getContext('2d')
    canvas.width = 1000
    canvas.height = 100
    const img = new Image()
    img.src = require('../../assets/images/Ali.png')
    img.onload = () => {
      ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
    }

```

  • 写回答

2条回答 默认 最新

  • 崽崽的谷雨 2023-02-20 16:55
    关注

    看看控制台 有保存吗? 图片路径对了吗?找个网络图片试试 ?
    还有就是 执行时机 ,要在 canvas 元素 渲染完之后执行 。比如 mounted里画

    评论 编辑记录

报告相同问题?

问题事件

  • 已结题 (查看结题原因) 4月13日
  • 创建了问题 2月20日