学习canvas遇到的一些问题一

Canvas

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

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

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

  • 直接在标签上实现

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

  • 通过js设置实现

    1
    2
    3
    4
    5
    6
    7
    8
    <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会将百分值当成数值显示

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="en">
<body>
<canvas id="canvas1" style="width: 200px;height: 200px; border:1px solid black;">
</canvas>
<script>
    var oC = document.getElementById('canvas1');
    var ctx = oC.getContext("2d");
    ctx.moveTo(0, 0);
    ctx.lineTo(200, 200);
    ctx.stroke();
</script>
</body>
</html>
>

通过代码我们知道画出的图应该是一个正方形canvas的斜对角线，但效果图确实这样的：


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="200" height="200" style="border:1px solid black;">
    Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
    var c = document.getElementById("myCanvas");
    var cxt = c.getContext("2d");
    cxt.moveTo(0, 0);
    cxt.lineTo(200, 200);
    cxt.stroke();
</script>
</body>
</html>
>

通过正确的方式设置宽高度，我们得出的效果图如下：

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

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

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

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

1
2
3
4
5
6
7
8
9
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);
};

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

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

1
2
3
4
5
6
7
8
9
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的回调里

1
2
3
4
5
6
7
8
9
10
11
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);
    }
};