所以我试图在HTML5中制作一个很好的交互式地图,用于HTML5文档(跟踪电话分机,端口号等),因为我们的很多办公室和小隔间是相同的,我想我应该只有一个对于每种类型的办公室,然后只为它匹配的所有办公室复制它.我唯一的问题是,我无法正确旋转画布.我已经按照所有教程,但由于某种原因,我的图像不断被切断.我似乎无法找到问题的根源.
有任何想法吗？
到目前为止,这是我的代码:
<!DOCTYPE HTML>
<head>
<title>Test Interactive Office Schematic</title>
<style>
html, body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<script>
function addOffice(type, id, occupentName) {
var canvas = document.createElement('canvas');
canvas.id = id;
canvas.style.position = "absolute";
canvas.style.left = "20px";
canvas.style.class = "office";
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(0, 0);
if (type == 1) {
canvas.width = 80;
canvas.height = 80;
context.lineTo(2, 0);
context.lineTo(2, 20);
context.quadraticCurveTo(22, 20, 22, 0);
context.lineTo(60, 0);
context.lineTo(60, 80);
context.lineTo(0, 80);
context.lineTo(0, 0);
} …