一、简单介绍canvas元素

<canvas.../>是HTML5新增的一个元素，该元素用于绘制图形。实际上<canvas../>只是相当于一张画布。

它除了可以指定通用属性外，还可以指定 height 和 weight 两个属性。

在HTML网页上定义<canvas.../>元素之后，它只是一张“空白”的画布，画布上面一片空白。为了向画布上绘图，必须经过如下三步：

(1)获取<canvas.../> 元素对应的DOM对象，这是一个Canvas对象。

(2)调用Canvas对象的 getContext() 方法，该方法返回一个 CanvasRenderingContext2D对象，该对象即可绘制图形。

(3)调用CanvasRenderingContext2D对象的方法绘图。

1、下面的实例绘制了一个红色矩形：

 <!DOCTYPE html>

 <html>

     <head>

         <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />

         <meta http-equiv="Content-Type" content="text/html; charset=GBK" />

         <title> 画图入门 </title>

     </head>

     <body>

         <h2> 画图入门 </h2>

         <canvas id="mc" width="300" height="180"

             style="border:1px solid black"></canvas>

         <script type="text/javascript">

             // 获取canvas元素对应的DOM对象

             var canvas = document.getElementById('mc');

             // 获取在canvas上绘图的CanvasRenderingContext2D对象

             var ctx = canvas.getContext('2d');

             // 设置填充颜色

             ctx.fillStyle = '#f00';

             // 绘制矩形

             ctx.fillRect(30 , 40 , 80 , 100);

         </script>

     </body>

 </html>

2、绘制三角形形状：

 <script type="text/javascript">

     cxt.fillStyle="#FF0000";

     cxt.beginPath();

     cxt.moveTo(10,10);

     cxt.lineTo(150,50);

     cxt.lineTo(10,50);

     cxt.lineTo(10,10);

     cxt.stroke();

     cxt.closePath();

     cxt.fill();

 </script>

结果图：

3、绘制字符串

CanvasRenderingContext2D为绘制文字提供了如下两个方法：

  • fillText(String text, float x, float y, [float maxWidth])  ：填充字符串；
  • strokeText()(String text, float x, float y, [float maxWidth])  ： 绘制字符串边框；

CanvasRenderingContext2D 还设置了如下两个属性：

  • textAlign ：字符串的对齐方式，属性值为：start、end、left、right、center等属性值。
  • textBaseAlign ：绘制字符串的垂直对齐方式，属性值为：top、hanging、middle、alphabetic、idecgraphic、bottom等。

下面代码示例了如何利用 Canvas 来绘制字符串。

 <script type="text/javascript">

     // 获取canvas元素对应的DOM对象

     var canvas = document.getElementById('mc');

     // 获取在canvas上绘图的CanvasRenderingContext2D对象

     var ctx = canvas.getContext('2d');

     ctx.fillStyle = '#00f';

     ctx.font = 'italic 50px 隶书';

     ctx.textBaseline = 'top';

     // 填充字符串

     ctx.fillText('疯狂Java讲义', 0, 0);

     ctx.strokeStyle = '#f0f';

     ctx.font='bold 45px 宋体';

     // 绘制字符串的边框

     ctx.strokeText('轻量级Java EE企业应用实战', 0, 50);

 </script>

显示效果为：

4、设置阴影

  • CanvasRenderingContext2D 为设置图形阴影提供了如下属性：
  • shadowBlur：设置阴影的模糊度。该属性值是一个浮点数，该数值越大，阴影的模糊程度就越大；
  • shadowColor：设置阴影的颜色；
  • shadowOffsetX：设置阴影在X方向的偏移
  • shadowOffsetY：设置阴影在Y方向的偏移

下面程序代码示范了为绘制的图形添加阴影：

 <script type="text/javascript">

     // 获取canvas元素对应的DOM对象

     var canvas = document.getElementById('mc');

     // 获取在canvas上绘图的CanvasRenderingContext2D对象

     var ctx = canvas.getContext('2d');

     // 设置阴影的模糊度

     ctx.shadowBlur = 5.6;

     // 设置阴影颜色

     ctx.shadowColor = "#222";

     // 设置阴影在X、Y方法上的偏移

     ctx.shadowOffsetX = 10;

     ctx.shadowOffsetY = -6;

     ctx.fillStyle = '#00f';

     ctx.font = 'italic 50px 隶书';

     ctx.textBaseline = 'top';

     // 填充字符串

     ctx.fillText('疯狂Java讲义', 0, 0);

     ctx.strokeStyle = '#f0f';

     ctx.font='bold 45px 宋体';

     // 绘制字符串的边框

     ctx.strokeText('轻量级Java EE企业应用实战', 0, 50);

     // 填充一个矩形区域

     ctx.fillRect(20 , 150 , 180 , 80);

     ctx.lineWidth = 8;

     // 绘制一个矩形边框

     ctx.strokeRect(300 , 150 , 180 , 80);

 </script>

显示效果为：

--------------------------------------------------未完待续-------------------------------------

HTML5的绘图的支持的更多相关文章

  1. HTML5 Canvas绘图如何使用

    --------------复制而来--原地址http://jingyan.baidu.com/article/ed15cb1b2e642a1be369813e.html HTML5 Canvas绘图 ...

  2. HTML5中已经不支持元素汇总，持续更新

    HTML5中已经不支持以下的元素,不建议在进行开发时再使用以下的元素. 1.acronym(建议abbr) : 定义首字母缩写 2.applet(建议object):  定义 applet 3.bas ...

  3. HTML5 的绘图支持- canvas

    Canvas HTML5新增了一个canvas元素,它是一张空画布,开发者需要通过JavaScript脚本进行绘制. 在canvas上绘图,经过如下3步 (1) 获取canvas元素对应的DOM对象. ...

  4. HTML5 canvas绘图基本使用方法

    <canvas></canvas>是HTML5中新增的标签,用于绘制图形,实际上,这个标签和其他的标签一样,其特殊之处在于该标签可以获取一个CanvasRenderingCon ...

  5. HTML5 Canvas绘图详解 drawImage() 方法 有图有真相！

    步骤 1 2 3 4 5   简介 是一个新的HTML元素,这个元素可以被Script语言(通常是JavaScript)用来绘制图形.例如可以用它来画图.合成图象.或做简单的(和不那么简单的)动画. ...

  6. HTML5 Canvas绘图基本使用方法, H5使用Canvas绘图

    Canvas 是H5的一部分,允许脚本语言动态渲染图像.Canvas 定义一个区域,可以由html属性定义该区域的宽高,javascript代码可以访问该区域,通过一整套完整的绘图功能(API),在网 ...

  7. HTML5 canvas绘图

    HTML5 canvas画图 示例 ------- <!DOCTYPE html> <head> <meta charset="UTF-8"> ...

  8. Html5导航插件，支持水平/垂直展示

    /*========================= CSS STYLE=========================== */ .tabWrap {} .tabWrap ul { paddin ...

  9. HTML5 Canvas绘图系列之一：圆弧等基础图形的实现

    之前的一个微信项目已经要结项了,最近整理一下项目中使用较多的canvas画图方面的知识吧,打算写个3,4篇的样子.本篇主要介绍基础操作和弧线画法. 之后再写一下趋势图,直方图,文本图像处理的. 言归正 ...

随机推荐

  1. Git与SVN的比较及优点

    前天处女面被问到了你为什么要用Git而不用SVN,答的不是很理想,正好今天晚上小组内部进行了Git使用的培训,便想着总结一下Git与SVN的差异以及Git的优点. 一.Git与SVN的比较 1.git ...

  2. 转载： Nova-Router 分析

    很早的实现了,nova代码已经做了很多修改了. 以创建实例 URL(http://10.191.7.32:8773/v1.1/service?*****)为例说明 Router 的执行流程 1. 依据 ...

  3. Unity CCTween UGUI 动画插件

    在这简单的介绍一下 CCTween 动画插件的使用 因为GIF 制作软件不太好(网上随便下载的)所以导致效果不太好,有时间我重新制作一下 这是一下简单的效果 下面介绍怎么使用 首先 先下载 CCTwe ...

  4. Soft Drinking(水)

    A. Soft Drinking time limit per test 2 seconds memory limit per test 256 megabytes input standard in ...

  5. Effective C++ 条款18

    让接口easy被正确使用,不easy被误用 如题目,我们自己的程序接口是面向用户的,程序的目的不可是解决这个问题,并且要让用户easy使用.所以.必须保证我们的程序接口具有非常强的鲁棒性. 怎么保证接 ...

  6. Oracle方向

    从毕业到现在工作已经4年了,入职前去过私企,干过外企,当前到了国企,各有各的不同,对于不同的人,有不同的适合的选择. 这几年的工作中也积累了不少知识,业务上的.技术上的,但始终觉得没有掌握一门核心,没 ...

  7. C语言中为什么不能把char**赋给const char**

    这是我在知乎回答的一个问题. 这个问题是C中的一个深坑,首先说结论: char ** 和 const char ** 是两个不相容(incompatible)的类型,能够理解为不能直接赋值 在C11的 ...

  8. jQuery模拟原生态App上拉刷新下拉加载

    jQuery模拟原生态App上拉刷新下拉加载效果代码,鼠标上拉时会显示loading字样,并且会模拟加载一条静态数据,支持触屏设备使用. <!doctype html> <html ...

  9. QF——iOS通知中心（NotificationCener）

    前面我们讲iOS不同界面间传值的时候,说过可以通过通知中心进行传值.那到底什么是通知中心,他是如何实现传值的呢? NSNotificationCenter是单例的,只提供了一个唯一的实例化入口,在整个 ...

  10. iis7.0/8.0rewrite规则

    首先在网站 web.config 配置文件的 configuration 节点中加入如下代码: <system.webServer> <rewrite> <rules&g ...