个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
27
4
有没有一种方法可以创建大尺寸但低分辨率的 Canvas 。我使用语法 <canvas id="mycanvas" width="700" height="1000"></canvas> 声明 Canvas .我在 7 英寸平板电脑上运行上面的代码， Canvas 横跨 Canvas 屏幕的一半。有没有一种方法可以创建一个再次覆盖屏幕一半但分辨率较低(图像质量较低)的 Canvas 。实际上，我在 Canvas 上画了一些东西，然后使用 canvas.toDataURL() 将其保存为图像。我不需要获得高质量的图像，但我想减小生成的图像的大小。
如果这是一个愚蠢的问题，请原谅我
最佳答案
首先，像这样缩放 Canvas 元素(在 javascript 中):
canvas.width=canvas1.width*scaleFactor;
canvas.height=canvas1.height*scaleFactor;
警告:如果您使用 CSS 缩放 Canvas ，您可能会扭曲 Canvas 上绘制的图像
然后您可以使用一些添加到 context.drawImage 的参数来缩放您的图像
var scaleFactor=0.50;
ctx2.drawImage(img, 0,0,img.width,img.height,
0,0,img.width*scaleFactor,img.height*scaleFactor);
这是代码和 fiddle :http://jsfiddle.net/m1erickson/6m8kg/
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; padding:15px;}
canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas1=document.getElementById("canvas1");
var ctx1=canvas1.getContext("2d");
var canvas2=document.getElementById("canvas2");
var ctx2=canvas2.getContext("2d");
var scaleFactor=0.50;
var img=document.createElement("img");
img.onload=function(){
// draw the image full-size on the larger canvas
ctx1.drawImage(img,0,0);
// resize the canvas
// Don't use css to resize, it will distort your image
// The scaling is done with the added drawImage arguements
canvas2.width=canvas1.width*scaleFactor;
canvas2.height=canvas1.height*scaleFactor;
// draw a scaled-down image into the second canvas
ctx2.drawImage(img, 0,0,img.width,img.height,
0,0,img.width*scaleFactor,img.height*scaleFactor);
}
img.src="faces.png";
}); // end $(function(){});
</script>
</head>
<body>
<p>Top canvas is full-sized</p>
<canvas id="canvas1" width=400 height=242></canvas><br>
<p>Bottom canvas is scaled down</p>
<canvas id="canvas2" width=300 height=300></canvas>
</body>
</html>
关于html - HTML5 Canvas 的大小和分辨率有什么关系，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17260867/
27
4
0
下面的说法正确吗？ “人最好的 friend 是狗。” public class Mann { private BestFriend dog; //etc } 最佳答案 我想说这样
我一直在 documentation 中查看 Laravel 4 中的关系我正在尝试解决以下问题。 我的数据库中有一个名为“事件”的表。该表具有各种字段，主要包含与其他表相关的 ID。例如，我有一个“
我的表具有如下关系: 我有相互链接的级联下拉框，即当您选择国家/地区时，该国家/地区下的区域将加载到区域下拉列表中。但现在我想将下拉菜单更改为基于 Ajax 的自动完成文本框。 我的问题是，我应该有多
我正在尝试弄清楚如何构建这个数据库。我之前用过Apple的核心数据就好了，现在我只是在做一个需要MySQL的不同项目。我是 MySQL 的新手，所以请放轻松。 :) 对于这个例子，假设我有三个表，Us
MongoDB 的关系表示多个文档之间在逻辑上的相互联系。 文档间可以通过嵌入和引用来建立联系。 MongoDB 中的关系可以是： 1:1 (1对1) 1: N (1对多)
您能解释一下 SQL 中“范围”和“分配单元”之间的区别或关系吗？ 最佳答案 分配单元基本上只是一组页面。它可以很小(一页)或很大(很多页)。它在 sys.allocation_units 中有一个元
我有一个表 geoLocations，其中包含两列纬度和经度。还有第二个表(让我们将其命名为城市)，其中包含每对唯一的纬度和经度对应的城市。 如何使用 PowerPivot 为这种关系建模？创建两个单
我想用 SQLDelight 建模关系，尤其是 一对多关系。 我有 2 张 table :recipe和 ingredient .为简单起见，它们看起来像这样: CREATE TABLE recipe
我是 Neo4J 新手，我有一个带有源和目标 IP 的简单 CSV。我想在具有相同标签的节点之间创建关系。 类似于... source_ip >> ALERTS >> dest_ip，或者相反。 "d
我正在创建一个类图，但我想知道下面显示的两个类之间是否会有任何关联 - 据我了解，对于关联，ClassA 必须有一个 ClassB 的实例，在这种情况下没有但是，它确实需要知道 ClassB 的一个变
是否可以显示其他属性，即“hasTopping”等？ 如何在 OWLViz 中做到这一点？ 最佳答案 OWLViz 仅 显示类层次结构(断言和推断的类层次结构)。仅使用“is-a”关系进行描述。 OW
public class MainClass { ArrayList mans = new ArrayList(); // I'm filling in this arraylist,
我想知道“多对二”的关系。 child 可以与两个 parent 中的任何一个联系，但不能同时与两个 parent 联系。有什么办法可以加强这一点吗？我也想防止 child 重复条目。 一个真实的例子
我有一个已经创建的Grails插件，旨在支持许多应用程序。该插件具有一个Employee域对象。问题在于，当在主应用程序中使用该应用程序中的域对象时，需要将其引用回Employee对象。因此，我的主应
我有一个类(class)表、类(class)hasMany部分和部分hasMany讲座以及讲座hasMany评论。如果我有评论 ID 并且想知道其类(class)名称，我应该如何在 LectureCo
我有一个模型团队，包含 ID 和名称。所有可能的团队都会被存储。 我的模型游戏有两列 team_1 和 team_2..我需要哪种关系？ 我已经测试了很多，但它只适用于一列.. 最佳答案 也许你可以试
我读了很多关于 ICE 或 Corba 等技术中使用的仆人和对象的文章。有很多资源我可以读到这样的东西: 一个仆人可以处理多个对象(为了节省资源)。 一个对象可以由多个仆人处理(为了可靠性)。 有人可
嗨， 我有一个令人沮丧的问题，我在这方面有点生疏。我有两个这样的类(class): class A{ int i; String j ; //Getters and setters} class B
class Employee { private String name; void setName(String n) { name = n; } String getNam
如果您有这样的关系: 员工与其主管员工之间存在多对一关系 员工与其部门的多对一关系 部门与其经理一对一 我会在 Employee 实体中写入: @ManyToOne (cascade=CascadeT
我是一名优秀的程序员,十分优秀！