html5 canvas在css背景图像上绘制线条
我有一个 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>
I have a html file that has a canvas and sets the background to an 800x800 image. Does anyone know how i can draw lines on top of the image? so even when i zoom in/out the scaling is the same (lines overlaying the image)?
here is my code so far
<!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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
您最后绘制的内容将出现在顶部。
对于您的图像问题，您仍然可以使用drawImage()（在canvas api中）
示例如下： https://developer.mozilla.org/en/Canvas_tutorial/Using_images
所以在每个draw()方法中，您首先调用图片的绘制，然后调用线条的绘制。
就个人而言，对于大型项目，我对每个需要绘制的对象使用 getzindex() 方法。
这个方法返回一个数字，然后我对这些数字进行排序，并以正确的顺序调用每个对象的正确绘制方法（希望这是可以理解的）
What you draw the last will appear on top.
For your image problem you still can use drawImage() ( in the canvas api )
Example here : https://developer.mozilla.org/en/Canvas_tutorial/Using_images
So on each draw() method you call first the draw of your pictures then the draw of your lines.
Personnaly for big project I use a method getzindex() on every object who need to be drawn.
This method return a number, then I sort those numbers and I call the correct draw method of every object in the right order (hope it's understandable)