canvas 画布与画布内容都缩小如何实现?
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了canvas 画布与画布内容都缩小如何实现?相关的知识,希望对你有一定的参考价值。
原来问题是为了解决canvas在高清屏下模糊的问题,后来经过放大canvas画布后效果得到改善(附图1);后来下载图片的时候出现了一个问题,下载的后图片的大小是画布的大小(640*1136);但是我希望下载后的图片是(320*568);请问该怎么实现。。。。。
参考技术A var canvas=document.getElementById("myCanvas");//添加canvas的内容
//进行缩放
var img = document.createElement("img");
img.src = canvas.toDataURL("image/png");
var ctx = canvas.getContext("2d")
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.scale(2,2);//x和y方向的缩放比例
ctx.drawImage(img, 0, 0);
可调整大小的画布(JQuery UI)
【中文标题】可调整大小的画布(JQuery UI)【英文标题】:Resizable Canvas (JQuery UI) 【发布时间】:2010-12-30 23:14:47 【问题描述】:任何 DOM 元素都可以根据此页面调整大小:http://jqueryui.com/demos/resizable/
但是,这似乎不适用于 CANVAS 元素。可能吗?
【问题讨论】:
欢迎来到 ***。第一个问题很好! 【参考方案1】:Canvas 有两种调整大小的行为:
调整内容的拉伸位置以适应画布的新尺寸 在画布增长或缩小时调整内容保持静态的位置这是一个演示两种“调整大小”的页面:http://xavi.co/static/so-resizable-canvas.html
如果您想要第一种类型的调整大小(拉伸内容),则将画布放入容器 div
并使用 CSS 将画布的 width
和 height
设置为 100%。该代码可能如下所示:
/* The CSS */
#stretch
height: 100px;
width: 200px;
#stretch canvas
width: 100%;
height: 100%;
<!-- The markup -->
<div id="stretch"><canvas></canvas></div>
// The JavaScript
$("#stretch").resizable();
第二种类型的大小调整(静态内容)是一个两步过程。首先你必须调整canvas元素的width
和height
属性。不幸的是,这样做会清除画布,因此您必须重新绘制其所有内容。这是执行此操作的代码:
/* The CSS */
#resize
height: 100px;
width: 200px;
<!-- The markup -->
<div id="resize"><canvas></canvas></div>
// The JavaScript
$("#resize").resizable( stop: function(event, ui)
$("canvas", this).each(function()
$(this).attr( width: ui.size.width, height: ui.size.height );
// Adjusting the width or height attribute clears the canvas of
// its contents, so you are forced to redraw.
reDraw(this);
);
);
目前,当用户停止调整小部件的大小时,上面的代码会重新绘制画布的内容。可以在 resize 上重新绘制画布,但是调整大小事件经常发生,并且重新绘制是昂贵的操作 - 请谨慎使用。
【讨论】:
【参考方案2】:关于使用这个,画布坐标系有一个有趣的怪癖:
#stretch canvas
width: 100%;
height: 100%;
(来自上面的示例)
您必须使用这些 CSS 规则,因为您不能在画布的宽度/高度属性中指定 %。但是,当您尝试仅使用这些规则在其上绘制对象时,您会发现得到意想不到的结果——绘制的对象看起来被压扁了。这是上面的 CSS,带有画布边框...
/* The CSS */
#stretch
width: 200px;
height: 100px;
#stretch canvas
border:1px solid red;
width: 100%;
height: 100%;
画布被绘制到正确的大小,并且正确实现了边框规则。在其他地方的代码中添加的蓝色矩形应该用 20px 的填充填充画布,但这并没有发生:
要解决此问题,请确保还为画布元素指定宽度和高度(在 HTML 中或在带有 setAttribute 的 javascript 中):
canvas.setAttribute('width', '200');
canvas.setAttribute('height', '100');
或
<canvas width=200 height=100></canvas>
现在,当我刷新页面时,我得到了预期的结果:
这种“双重检查”将确保画布是使用正确的坐标系统绘制的,并且仍然允许通过 CSS 规则调整其大小。如果这是一个错误,我相信它会在适当的时候修复。
这只是提供修复,但您可以阅读更多内容here
【讨论】:
P.S.在最新的 Chrome 和最新的 Firefox 中测试,结果相同。【参考方案3】:那么为什么不在画布元素之前应用一个 div 并调整该元素的大小,当它停止时在画布中应用宽度和高度,然后重绘画布。
【讨论】:
以上是关于canvas 画布与画布内容都缩小如何实现?的主要内容,如果未能解决你的问题,请参考以下文章
Java AWT 图形界面编程使用鼠标滚轮放大缩小 Canvas 画布 ( 鼠标滚轮事件监听器 MouseWheelListener )