学习canvas遇到的一些问题

最近在写一个canvas编辑图片的demo时遇到了两个canvas的奇怪问题，这里记载一下。

---

#####问题一：canvas的宽高度设置问题

有两种可以正确的实现的方式

• 直接在标签上实现

  <canvas width="200" height="200"></canvas>
  

• 通过js设置实现

  <canvas id="canvas"></canvas>
  
  <script>
      canvas = document.getElementById("canvas");
      context = canvas.getContext("2d");
      canvas.width = 200;
      canvas.height = 200;
  </script>
  

通过css实现的都是错误的实现方式，都会使canvas被拉伸，使得canvas画图不准

• 通过嵌入式，内联式或者外联式写入的css样式都会导致canvas被拉伸
• 通过js的操作dom改变css同样会拉伸canvas
• 通过jquery也是同样的问题

【注】：canvas的width和height也不能用百分比表示。canvas会将百分值当成数值显示

这里借用别人的一个例子来说明这个问题：

>``` >通过代码我们知道画出的图应该是一个正方形canvas的斜对角线，但效果图确实这样的： > > >```html Your browser does not support the canvas element. >``` >通过正确的方式设置宽高度，我们得出的效果图如下： >

#####问题二：canvas的drawImage问题

我们对于canvas的drawImage可以有两种实现方式：

• 我们可以通过在页面上写一个img的标签，然后获取到该标签作为参数传值给drawImage()
• 我们也可以通过new Image()创建一个img传值给drawImage()

我们的问题就出现在imageObj.src = imageSrc上，

window.onload = function() {
    canvas = document.getElementById("drawingCanvas");
    context = canvas.getContext("2d");
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    imageObj = new Image();
	imageObj.src = imageSrc;  //imageSrc为图片的路径
    context.drawImage(imageObj, 0, 0, 200, 200);
};

这样我们在浏览器居然没有看见图片，没有画成功，可是代码是没有问题的，

但是如果我们这样写就没有问题了

imageObj = new Image();
imageObj.src = imageSrc;  //imageSrc为图片的路径
window.onload = function() {
    canvas = document.getElementById("drawingCanvas");
    context = canvas.getContext("2d");
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    context.drawImage(imageObj, 0, 0, 200, 200);
};

网上查了image加载是异步的，也就是说imageObj.src = imageSrc;在渲染图片时异步了，所以我们要将drawImage写在image的回调里

window.onload = function() {
    canvas = document.getElementById("drawingCanvas");
    context = canvas.getContext("2d");
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    imageObj = new Image();
    imageObj.src = imageSrc;  //imageSrc为图片的路径
    imageObj.onload = function () {
    	context.drawImage(imageObj, 0, 0, 200, 200);
    }
};