一、简单介绍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. 2014第13周四Webservice概念问题记

    晚上回来看网页学习了这两天一直疑惑的两个问题: 1.REST和SOAP架构下的Webservice的区别? 2.axis2和CXF的区别. 大部分是理论,暂时摘录一下,以后有更多实践后再回顾. 一.R ...

  2. network is unreachable 解决方案之一

    请按http://blog.csdn.net/oxiaoxio/article/details/41775183 一文中的设置方法设置:

  3. 调magento自定义模板发邮件

    1. 设置邮件模板 <global> <template> <email> <custom_email_template1 module="Samp ...

  4. jQuery插件

    1. Lightbox 2:    Lightbox 2 是一款很酷的图片显示插件,可以在一个平滑展开的新窗口中展现出图片,而同时页面的其余部分都变成黑色背景.使用这款插件,是为了当你的的图片过大必须 ...

  5. Matrix（类似kruskal）

    Matrix Time Limit : 2000/1000ms (Java/Other)   Memory Limit : 32768/32768K (Java/Other) Total Submis ...

  6. BZOJ-1923-外星千足虫-SDOI2010

    描写叙述 分析 首先看上去这貌似是一个高斯消元的题目, 直觉吧- 每次给出的就相当于是一个方程. 然后非常easy想到n条虫子n个x, x_i的系数为0表示这个方程中没有i, 否则为1. 然后系数乘以 ...

  7. php汉字生成首字母

    function getfirstchar($s0){ $fchar = ord($s0{}); }); $s1 = iconv("UTF-8","gb2312" ...

  8. the jar file rt.jar has no source attachment

    解决方法:rt的source在jdk目录的src.zip文件里,找到jdk目录下的src.zip,添加就行了.

  9. Devpexpress 打印预览问题

    devexpress 12 之前报表打印: XtraReports rp1 = new XtraReports(); rp1.ShowPreview(): 即可预览报表: devexpress 13 ...

  10. Linux程序设计 读笔1

    第一章 入门 Linux应用程表现为两种特殊类型文件:可执行文件 + 脚本文件 /bin 二进制文件目录,存放启动系统时用到的标准程序 /usr/bin 用户二进制文件目录,存放用户使用的标准程序 / ...