我的笔:http://codepen.io/anon/pen/mBliE
具有相同橙色背景和相同黑色边框的橙色css div看起来清晰锐利。
画布中绘制的橙色矩形看起来模糊/失真。
为什么会有区别?我没有使用css样式设置画布高度/宽度,这是一个
初学者失败我听说过; - )
如何让我的画布看起来像css?
<canvas id="mycanvas" height="200" width="400"></canvas>
<div></div>
div{
border:black 2px solid;
height:198px;
width:50px;
background:orange;
display:inline-block;
}
canvas {
background: red;
}
$(document).ready(function() {
var canvas = document.getElementById("mycanvas");
var context = canvas.getContext("2d");
context.save();
context.lineWidth = 1;
context.fillStyle = "orange";
context.fillRect(348, 1, 50, 198);
context.strokeStyle = "black";
context.strokeRect(348, 1, 50, 198);
context.fill();
context.restore();
});
答案 0 :(得分:0)
你可以用线宽播放一下:
$(document).ready(function() {
var canvas = document.getElementById("mycanvas");
var context = canvas.getContext("2d");
context.save();
context.lineWidth = 2;
context.fillStyle = "orange";
context.fillRect(350, 1, 50, 198);
context.strokeStyle = "black";
context.strokeRect(349, 1, 50, 198);
context.fill();
context.restore();
});
答案 1 :(得分:0)
看起来笔划位于画布边缘的中心,而不是位于内部或外部,并且设置为宽度为两个px。通过将笔划设置为两个 - context.lineWidth = 2;
- 线条变得更清晰。也许你可以以某种方式将笔画移到外面或者画布上......
正如Ken所说......