相关疑难解决方法(0)

相对调整HTML Canvas的大小

HTML5的<canvas>元件不接受它的相对尺寸(百分比)width和height属性.

我想要完成的是让我的画布相对于窗口大小.这是我到目前为止所提出的,但我想知道是否有更好的方法:

更简单
不需要包裹<canvas>中<div>.
不依赖于jQuery(我使用它来获取父div的宽度/高度)
理想情况下,不重绘浏览器调整大小(但我认为这可能是一个要求)

请参阅下面的代码,它在屏幕中间绘制一个圆圈,40%宽,最大为400px.

码:

<!DOCTYPE html>
<html>
<head>
    <title>Canvas of relative width</title>
    <style>
        body { margin: 0; padding: 0; background-color: #ccc; }
        #relative { width: 40%; margin: 100px auto; height: 400px; border: solid 4px #999; background-color: White; }
    </style>
    <script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <script>
        function draw() {
            // draw a circle in the center of the canvas
            var canvas = document.getElementById('canvas');
            var …

Run Code Online (Sandbox Code Playgroud)

javascript html5 canvas

Por*_*man

lucky-day

11
推荐指数

2
解决办法

2万
查看次数

HTML5 JS fillRect()奇怪的行为

我在填充(x,y,宽度,高度)方面遇到两个奇怪的问题.

将"高度"的值乘以2
X和y应设置为鼠标位置,但矩形向左下方移动,当鼠标向左下方移动时,矩形向远处移动.

这段代码来自视频教程,代码似乎适用于家伙和视频,以及其他所有人,因为没有人评论过同样的问题.无论如何这里是代码:

function doFirst(){
    canv = document.getElementById('canvas');
    canvas = canv.getContext('2d');

    document.addEventListener("mousemove", onMouseMove, false);
}

function onMouseMove(e){
    canvas.clearRect(0, 0, canv.width, canv.height);
    var x = e.clientX;
    var y = e.clientY;
    canvas.fillRect(x, y, 50, 50);
}

window.addEventListener("load", doFirst, false);

Run Code Online (Sandbox Code Playgroud)

我想也许我错过了教程中的一个步骤,经过一遍又一遍的检查,我决定将其简化为只绘制一个没有鼠标监听器的矩形,但画布仍然以2倍高度和约2倍y位置绘制它.

function doFirst(){
    canv = document.getElementById('canvas');
    canvas = canv.getContext('2d');

    canvas.fillRect(10, 10, 50, 50);
}

window.addEventListener("load", doFirst, false);

Run Code Online (Sandbox Code Playgroud)

当我第一次开始玩HTML5画布时,fillRect函数工作正常,那么发生了什么？我是怎么打破它的？

javascript html5 html5-canvas

Lex*_*Lex

2012 11-26

1
推荐指数

1
解决办法

2904
查看次数