如何运用HTML5画图

HTML5相比HTML4增加了很多新的特性,这其中就包括画图功能。以前我们想在页面上添加一个图形,我们只能用图片。而现在我们可以用HTML5来实现这一功能。下面小编就给大家介绍如何运用HTML5画图

操作方法

  • 01

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

  • 02

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

  • 03

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

  • 04

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

  • 05

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

  • 06

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

  • 07

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

(0)

相关推荐

  • Chrome浏览器炫酷画图手绘创作应用

    我们知道HTML5技术的发展让更多的功能得以在浏览器中实现,比如说画图。如果你需要一款画图的小软件,那么现在完全没有必要去下载一个,因为打开网页就有很多的在线画图工具。当然如果你用的是Chrome浏览 ...

  • HTML5是什么?

    HTML5是什么?相信这个问题并不容易回答,大多数人对于HTML5的概念仅仅是听说过而已,非要让他说出个所以然来,结果只能让你失望.相比普及了近十四年的HTML4来说,HTML5带来的震撼其实丝毫不亚 ...

  • Windows7电脑基础使用画图程序画一个小鸭

    Windows7电脑基础使用画图程序画一个小鸭

  • Win8.1系统中使用画图工具调整图片大小的方法图文详解

    在网上找到的一些图片或自己拍摄的图片,当我们要使用这些图片时发现图片过大不适合用,这时我们就要对图片的大小进行调整,那我们怎样才能使图片调整成适合使用的大小呢,下面小编就教大家使用Win8.1画图工具 ...

  • word画图工具使用教程案例红心

    word画图工具使用教程案例红心

  • win7系统下使用print screen键加画图工具实现屏幕截图

    截图大家应该都会,我们在QQ上聊天的时候,经常会截图给好友看,往往自己电脑上都会保存一些搞笑幽默的图片,到时候在QQ群里,或者论坛贴吧里发给别人欣赏,像笔者电脑的大部分图片都是在上网的时候,遇见搞笑, ...

  • WPS中的画图工具在哪里?

     WPS2012画图工具位置 (进入“插入”选项卡,在“插图”选项组中选择“形状”)如下图所示: 当你在WPS中插入一个形状时,选项卡上就会出现绘图工具、效果设置这两个选项,里面有很多画图使用的工具, ...

  • 如何使用画图软件快速缩小图片大小

    我们经常把一些用手机拍的家人或是朋友的照片保存在电脑里,但是文件像素很高,所以照片很大,分辨率高的甚至都达到10M,浪费了硬盘空间。那么如何快速缩小图片大小呢 首先我们右击图片--选择属性--查看文件 ...

  • Win7画图工具在查看图片方面有哪些功能如何使用

    画图,作为Windows系统中的一项常用功能,在Windows7中,其界面和功能得到进一步提升,可用于在空白绘图区域或在现有图片上创建绘图。下面介绍一下Windows7系统中画图在查看图片方面的功能。 ...