• 提升品牌形象
  • 最新HTML5+Css3网站制作技术
  • 完全区分与同行的震撼视觉体验
  • 自动适应平板、手机及电脑屏幕
  • 详细介绍
  • 企业网站入门首选
  • 强大丰富的系统功能
  • 超过1000种页面风格
  • 每年仅需¥1500元,两年仅需¥2000元
  • 详细介绍
  • 4000/4006两种开头选择
  • 智能占线、断线呼转
  • 高达300组可呼转号码
  • 智能语音导航
  • 详细介绍

If you have any question,please contact with us.

  • 昆明网站建设-在线客服

    蛋切刀 一指
    妖异眼瞳
  • 昆明网站设计-服务电话

    4000-555-94113099998627
  • 昆明网站建设-联系地址

    昆明市官渡区岔街
    鸿运都市别墅5单元1101

HTML5 实战-微设计创意工坊 为您提供 昆明网站制作 昆明网站建设 昆明网站设计 云南网站建设 昆明网络公司

  • Home
  • /
  • HTML5 实战
7.1 画布的基础知识

7.1 画布的基础知识

在HTML5中,新增一个非常重要的元素——<canvas>。之所以说该元素非常重要,是因为它是页面中的一块画布,可以在该画布上绘制任意图形(包括导入图片);另外,借助该元素自带的API,通过编写JavaScript代码,可以在<canvas>元素中控制各种图形、制作动画效果,这对Web页面来说,无疑具有划时代的意义。

7.1 画布的基础知识

想在页面中利用新增加的画布元素<canvas>绘画图形,需要经过以下三个步骤:

步骤1

使用<canvas>元素创建一个画布区域,并获取该元素。

步骤2

通过获取的<caiwas>元素,取得该图形元素的上下文环境对象。

步骤3

根据取得的上下文环境对象,在页面中绘制图形或动画。

本节结合几个简单的实例,详细介绍画布元素<canvas>的基本用法。

7.1.1 canvas元素的基本用法

与创建页面中的其他元素相同,<canvas>元素的创建也十分简单,只需要加一个标记ID号,设置元素的长和宽即可,代码如下所示:

<canvas id="cnvMain" width="280px" height="190px"></canvas>

画布创建完成后,就可以利用画布的上下文环境对象绘制图形了。

下面通过实例7-1介绍使用<0&11¥38>元素绘制一个正方形的过程。

7.1.2 绘制带边框矩形

利用画布除了可以绘制有背景色的图形外,还可以绘制有边框的图形。实现过程是:在获取绘图上下文环境对象cxt后,调用一个strokeRect()方法。该方法用来绘制一个矩形,但并不填充矩形区域,而是绘制矩形的边框,其调用格式如下:

cxt.strokeRect(x,y,width,height);

其中参数X,y为矩形起点坐标,width与height分别为矩形宽度与髙度。当然,在绘制边框前,可以调用strokeStyle属性设置边框的颜色,格式如下:

cxt.strokeStyle="background-color";

其中,参数background-color为边框的颜色,可以是一种CSS值、图案或渐变色;另外,如果想要清空图形中指定区域的像素,可以调用另一个方法clearRect(),调用格式如下:

cxt.clearRect(x,y,width,height);

其中,参数X,y为被清空色彩区域起点的坐标,width与height分别为被清空像素区域的宽度与高度,清空后的区域为透明色。

下面通过实例7-2介绍使用<Canvas>元素绘制带边框矩形的过程。

7.1.3 绘制渐变图形

在HTML5中,利用<canvas>元素可以绘制出有渐变色的图形。渐变方式分为两种,一种是线性渐变,另一种是径向渐变。本小节介绍使用线性渐变的方式绘制图形,操作步骤如下:

步骤1

在获取上下文环境对象cxt后,调用该对象的createLinearGradient()方法创建一个LinearGradient对象,调用格式如下:

cxt.createLinearGradient(xStart,yStart,xEnd,yEnd)

其中,参数xStart,yStart表示渐变色开始时的坐标;xEnd,yEnd为渐变色结束时的坐标。如果yStart与yEnd相同,表示渐变色沿水平方向从左向右渐变;如果xStart与xEnd相同,表示渐变色沿纵坐标方向上下渐变;如果xStart与xEnd不相同,并且yStart与yEnd也不相同.则表示渐变色沿矩形对角线方向渐变,如图7-3所示。

步骤2

创建LinearGradient对象并将其取名为gnt后,调用该对象的addColorStop()方法,进行渐变颜色与偏移量的设置,调用格式如下:

gnt.addColorStop(value,color);

其中,参数value表示渐变位置偏移量,它可以在0与1之间取任意值;参数color表示渐变开始与结束时的颜色,分别对应偏移量0与1。为了实现颜色的渐变功能,必须调用两次该方法,第一次表示开始渐变时的颜色,第二次表示结束渐变时的颜色,如图7-4所示。

 

图7-3 三种常见图形颜色渐变的方向

 

 

图7-4 偏移量在颜色渐变时的变化过程

 

步骤3

通过gnt对象将偏移量与渐变色的值设置完成后,再将gnt对象赋值给“fillStyle”属性,表明此次图形的样式是一个渐变对象,最后,使用fillRect()方法绘制出一个有渐变色的图形。

下面通过实例7-3介绍使用<canvas>元素绘制有渐变色图形的过程。

本文由昆明网站建设,昆明微设计整理发布,转载请保留链接


  • If you have any question,please contact with us.

  • QQ在线客服

    蛋切刀
    可乐上瘾
    妖异眼瞳
  • 服务电话

    4000-555-94113099998627
  • 联系地址

    昆明市官渡区岔街
    鸿运都市别墅5单元1101