Question

我正在开展一个学校项目（只有几个月的JS知识），我在画布上画出了精灵，偶然发现了这个问题。要绘制我使用这些代码。

treeImage = new Image();
treeImage.src = "sprites/treeSprites.png"; 

function rocks() { //to create the rock
    this.x = 1920 * Math.random(); //random location on the width of the field
    this.y = ground[Math.round(this.x/3)]; //ground is an array that stores the height of the ground
    this.draw = function() {
        ctx.save();
        ctx.translate(this.x, this.y);
        ctx.rotate(Math.tan((ground[Math.floor(this.x/3)]-ground[Math.floor(this.x/3)+1])/-3));
        //^rotating based on its position on the ground^
        ctx.drawImage(treeImage, 200, 50, 50, 50, -25, -50, 50, 50);
        ctx.restore();
    }
}

len = rockArray.length; //every frame
for (var i = 0;i<len;i++) {
    rockArray[i].draw();
}

你可以看到我只从图像中请求50乘50，而你在下图中看到的50乘50就是我正确绘制的（据我所知），但正好在50乘50有黑线，不应该干涉，因为我只要求黑线内的方块。但是当我绘制岩石时，黑色轮廓是可见的。（假设我因为太详细的原因而无法删除黑线）

proof that its truly a 50x50, and how it looks on my canvas

我猜测的是，当我加载图像时，图像JavaScript存储模糊，然后当我从图像请求该部分时，周围的线条也是可见的，因为模糊将线条“扩散”到方格我要求。

是这样的吗？有什么方法可以防止这种情况吗？或者可能是另一种解决方法？因为我知道人们在画布中制作了像素艺术游戏，而且他们的图像根本不模糊。

Answer 1

使用package Utility; import java.util.Properties; import javax.activation.*; import javax.mail.*; import javax.mail.internet.*; class SendAttachment{ private static final String Objet = "recent"; public static void main(String [] args) throws Exception, MessagingException{ Properties props = null; if (props == null) { props = new Properties(); props.put("mail.smtp.auth", true); props.put("mail.smtp.starttls.enable", true); props.put("mail.smtp.host", "smtp-mail.outlook.com"); props.put("mail.smtp.port", "587"); props.put("mail.smtp.user", "krishnajntu2009@outlook.com"); props.put("mail.smtp.pwd", "varanane56"); } Session session = Session.getInstance(props, null); session.setDebug(true); Message msg = new MimeMessage(session); msg.setFrom(new InternetAddress("krishnajntu2009@outlook.com")); if (Objet != null) { msg.setSubject(Objet); } //3) create MimeBodyPart object and set your message text BodyPart messageBodyPart1 = new MimeBodyPart(); messageBodyPart1.setText("This is message body"); //4) create new MimeBodyPart object and set DataHandler object to this object MimeBodyPart messageBodyPart2 = new MimeBodyPart(); String filename = "/Users/krishnabadveli/Downloads/Resume (1).pdf";//change accordingly DataSource source = new FileDataSource(filename); messageBodyPart2.setDataHandler(new DataHandler(source)); messageBodyPart2.setFileName(filename); //5) create Multipart object and add MimeBodyPart objects to this object Multipart multipart = new MimeMultipart(); multipart.addBodyPart(messageBodyPart1); multipart.addBodyPart(messageBodyPart2); //6) set the multiplart object to the message object msg.setContent(multipart ); msg.setRecipient(Message.RecipientType.TO, new InternetAddress("krishnajntu2009@outlook.com")); Transport transport = session.getTransport("smtp"); transport.connect("smtp.live.com", 587, "krishnajntu2009@outlook.com", "varanane56"); transport.sendMessage(msg, msg.getAllRecipients()); System.out.println("Mail sent successfully at " + "krishnajntu2009@outlook.com"); transport.close(); } }。

这会使图像变得清晰而不是模糊。

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/imageSmoothingEnabled

Answer 2

如果在x = 5和width = 1处绘制垂直线，画布实际上会绘制从4.5到5.5的线，这会产生锯齿和模糊线。一个快速的方法来补救它，所以它是一个实线是在整个画布偏移半个像素之前做其他的anthing。

ctx.translate(-0.5, -0.5);

javascript加载图片模糊（PNG）

2 个答案: