如何运用HTML5画图

html-css010

如何运用HTML5画图,第1张

工具/材料

Sublime Text

01

首先要准备一个画布，如下图所示，在HTML5中我们用canvas来表示画布

02

然后我们在script脚本中获取画布对象，如下图所示，运用JS的getElementById方法即可

03

接下来我们通过画布对象的getContext方法来获取上下文2d对象，如下图所示，我们要操作的内容都在里面

04

然后我们给2d上下文填充背景色，如下图所示，运用上下文的fillStyle属性即可

05

接下来，运用上下文的fillRect方法来画一个矩形，注意里面的四个值就是四个坐标，如下图所示

06

最后我们运行界面程序，你会看到如下图所示的红色矩形样例，你可要和上面的坐标对应一下

07

当然2d上下文中还可以画其他的图形，如下图所示的圆形，大家根据自己的需要应用即可

不光绘制图片，在高分屏下，绘制文字和线条都会出现模糊的现象，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)

在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()

}