canvas.width 与 canvas.style.width的区别

展示图片到canvas上

模糊与不模糊
展示全部图片与部分图片到canvas上

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
  <script src="../js/vue.js"></script>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    #canvas {
      border: 1px solid #ccc;
      width: 600px;
      height: 400px;
      box-sizing: border-box;
    }
  </style>
</head>

<body>
  <div id="app">
    <div>
      <p>imgWidth:{{imgWidth}}</p>
      <p>imgHeight:{{imgHeight}}</p>
      <p>canvasWidth:{{canvasWidth}}</p>
      <p>canvasHeight:{{canvasHeight}}</p>
    </div>
    <div>
      <canvas ref='canvas' :width='canvasWidth' :height='canvasHeight' class='canvas'></canvas>
      <img :src="imgSrc" alt="">
    </div>
  </div>

  <script>
    new Vue({
      el: '#app',
      data() {
        return {
          canvas: null,
          context: null,
          canvasWidth: 150,
          canvasHeight: 100,
          img:null,
          imgWidth: 0,
          imgHeight: 0,
          imgSrc: '../img/2.jpg' //600*400
        }
      },
      mounted() {
        this.initCanvas()
        this.init()
      },
      methods: {
        initCanvas() {
          this.canvas = this.$refs.canvas
          this.context = this.canvas.getContext('2d')
        },
        init() {
          const that = this;
          this.img = new Image()
          this.img.src = this.imgSrc
          this.img.onload = () => {
            that.imgWidth = that.img.width
            that.imgHeight = that.img.height

            //1.这种设置无效
            // that.canvasWidth = 600
            // that.canvasHeight = 400

            // 2.这种设置有效
            // 2.1 canvas.width和height比图片的width和height小，会模糊
            // that.canvas.width = 300
            // that.canvas.height = 150
            // 2.2 canvas.width和height比图片的width和height一样大，不会模糊
            that.canvas.width = that.imgWidth
            that.canvas.height = that.imgHeight

            // 1.
            that.context.drawImage(that.img, 0, 0) //三个参数，就代表使用canvas的width和height,铺满canvas
            // 2.
            // that.context.drawImage(img, 0, 0,that.canvasWidth,that.canvasHeight)
            // 3.
            // that.context.drawImage(img, 0, 0,that.canvas.width,that.canvas.height)
            // 4.
            // that.context.drawImage(img, 0, 0, that.imgWidth, that.imgHeight) 
          }
        },
      }
    }
    )
  </script>
</body>

</html>

图片在canvas上缩放

 <input @input='onInputRange' type="range" id="scale-range" min="0.1" max="3.0" step="0.01" :value="scale" />

        onInputRange(e) {
          this.scale = e.target.value;
          this.drawImgByScale(this.scale)
        },
        drawImgByScale(scale) {
          const x = (this.canvas.width - this.imgWidth * this.scale) / 2
          const y = (this.canvas.height - this.imgHeight * this.scale) / 2
          this.context.clearRect(0, 0, this.canvas.width, this.canvas.height)
          //1.以canvas的左上角(0,0)进行缩放
          // this.context.drawImage(this.img, 0, 0, this.imgWidth * this.scale, this.imgHeight * this.scale)
          // 2.以canvas的中心进行缩放
          this.context.drawImage(this.img, x, y, this.imgWidth * this.scale, this.imgHeight * this.scale)
        }

移动图片

        initCanvasMoveEvent() {
          const that = this;
          that.canvas.onmousedown = function (e) {
            let _imgX = that.imgX //记录点击时的x
            let _imgY = that.imgY 
            let mouseStartX = e.clientX;
            let mouseStartY = e.clientY;
            that.canvas.onmousemove = function (e) {
              let mouseEndX = e.clientX;
              let mouseEndY = e.clientY;
              that.moveLeft = mouseEndX - mouseStartX;
              that.moveTop = mouseEndY - mouseStartY;

              //正确写法
              that.imgX = that.moveLeft + _imgX;
              that.imgY = that.moveTop + _imgY;
              //错误写法： 
              // that.imgX = that.moveLeft  + that.imgX
              // that.imgY = that.moveTop + that.imgY;

              that.context.clearRect(0, 0, that.canvas.width, that.canvas.height)
              that.context.drawImage(that.img, that.imgX, that.imgY, that.imgWidth * that.scale, that.imgHeight * that.scale)
            }
            that.canvas.onmouseup = function () {
              that.canvas.onmousemove = null;
              that.canvas.onmouseup = null;
              that.canvas.style.cursor = 'default';
            }
          }
        }

canvas 操作图片

canvas.width 与 canvas.style.width的区别

展示图片到canvas上

图片在canvas上缩放

移动图片