相关疑难解决方法(0)

模拟背景大小:在画布上覆盖

我正在画像这样的画布:

ctx.drawImage(data[i].image, data[i].pos.x, data[i].pos.y, data[i].pos.w, data[i].pos.h);
Run Code Online (Sandbox Code Playgroud)

问题是图片越来越拉伸,我不希望这样.我如何模拟css属性

background-size: cover
Run Code Online (Sandbox Code Playgroud)

在卡瓦斯画图像.

http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=cover

看看100% 100%(我现在拥有的)和cover(我的目标)之间的区别.

html javascript css html5 canvas

35
推荐指数
3
解决办法
3万
查看次数

HTML5 - Canvas,drawImage()绘制图像模糊

我试图将以下图像绘制到画布上,但尽管定义了画布的大小,但它看起来很模糊.正如您在下面看到的,图像清晰而清晰,而在画布上,图像模糊且像素化.

在此输入图像描述

这是它的外观(左边是原始的,右边是绘制的画布,模糊不清.)

在此输入图像描述

我究竟做错了什么?

console.log('Hello world')

var c = document.getElementById('canvas')
var ctx = c.getContext('2d')
var playerImg = new Image()

// http://i.imgur.com/ruZv0dl.png sees a CLEAR, CRISP image
playerImg.src = 'http://i.imgur.com/ruZv0dl.png'
playerImg.width = 32
playerImg.height = 32

playerImg.onload = function() {
  ctx.drawImage(playerImg, 0, 0, 32, 32);
};
Run Code Online (Sandbox Code Playgroud)
#canvas {
  background: #ABABAB;
  position: relative;
  height: 352px;
  width: 512px;
  z-index: 1;
}
Run Code Online (Sandbox Code Playgroud)
<canvas id="canvas" height="352" width="521"></canvas>
Run Code Online (Sandbox Code Playgroud)

javascript html5 canvas

14
推荐指数
4
解决办法
2万
查看次数

标签 统计

canvas ×2

html5 ×2

javascript ×2

css ×1

html ×1