学习Canvas基础-绘制图像

drawImage 方法有三种形态：

drawImage(image, dx, dy) 在画布指定位置绘制原图
drawImage(image, dx, dy, dw, dh) 在画布指定位置上按原图大小绘制指定大小的图
drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh) 剪切图像，并在画布上定位被剪切的部分

参数 描述
image 规定要使用的图像、画布或视频
sx 可选。开始剪切图片的 x 坐标位置
sy 可选。开始剪切图片的 y 坐标位置
sw 可选。被剪切图像的宽度（就是裁剪之前的图片宽度，这里的宽度若小于图片的原宽。则图片多余部分被剪掉；若大于，则会以空白填充）
sh 可选。被剪切图像的高度（就是裁剪之前的图片高度）
dx 在画布上放置图像的 x 坐标位置
dy 在画布上放置图像的 y 坐标位置
dw 可选。要使用的图像的宽度（就是裁剪之后的图片高度，放大或者缩放）
dh 可选。要使用的图像的高度（就是裁剪之后的图片高度，放大或者缩放）

绘制图片事例

drawImage(image, dx, dy) 在画布指定位置绘制原图。

<!-- 兼容性写法，在低版本时标签内部的文字才会显示 -->
  <canvas id="cont" width="800px" height="500px">你的浏览器版本过低,请升级浏览器或者使用chrome打开!</canvas>
  <script>
    //  获取canvas画布
    const canvas=document.querySelector('#cont')
    // 获取画布的应用上下文
    const ctx =canvas.getContext('2d')
    let img=new Image()
    img.src='https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic_source%2Ffa%2F50%2Ffc%2Ffa50fc56c9fd7e3531b8327f6b1631ca.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1671695645&t=6464491bd7413d3279fadc967ed7f955'
    img.onload=function (){
      // drawImage(第一个参数是你要绘制的图像，二三个参数是你绘制的起点位置)
    ctx.drawImage(img,0,0)
    }
  </script>

注意：这是超大格式图片，在此种状态下只会显示图片最左上角位置

drawImage(image, dx, dy, dw, dh) 在画布指定位置上按原图大小绘制指定大小的缩放图。

<!-- 兼容性写法，在低版本时标签内部的文字才会显示 -->
  <canvas id="cont" width="800px" height="500px">你的浏览器版本过低,请升级浏览器或者使用chrome打开!</canvas>
  <script>
    //  获取canvas画布
    const canvas=document.querySelector('#cont')
    // 获取画布的应用上下文
    const ctx =canvas.getContext('2d')
    let img=new Image()
    img.src='https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic_source%2Ffa%2F50%2Ffc%2Ffa50fc56c9fd7e3531b8327f6b1631ca.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1671695645&t=6464491bd7413d3279fadc967ed7f955'
    img.onload=function (){
      // drawImage(第一个参数是你要绘制的图像，二三个参数是你绘制的起点位置,四五个参数是你要缩放对应宽高)
		ctx.drawImage(img,100,100,400,300)
    }
  </script>

drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh) 剪切图像，并在画布上按照指定位置绘制被剪切部分的缩放图。

<!-- 兼容性写法，在低版本时标签内部的文字才会显示 -->
  <canvas id="cont" width="800px" height="500px">你的浏览器版本过低,请升级浏览器或者使用chrome打开!</canvas>
  <script>
    //  获取canvas画布
    const canvas=document.querySelector('#cont')
    // 获取画布的应用上下文
    const ctx =canvas.getContext('2d')
    let img=new Image()
    img.src='https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic_source%2Ffa%2F50%2Ffc%2Ffa50fc56c9fd7e3531b8327f6b1631ca.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1671695645&t=6464491bd7413d3279fadc967ed7f955'
    img.onload=function (){
    
      // 裁剪原有图片一部分进行绘制，对应对增加裁剪的起点和对角位置
      // drawImage(第一个参数是你要绘制的图像，二三个参数是裁剪的起点,四五参数是裁剪位置起点的对对角点，六七位置是绘制的起点，八九是要放大缩小的宽高)
       ctx.drawImage(img,640,0,1280,720,50,50,500,400)
    }
  </script>

绘制视频事例

绘制视频，并添加爱心水印效果。

 <!-- 兼容性写法，在低版本时标签内部的文字才会显示 -->
  <canvas id="cont" width="800px" height="500px">你的浏览器版本过低,请升级浏览器或者使用chrome打开!</canvas>
  <video src="./images/3theB.mp4" controls width="200"></video>
  <button id="btn">播放/暂停</button>
  <script>
    //  获取canvas画布
    const canvas = document.querySelector('#cont')
    // 获取画布的应用上下文
    const ctx = canvas.getContext('2d')
    let video = document.querySelector('video')
    let btn = document.querySelector('#btn')
    btn.onclick = function () {
      if (video.paused) {
        video.play()
        render()
      } else {
        video.pause()
      }
    }

    function render() {
      ctx.drawImage(video, 0, 0, 800, 500)
      ctx.moveTo(700,380)
      ctx.bezierCurveTo(750, 330, 800, 380, 700, 480)
      ctx.bezierCurveTo(600, 380, 650, 330, 700, 380)

      ctx.fillStyle = 'rgba(255,102,100,0.5)'
      ctx.fill()
      requestAnimationFrame(render)
    }
  </script>