canvas教程

HTML5 Canvas实例

字号+ 作者:H5之家 来源:H5之家 2015-11-12 17:51 我要评论( )

HTML 5 canvas 提供了通过 JavaScript 绘制图形的方法,此方法使用简单但功能强大。每一个canvas 元素都有一个上下文( context )(想象成绘图板上的一页),在其

HTML 5 canvas 提供了通过 JavaScript 绘制图形的方法,此方法使用简单但功能强大。每一个canvas 元素都有一个上下文( context )(想象成绘图板上的一页),在其中可以绘制任意图形。浏览器支持多个 canvas 上下文,并通过不同的 API 提供图形绘制功能。

下面我们来看一看效果先!

上图深黑色的部分为鼠标所在区域,我们可以看到中间区域变黑。而外边颜色变为绿色。

这一张是鼠标又移动别的地方出现的效果,我们可以明显的看到外边的颜色已经发生变化。它是随着鼠标的移动颜色发生变化的。

这就是今天要说到的HTML 5 canvas。

该例子预览地址:

(仅支持Safari, Firefox浏览器。例子代码可通过浏览器查看源代码获得!)

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • html5canvas核心技术图形、动画与游戏开发源码

    html5canvas核心技术图形、动画与游戏开发源码

    2017-05-02 17:42

  • 打印html5中Canvas的方法

    打印html5中Canvas的方法

    2017-05-01 15:03

  • HTML5+Canvas调用手机拍照功能实现图片上传(下)

    HTML5+Canvas调用手机拍照功能实现图片上传(下)

    2017-04-30 17:00

  • HTML5新特性详解(三)

    HTML5新特性详解(三)

    2017-04-30 16:03

网友点评
s