一、简单介绍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. uvalive 6657 GCD XOR

    //感觉太长时间没做题 好多基本的能力都丧失了(>_<) 首先大概是这样的,因为gcd(a,b)=c,所以a,b都是c的倍数,所以我们依次枚举a的值为2c 3c 4c......,a xo ...

  2. wchar_t 、UTF-8、UTF-16的转换方法 - luketty的专栏 - 博客频道 - CSDN.NET

    wchar_t .UTF-8.UTF-16的转换方法 - luketty的专栏 - 博客频道 - CSDN.NET wchar_t .UTF-8.UTF-16的转换方法

  3. 泛型、注解、log4j

    泛型.注解.log4j 泛型:将运行阶段的类型错误提前到编译阶段. 声明泛型必须两端的一致,要么左面有,要么右边有,两边都有的两边必须一致. 泛型方法: static 之后 返回类型之前进行声明 泛型 ...

  4. Hadoop Eclipse远程连接出现：Error：Call to /10.10.10.10:9000 failed on local exception: java.io.EOFException

    异常截图:

  5. Android 支付宝接入时常见的问题

    1.概述 首先说明下,Android支付宝接入用的是快捷支付,下载地址是https://b.alipay.com/order/techService.htm    支付宝移动接入地址https://b ...

  6. ShowDialog()弹出的窗体，关闭后，主窗体会闪烁的BUG

    如图,要实现下列等待界面时,等待界面是以ShowDialog弹出的,发现关闭后,主窗体会闪烁一下的BUG,搞半天没搞明白啥原因. 过了几天后,搜索了下发现,在fm.ShowDialog(),显示出来时 ...

  7. 关于Condition Variable的一些思考

    可能大家都使用过condition variable(之后称cv),一些博客也对cv做了介绍,但是有的说的不完全正确,甚至有误导使用者的倾向,其实最合理的使用方式是查阅文档, 如果你英语还ok的话,h ...

  8. Linux网络管理——DNS作用

    1. 网络基础 .note-content {font-family: "Helvetica Neue",Arial,"Hiragino Sans GB",&q ...

  9. composer时间长了，提示需要升级，结果问题来了

    今天重新开始之前的laravel项目,结果composer提示需要升级,于是 composer selfupdate 结果提示无法连接目标库,查阅composer官网,发现之前的库地址已经启用了ssl ...

  10. 一个简单的php函数调用实例

    需求分析: funcs.php (这个文件,我们定义了一个函数) <?php //我们一个计算,+ - * / 的代码集合->函数 //1. function 是一个关键字 //2. ji ...