Question

我有一个带有画布的html文件，并将背景设置为800x800图像。有谁知道我怎么能在图像上画线？所以即使我放大/缩小缩放是相同的（线条覆盖图像）？

这是我到目前为止的代码

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Project 1</title>
<style type="text/css" media="screen">
canvas { background:url(image.png) }
</style>
</head>
<body> 

<canvas id="canvas" width="800px" height="800px"></canvas>


</body></html>

Answer 1

你画的最后一个会出现在最上面。

对于你的图像问题，你仍然可以使用drawImage（）（在canvas api中）示例：https://developer.mozilla.org/en/Canvas_tutorial/Using_images

因此，在每个draw（）方法中，首先调用图片的绘制，然后调整线条的绘制。

Personnaly对于大项目我在每个需要绘制的对象上使用方法getzindex（）。这个方法返回一个数字，然后我对这些数字进行排序，然后按正确的顺序调用每个对象的正确绘制方法（希望这是可以理解的）

html5画布在css背景图像上绘制线条

1 个答案: