如何在HTML5画布上画一个椭圆

在canvas上画即可。

调用API oGC.arc(400, 300, 100, 0, 2*Math.PI, false)

function EllipseOne(context, x, y, a, b) {

var step = (a >b) ? 1 / a : 1 / b

context.beginPath()

context.moveTo(x + a, y)

for(var i = 0i <2 * Math.PIi += step) {

context.lineTo(x + a * Math.cos(i), y + b * Math.sin(i))

}

context.closePath()

context.fill()

}

不光绘制图片，在高分屏下，绘制文字和线条都会出现模糊的现象，GitHub上有一个hidpi-canvas-polyfill可以很好的解决这个问题，但是没有对图片进行处理。如果你了解了原因，解决这个问题也很容易。\x0d\x0a首先，引入上方这个polyfill\x0d\x0a然后，得到devicePixelRatio和backingStorePixelRatio的比例，可以使用下面的方法\x0d\x0a \x0d\x0avar getPixelRatio = function(context) {\x0d\x0a var backingStore = context.backingStorePixelRatio ||\x0d\x0acontext.webkitBackingStorePixelRatio ||\x0d\x0acontext.mozBackingStorePixelRatio ||\x0d\x0acontext.msBackingStorePixelRatio ||\x0d\x0acontext.oBackingStorePixelRatio ||\x0d\x0acontext.backingStorePixelRatio || 1\x0d\x0a return (window.devicePixelRatio || 1) / backingStore\x0d\x0a}\x0d\x0a \x0d\x0a//调用\x0d\x0avar ratio = getPixelRatio(ctx)\x0d\x0a\x0d\x0a之后，在调用ctx.drawImage()的时候，给width和height乘以ratio，如下：\x0d\x0a\x0d\x0a1\x0d\x0a \x0d\x0actx.drawImage(document.querySelector('img'), 10, 10, 300 * ratio, 90 * ratio)

更改html18像素和大小的方法：首先右击图片，选择“打开方式”，选择“画图”；然后点击画图软件任务栏中的“重新调整大小”；最后选择任务栏上的“像素”按钮，并在水平和竖直框里输入相应要求的数值即可。

---