一、简单介绍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. C++STL_max

    template<class T> T max(T a,T b) { return a>b?a:b; }

  2. Linux下设置开机自启动Tomcat

    方法一: linux 下tomcat开机自启动修改Tomcat/bin/startup.sh 为: export JAVA_HOME=/usr/java/j2sdk1..2_08 export CLA ...

  3. Hibernate 、继承关联映射

    一个继承树一张表(subclass) 一个继承树一张表是指将一个类和他下面的所有派生类的所有的属性都放在一张表中,举例有Employee这个实体,在他下面分别派生了两个类skill和sell,通过Hi ...

  4. php获取服务器地址

    if ( isset( $_SERVER['HTTP_X_FORWARDED_HOST'] ) ) { // Support ProxyPass        $t_hosts = explode( ...

  5. extern外部方法使用C#简单样例

    外部方法使用C#简单样例 1.添加引用using System.Runtime.InteropServices; 2.声明和实现的连接[DllImport("kernel32", ...

  6. 设计模式六大原则——迪米特法则（LoD）

    1.背景 在图书馆借书.刚開始的时候,直接跑到对应的楼层去,到里面去转,去找要借的书,在里面溜达半天才干找到:后来知道图书馆有一个电脑查询处.然后直接在电脑上输入想要借的书,电脑就会显示你想要借的书的 ...

  7. ACCESS 里面的坑

    在vs2005中用sql语句访问access数据库出现replace函数未定义错误,后来查询得知,在不能用replace访问access. 问题:   1.为什么以前运行正常的Access数据库,搬到 ...

  8. clinit和init（转载）

    clinit和init(转载)   今天在看深入Java虚拟机的class文件结构时,看到了这么一句话, 可能出现在class文件中的两种编译器产生的方法是:实例初始化方法(名为<init> ...

  9. 常用封装--Date篇--获取格式化的日期对象

    虽然日期对象可以使用new Date()来获取,但是对于其格式却必须进行相应的转换,才能成为开发者想要的格式. 这里提供了一个封装的方法,通过结合正则表达式的使用,达到了可以对时间对象进行处理,生成多 ...

  10. python heapq

    这个模块(build-in)实现了一个堆的数据结构,完美的解决了Top-K问题,以后解决Top-K问题的时候,直接把这个模块拿来用就可以了 注意,默认的heap是一个小顶堆! heapq模块提供了如下 ...