Javascript 根据屏幕分辨率自动调整Html5画布的大小_Javascript_Css_Html_Canvas

Javascript 根据屏幕分辨率自动调整Html5画布的大小

javascript css html canvas

Javascript 根据屏幕分辨率自动调整Html5画布的大小,javascript,css,html,canvas,Javascript,Css,Html,Canvas,我创建了一个HTML5画布游戏，其中包括从两个画布中拖动和选择对象（单词）。屏幕上还有两个按钮。但不幸的是，我的程序在选择单词方面是硬编码的，因为我已经输入了在画布上绘制单词的坐标。我的屏幕分辨率是1366 x768。现在，每当分辨率改变时，按钮都会移动到其他地方，鼠标不会选择拖动的单词，而是选择上面的其他单词。我现在有大麻烦了，请帮帮我 <html> <head> <title>Word Search</title> <me

我创建了一个HTML5画布游戏，其中包括从两个画布中拖动和选择对象（单词）。屏幕上还有两个按钮。但不幸的是，我的程序在选择单词方面是硬编码的，因为我已经输入了在画布上绘制单词的坐标。我的屏幕分辨率是1366 x768。现在，每当分辨率改变时，按钮都会移动到其他地方，鼠标不会选择拖动的单词，而是选择上面的其他单词。我现在有大麻烦了，请帮帮我

<html>
<head>
    <title>Word Search</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type = text/css href="style.css">
    <script type="text/javascript" src="keywords.js"></script>
    <script type="text/javascript" src="game.js"></script>
    <script type="text/javascript" src="highlight.js"></script>
    <script type="text/javascript" src="grid.js"></script>
    <script src="http://code.createjs.com/easeljs-0.7.0.min.js"></script>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>

</head>
<body>
    <h1 id="heading">Find Keywords</h1>
    <h3 id="results">Drag through the lettered Squares..!</h3>
    <canvas id ='canvas1' height = 450 width="450" style= "border :1px solid black"> </canvas>
    <canvas id ='canvas2' height = 450 width="250" style= "border :1px solid black"></canvas>
    <input type='button' value="HIGHLIGHT ALL" id="button1" onclick="highlight();" />
    <input type='button' value="NEXT" id="button2" onclick="next();"/>


        <script> 
        var words =[];
        window.onload = function(){ 
                            begin();
                                  };

        function begin()
        {
            wordSearchPuzzle();
        }

        function wordSearchPuzzle()
        { 
        words.length=0;              
        words = getwords(8);
        var puz =wordfind(words);
        game(words,puz);   
        }

        function next()
         {

        var canvas = document.getElementById("canvas1");
        var ctx1 = canvas.getContext("2d");
        var canvas2 = document.getElementById("canvas2");
        var ctx2 = canvas2.getContext("2d");
        ctx1.clearRect(0, 0, canvas.width, canvas.height);
        ctx2.clearRect(0, 0, canvas2.width, canvas2.height);
        wordSearchPuzzle();

        }


        </script>

</body>
</html>


单词搜索
查找关键字
拖动字母方块。。！
var-words=[]；
window.onload=函数（）{
begin（）；
};
函数begin（）
{
wordSearchPuzzle（）；
}
函数wordSearchPuzzle（）
{ 
字数。长度=0；
words=getwords（8）；
var puz=单词查找（单词）；
游戏（单词，puz）；
}
函数next（）
{
var canvas=document.getElementById（“canvas1”）；
var ctx1=canvas.getContext（“2d”）；
var canvas2=document.getElementById（“canvas2”）；
var ctx2=canvas2.getContext（“2d”）；
ctx1.clearRect（0，0，canvas.width，canvas.height）；
ctx2.clearRect（0,0，canvas2.width，canvas2.height）；
wordSearchPuzzle（）；
}

这是可能的，我在过去使用了一个画布，该画布将根据屏幕大小动态调整大小

如果我没记错的话，我是这样做的

我将画布放在一个div中，并给div一个动态宽度，类似于style=“width:30%”

我将画布放在这个div中，并绑定了css，使画布具有style=“width:100%”

然后，您需要重新绘制画布，因为调整大小将清除画布上的所有内容

向我们展示您所做的事情。由于我不知道如何开始，我还没有对分辨率部分做任何操作。我只有我的html文件、4个js文件和一个gamewell的cs文件。如果没有看到一些html或css，我们无法确定您需要什么解决方案。您可以使用百分比，您可以设置一些css定位元素，您可以添加一个javascript函数运行在窗口调整大小。。。你能做的事情太多了我知道有很多事情。我如何获得画布显示屏幕的分辨率？如果我知道百分比和定位要素，我会很高兴。由于我是新来的，我谦卑地要求一些方法！这里：我应该把按钮放在这个div里吗？你可以把按钮放在任何你喜欢的地方，我的剪贴画就是如何调整画布的大小

<div style="width:30%">
   <canvas id="can" style="width:100%"></canvas>
</div>

window.resize = function(){
    var canvas = document.getElementById("can");
    canvas.width = canvas.clientWidth;
    canvas.height = //some value based on width
}