Canvas 宽度、高度设置

在HTML5中插入一个Canvas元素，如下：

<canvas id="mycanvas"></canvas>

要想在该画板上进行操作，则需要先取得其执行上下文context，

1 var canvas = document.getElementById("mycanvas");
2 var context = canvas.getContext("2d");

取得目标画板 canvas 的执行上下文 context 之后，通过画图 API 进行画图操作。假设这里想要在canvas 上画出三个由不同颜色填充的矩形，实现如下：

1 context.fillRect(5, 5, 145, 145);
2 context.fillStyle = "rgb(0, 162, 232)"; //指定填充色 
3 context.fillRect(40, 55, 145, 145);
4 context.fillStyle = "rgba(255, 0, 0, 0.2)";
5 context.fillRect(75, 105, 145, 145);

该段代码的目标实现效果为：

但，理想是丰满的，现实却很骨感。实现显示效果为：

为什么会这样呢？肯定是由哪里不对！事实上问题也不难，就是 Canvas 元素的默认宽度为 300px ，默认高度为 150px 。在上面的图形中，其高度超出了其默认高度值，而又没有给canvas 设置新的高度，所以超出的部分就没有显示出来。为了正常显示目标效果图像，则需要重新设置其宽度和高度值。在这里可以通过三种方法去设置Canvas 的width, height 属性值。

  1. 直接在 <canvas> 元素中设置，如下： 
    <canvas width="300" height="300"></canvas>

    注意，这里不是使用 style="width:300px; height:300px“ 去设置。

  2. 使用 canvas 的属性值设置，如下： 
    1 canvas.width = 300;
2 canvas.height = 300;

    注意，这里设置值时不需要带单位。

  3. 使用 setAttribute() 方法设置，如下： 
    1 canvas.setAttribute("width", 300);
2 canvas.setAttribute("height", 300);

     

　　另外，可以通过两个常量值去设置其宽度和高度，使其等于屏幕的宽度和高度，分别为 screen.availWidth 和 screen.avail.Height 。

 

　　学习资料：Developers-Guide-to-HTML5-Canvas

posted @ 2015-12-22 22:07  jioong  阅读(3115)  评论(0)  编辑  收藏  举报