html5 游戏 缩放功能,html5画布清晰缩放功能(html5 canvas clear scale function)

html5画布清晰缩放功能(html5 canvas clear scale function)

我在寻找一个解决方案，在html5-canvas中如何清除缩放功能？ 如果我缩放形状，对于下一个形状它不应缩放或缩小，谢谢

Your browser does not support the HTML5 canvas tag.

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

// first draw

ctx.strokeRect(5,5,25,15);

//scale

ctx.scale(2,2);

ctx.strokeRect(5,5,25,15);

// how to clear scale this ? It should draw like first

ctx.scale(-1,-1); // this is not working

ctx.strokeRect(5,5,25,15);

Iam searching for a solution, in html5-canvas how to clear the scale function? If I scaled a shape, for next shape it should not scale or scale less thank you

Your browser does not support the HTML5 canvas tag.

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

// first draw

ctx.strokeRect(5,5,25,15);

//scale

ctx.scale(2,2);

ctx.strokeRect(5,5,25,15);

// how to clear scale this ? It should draw like first

ctx.scale(-1,-1); // this is not working

ctx.strokeRect(5,5,25,15);

原文：https://stackoverflow.com/questions/22786081

更新时间：2020-02-04 12:10

最满意答案

由于您缩放了2，因此可以按比例缩放1/2

// first draw

ctx.strokeRect(5,5,25,15);

//scale

ctx.scale(2,2);

ctx.strokeRect(5,5,25,15);

// un-scale

ctx.scale(.5,.5); // unscale by 1/2

ctx.strokeRect(5,5,25,15);

另一个例子，如果你按3缩放，你会缩小1/3

// scale

ctx.scale(3,3);

// unscale

ctx.scale(1/3,1/3);

Since you scaled by 2, you can un-scale by 1/2

// first draw

ctx.strokeRect(5,5,25,15);

//scale

ctx.scale(2,2);

ctx.strokeRect(5,5,25,15);

// un-scale

ctx.scale(.5,.5); // unscale by 1/2

ctx.strokeRect(5,5,25,15);

Another example, if you had scaled by 3 you would unscale by 1/3

// scale

ctx.scale(3,3);

// unscale

ctx.scale(1/3,1/3);

相关问答

有很多方法可以调用drawImage 一个是： ctx.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh) 其中dx，dy，dw，dh是目标x，y，宽度和高度。 如果您使dw和dh始终为800x600，则绘制的图像将始终自动缩放到800x600。 这是一个很小的例子，总是将任意大小的图像绘制到800x600 http://jsfiddle.net/jAT8Y/ There are many ways to call drawImage One is:

...

Canvas CSS属性不会调整画布大小，它们会重新缩放它。 您可以使用JS更改属性： $("#canvas")

.prop("width", window.innerWidth)

.prop("height", window.innerHeight);

Canvas CSS properties do not resize canvas, they rescale it. You may simply change the properties with your JS: $

...

我的不好 - 规模适用于文本。 我想出了一个解决方案： context.font = "20px 'Segoe UI'";

var metrics = context.measureText("Testing!");

var textWidth = metrics.width;

var scalex = (canvas.width / textWidth);

var scaley = (canvas.height / 23);

var ypos = (canvas.height / (scal

...

更换 function clearIt() {

ctx.globalCompositeOperation = "destination-out";

}

有： function clearIt() {

shapes = [];

draw();

}

Replace function clearIt() {

ctx.globalCompositeOperation = "destination-out";

}

with: function clearIt() {

...

转换 如果您对如何跳到底部不感兴趣，可以轻松回答问题，您可以在其中找到解决问题的替代方案。 这是所有评论。 我已经对你想要的做了一些猜测。 如果您对我认为使用2D转换函数更简单的方法感兴趣，请阅读其余部分。 矩阵数学 当您使用翻译，缩放和通过画布2D API旋转时，您正在做的是将现有矩阵与每个函数创建的矩阵相乘。 基本上当你这样做 ctx.rotate(Math.PI); // rotate 180 deg

该API会创建一个新的旋转矩阵并将其与现有矩阵相乘。 不像正常的数学乘法矩阵乘法会根据乘

...

我已经更新了小提琴。 检查。 您没有使用动态x坐标。 https://jsfiddle.net/6j4c5dod/7/ function moveCarLeft(){

clearCanvas();

currentX = currentX - 0.1;

context.drawImage(car, currentX, canvasHeight/4, car.width*0.4, car.height*0.13);

}

I have updated the fiddle. Check. Yo

...

经过几天的测试，我终于找到了罪魁祸首：使用myContext.drawImage()切片图片只是iOS中的一大难题(可能是由于视网膜显示，但我不是100％肯定) 。 我所做的是双缓冲和使用myContext.drawImage()的组合， 只能缩放，而不是切片。 FelineSoft在帆布相关的几件事上有很棒的帖子。 这里解释了双缓冲： http ： //www.felinesoft.com/blog/index.php/2010/09/accelerated-game-programming-w

...

由于您缩放了2，因此可以按比例缩放1/2 // first draw

ctx.strokeRect(5,5,25,15);

//scale

ctx.scale(2,2);

ctx.strokeRect(5,5,25,15);

// un-scale

ctx.scale(.5,.5); // unscale by 1/2

ctx.strokeRect(5,5,25,15);

另一个例子，如果你按3缩放，你会缩小1/3 // scale

ctx.scale(3,3

...

使用ctx.clearRect(0,0，canvas.width，canvas.height)的问题在于，如果您修改了转换矩阵，则可能无法正确清除画布。 解决方案？ 在清除画布之前重置转换矩阵： //存储当前变换矩阵ctx.save(); //清除画布时使用单位矩阵ctx.setTransform(1,0,0,1,0,0); ctx.clearRect(0,0，canvas.width，canvas.height); //恢复转换ctx.restore(); 编辑： Chrome响应良好：cont

...

您可以通过在处理程序上定义set方法来修复此错误： set(target, property, value, receiver) {

target[property] = value;

}

这个错误的原因可能看起来有点奇怪。 CanvasRenderingContext2D实例没有自己的strokeStyle属性。 相反， CanvasRenderingContext2DPrototype (每个CanvasRenderingContext2D实例的原型)都有一个访问器属性，其set /

...