一、简单介绍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++ 文件的复制、删除、重命名

    一.文件的复制 #include <iostream>#include <fstream>using namespace std; int CopyFile(char *Sou ...

  2. POJ 2429 GCD & LCM Inverse（Pollard_Rho+dfs）

    [题目链接] http://poj.org/problem?id=2429 [题目大意] 给出最大公约数和最小公倍数,满足要求的x和y,且x+y最小 [题解] 我们发现,(x/gcd)*(y/gcd) ...

  3. Java实现验证码图片

    这样的实现方式对JDK版本有要求. 1 package edu.cloud.editmap.utils; import java.awt.Color; import java.awt.Font; im ...

  4. Hibernate、乐观锁和悲观锁

    悲观锁(Pessimistic Lock), 顾名思义,就是很悲观,每次去拿数据的时候都认为别人会修改,所以每次在拿数据的时候都会上锁,这样别人想拿这个数据就会block直到它拿到锁.传统的关系型数据 ...

  5. fs.rename可以重新写入文件

    fs.rename可以重新写入文件 用法 fs.rename(旧path,新path,callback)可以重新写入文件 引用地址 http://www.jb51.net/article/58548. ...

  6. 泛型、注解、log4j

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

  7. ASP.NET MVC4 json序列化器

    ASP.NET MVC4中调用WEB API的四个方法 2012年06月07日00:05 it168网站原创 作者:廖煜嵘 编辑:景保玉 我要评论(0) [IT168技术]当今的软件开发中,设计软件的 ...

  8. CRM setValue方法日期类型字段赋值

    setvalue datetime 赋值 得到“/Date(14000023232323)/”  这样的值 需要把 /去掉 var dd = Result.yt_purchase_date.subst ...

  9. 获取UIButton的一些属性

    获取文字  button.currentTitle 更多如下: @property(nullable, nonatomic,readonly,strong) NSString *currentTitl ...

  10. 已经包含了#include <atlcom.h> #include <comutil.h>还是报错

    在WTL工程的.h中 #include <atlbase.h>#include <atlcom.h>#include <atlcomcli.h>#include & ...