Question

我是html / css / js的新手，我正在尝试学习画布。我想制作一个窗口大小的画布，无论窗口的大小如何，然后我想在该窗口中绘制一个额外的矩形，开始绘制迷宫游戏。我通过窗口调整画布大小，但只能通过设置主体的溢出：隐藏（当我没有设置时，高度总是太大）。我想知道这是否是现在导致问题的原因。当我尝试在主画布矩形内创建一个较小的矩形时，我将矩形宽度设置为窗口大小的一半，但它远离屏幕。我究竟做错了什么？我只是希望矩形明显位于主画布的周边，这样我才能看到所有边缘。

JS：

$(document).ready(function() {

var ctx;
var ww;
var wh;

drawcanvas();

$(window).resize(function() {
ctx.clearRect(0, 0, ww, wh);  //won't this clear only the bottom     rectangle?
drawcanvas();
});



function drawcanvas() {
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ww = window.innerWidth;
wh = window.innerHeight;

ctx.canvaswidth = ww;
ctx.canvas.height = wh;
ctx.fillStyle ="blue";
ctx.fillRect(0, 0, ww, wh);

ctx.strokeStyle = 'orange';
ctx.strokeRect(10, 20, ww/2, wh/2);

}



});

HTML：

<html>
<head>
<link href="maze2.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" type="text/css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js" type="text/javascript" ></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js" type="text/javascript"></script>


<script src="maze2.js" type="text/javascript"></script>
<title>Maze</title>
</head>




<body>


<canvas id="canvas">Your browser does not support Canvas.</canvas>



</body>
</html>

CSS：

body {
width: 100%;
height: 100%;
margin:0px;
overflow:hidden;
}

#canvas {
width:100%;
height:100%;
margin:0px;
}

Answer 1

如果您已正确设置css以使画布占据整个物理屏幕（内部屏幕），则以下内容将起作用。

基本上不使用窗口宽度和高度，使用css正确调整画布大小并使用画布clientWidth和height

<Style TargetType="controls:HyperlinkClear">
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="controls:HyperlinkClear">
                    <Border  BorderThickness="0" Margin="2" BorderBrush="Transparent">
                        <Border.Resources>
                            <Style x:Name="buttonStyle"
                                   TargetType="Button">
                                <Setter Property="Template">
                                    <Setter.Value>
                                        <ControlTemplate TargetType="Button">
                                            <Grid Width="12"
                                                  Height="12">
                                                <TextBlock  Margin="{TemplateBinding Margin}" Text="x"></TextBlock>
                                            </Grid>
                                        </ControlTemplate>
                                    </Setter.Value>
                                </Setter>
                            </Style>
                        </Border.Resources>
                        <controlsToolkit:DockPanel Background="Transparent">
                            <Button Margin="-2,0,0,0" controlsToolkit:DockPanel.Dock="Right" HorizontalAlignment="Right" x:Name="MainSearchButton" Style="{StaticResource ButtonStyle}"  IsTabStop="False"
                                    Visibility ="{Binding IsRemoveButtonEnabled,Converter={StaticResource BoolToVisibilityConverter},Mode=TwoWay}">
                                <Image Source="./open.png"  Height="14" Width="16" VerticalAlignment="Center"/>
                            </Button>
                            <Button controlsToolkit:DockPanel.Dock="Right" Cursor="hand" 
                                    Margin="3,-2,0,0" Visibility ="{Binding IsRemoveButtonEnabled,Converter={StaticResource BoolToVisibilityConverter},Mode=TwoWay}"
                                    x:Name="RemoveItemButton" HorizontalAlignment="Right"
                                    Style="{StaticResource buttonStyle}" IsTabStop="false"/>

                            <HyperlinkButton x:Name="HyperlinkButton"  Style="{StaticResource HyperlinkButtonStyle}" Content="{TemplateBinding Content}" />
                        </controlsToolkit:DockPanel>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

P.S。下次更好地格式化代码

无法参考画布中的窗口宽度/高度

1 个答案: