相关疑难解决方法(0)

调整HTML5画布大小以适合窗口

如何自动缩放HTML5 <canvas>元素以适合页面？

例如,我可以<div>通过将height和width属性设置为100%来进行缩放,但是<canvas>不会缩放,是吗？

html javascript html5-canvas

dev*_*vyn

2019 07-21

383
推荐指数

9
解决办法

49万
查看次数

Clear Canvas Rect(但保留背景)

我正在尝试动画一个圆圈,只是水平移动它,工作正常.然而,当圆圈移动时,我必须对该圆圈执行clearRect,以便在水平方向上重新绘制它.当我做一个clearRect时,它也会使背景周围有白框,这样它就会在圆圈移动的方向上成为一条白色的水平线.

有没有办法在没有clearRect的情况下清除圆圈？
如果我必须在clearRect之后继续重新绘制背景,那么当theres说10个圆圈在那个区域移动时,画布将会闪烁.

还有其他解决方法吗？

    function drawcircle() {
        clear();    

        context.beginPath();
        context.arc(X, Y, R, 0, 2*Math.PI, false);                  
        context.moveTo(X,Y);            
        context.lineWidth = 0.3;
        context.strokeStyle = "#999999"; 
        context.stroke();

        if (X > 200)
        {
            clearTimeout(t); //stop
        }
        else
        {
            //move in x dir
            X += dX;
            t = setTimeout(drawcircle, 50);
        }
    }

    function clear() {
        context.clearRect(X-R, Y-R, 2*R, 2*R);
    }

Run Code Online (Sandbox Code Playgroud)

html drawing canvas

fes*_*fes

2011 04-09

13
推荐指数

1
解决办法

2万
查看次数

HTML5响应式画布:调整浏览器画布大小消失

我希望使用百分比大小制作响应式画布,一旦用户调整画布大小相对调整大小.我能够通过使用下面的代码来缩放画布,但唯一的问题是当缩放鼠标绘图消失的窗口大小时.

<style>
body{margin:0px;padding:0px;background:#a9a9a9;}
#main{
display:block;
width:80%;
padding:50px 10%;
height:300px;
} 
canvas{display:block;background:#fff;}
</style>
</head>
<body>
<div id="main" role="main">
<canvas id="paint" width="100" height="100">
< !-- Provide fallback -->
</canvas>
</div> 

<script>

var c = document.getElementById('paint');
var ctx = c.getContext('2d');
var x = null;
var y;

c.onmousedown = function(e){
x = e.pageX - c.offsetLeft;
y = e.pageY - c.offsetTop;
ctx.beginPath();
ctx.moveTo(x,y);

}

c.onmouseup = function(e){
x=null;

}


c.onmousemove = function(e){
if(x==null) return;
x = e.pageX - c.offsetLeft;
y = e.pageY - c.offsetTop; 
ctx.lineTo(x,y); …

Run Code Online (Sandbox Code Playgroud)

javascript jquery html5 canvas

iaw*_*ara

lucky-day

9
推荐指数

2
解决办法

4万
查看次数