canvas使用图片作为背景图片

最新推荐文章于 2025-03-21 17:45:55 发布

心情无变化

最新推荐文章于 2025-03-21 17:45:55 发布

阅读量2.5k

点赞数 9

分类专栏： canvas 文章标签：前端 javascript canva可画

本文链接：https://blog.csdn.net/qq_45290368/article/details/134829145

版权

canvas 专栏收录该内容

11 篇文章

订阅专栏

/**
   * canvas绘制背景图片
   * @param {*} canvasCtx 画笔
* @param {*} src图片的路径
   * @param {*} width 图片的宽度
   * @param {*} height 图片的高度
   * @returns 
   */
  drawbackgroundImage = (canvasCtx, src, width, height) => {
      console.log('画背景');
      const backgroundImage = new Image() // 创建Image对象
      backgroundImage.src = src//设置图片路径
      backgroundImage.onload = function(){
        console.log('图片加载完成');
        canvasCtx.drawImage(backgroundImage, 0, 0, width, height)  //绘制背景图片
      }
  }
  //创建canvas标签
  const canvas = document.createElement('canvas')
  canvas.width = 400 //设置画布宽
  canvas.height = 400 //设置画布高
  canvas.className = 'main_canvas' //给画布添加样式类
  document.body.appendChild(canvas) //添加到页面
  const ctx = canvas.getContext('2d') //得到画笔
  
  const backgroundImage = new Image() // 创建Image对象
  backgroundImage.src = 'https://ts1.cn.mm.bing.net/th/id/R-C.66d7b796377883a92aad65b283ef1f84?rik=sQ%2fKoYAcr%2bOwsw&riu=http%3a%2f%2fwww.quazero.com%2fuploads%2fallimg%2f140305%2f1-140305131415.jpg&ehk=Hxl%2fQ9pbEiuuybrGWTEPJOhvrFK9C3vyCcWicooXfNE%3d&risl=&pid=ImgRaw&r=0' //设置图片路径
  backgroundImage.onload = function(){
    console.log('图片加载完成');
    ctx.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height)  //绘制背景图片
  }

效果图