cari

Rumah  >  Soal Jawab  >  teks badan

lukisan javascript-canvas

Tulis fungsi, mula-mula panggil drawImage of canvas untuk melukis sebahagian daripada gambar setempat (berjaya), kemudian panggil keDataURL untuk menukar gambar yang dilukis pada kanvas kepada atribut src objek imej, dan kemudian Mengapa saya tidak boleh menggunakan yang sama kaedah untuk melukis gambar ini di atas kanvas dengan jayanya?

function paint(img) {
        var canvas = document.createElement('canvas')
        canvas.width = 400
        canvas.height = 400
        var ctx = canvas.getContext('2d')
        ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, 400, 400)
        document.body.appendChild(canvas)//画好的第一个canvas对象可以正常显示
        var newImg = new Image()
        newImg.src = canvas.toDataURL()
        newImg.onload = function() {
          var canvas2 = document.createElement('canvas')
          canvas2.width = 200
          canvas2.height = 200
          var ctx2 = canvas2.getContext('2d')
          ctx2.drawImage(newImg, 0, 0, Math.abs(posX), Math.abs(posY), 0, 0, 200, 200)//这里之所以把第一次的canvas作图加载成一张图片,是因为不知道canvas可不可以绘制canvas
          document.body.appendChild(newImg)//这张图片能正常显示
          document.body.appendChild(canvas2)//canvas元素加上了,但是绘图不成功
        }
      }
PHP中文网PHP中文网2701 hari yang lalu745

membalas semua(1)saya akan balas

  • 仅有的幸福

    仅有的幸福2017-07-05 10:48:27

    Adakah anda menggunakan atribut 外站图片? 如果是,需要给图片加上 crossOrigin="Anonymous"?

    • cara html

    <img src="..." crossOrigin="Anonymous" />
    • js way

    var image = new Image();
    image.src = "...";
    image.crossOrigin = "Anonymous";

    Anda boleh bermain dengan versi runnable yang saya ubah suai dengan kod anda dalam talian: https://jsfiddle.net/5g9n9esk/

    balas
    0
  • Batalbalas