1. 浏览器不兼容Canvas怎么办?

当浏览器不支持某个标签时，会显示标签中的内容。

  <canvas id="myCanvas" width="500" height="500" style="width:200px; height:200px;">
    你的浏览器不支持canvas，请跟换其他浏览器试一试。
  </canvas>

2. 所有的Canvas绘图都需要以下固定步骤:

  • 在HTML里放在一张画布,因为要显示在这个画布里

    <canvas id="canvas"></canvas> /*画布*/

  • 在JavaScript文件里拿到画布,然后使用画布的一个对象context来画图

    var canvas = document.getElementById("canvas"); // 获取画布
var ctx = canvas.getContext("2d"); //获取画布的对象,这样就能使用各种各样的绘制方法了

// 这里开始使用js操作ctx对象来绘制图像

3.每次绘制新的图形时, 上一个图形会消失吗?

在同一个Canvas标签内绘制图片, 每次绘制的图形不会引起上一次绘制图形的消失.

4. 每个线条和图形绘制完都需要开始和闭合吗?

在同一个画布中, 如果要绘制多个图形是, 每次绘制都要beginPath()来开始绘制, 当完成一个图形的绘制时, 记得使用闭合closePath()来结束. 如果不使用开始和闭合方法, 在绘制新一个图形时, 会与上一个图形产生关联.

5. 为什么绘制的多个图形只显示一个?

在同一个Canvas画布中,绘制多个相同大小和位置的图形会有覆盖和重叠, 可以使用z-index调整图形堆叠的顺序, 注意每个图形的位置和坐标.

6. 设置图形的坐标值为浮点数的问题会引发性能问题.

在设置坐标值是不要使用浮点数,
ctx.drawImage(myImage, 0.3, 0.5); /*错误示例:*/
因为渲染到浏览器可能会有锯齿, 浏览器也会进行更多的运算.
因此设置坐标值一定使用整数.

7. 如果要绘制一个非常复杂的组合图像,可以绘制在多个Canvas标签里吗?

将复杂的组合图像放在多个Canvas标签里可以提升渲染速度和减低浏览器的性能损耗; 例如制作一个有固定背景,有两个不同的物体的动画; 可以将这个三个图像放在三个不同的Canvas标签里,可以理解为三个图层.

示例:

<div id="stage">
  <canvas id="cat-layer" width="480" height="320"></canvas>
  <canvas id="dog-layer" width="480" height="320"></canvas>
  <canvas id="background-layer" width="480" height="320"></canvas>
</div>

results matching ""

    No results matching ""