HTML5+CSS3网页设计基础教程第5章-图形图像绘制课件.ppt

1、HTML5+CSS3网页设计基础教程第5章 图形图像绘制第1页第第5章章 图形图像绘制图形图像绘制本章概述 本章的学习目标主要内容HTML5+CSS3网页设计基础教程第5章 图形图像绘制第2页本章概述本章概述lcanvas是是HTML5的一个新增元素。通过的一个新增元素。通过canvas元素，用户可以在元素，用户可以在Web中绘制各种图形。虽然以中绘制各种图形。虽然以前也有基于前也有基于XML的绘图技术，如的绘图技术，如VML何何SVG等，等，但但canvas是基于像素的绘制，开发者通过是基于像素的绘制，开发者通过Javascript脚本可以轻松绘图。脚本可以轻松绘图。l绘制图形时，在页面上放

2、置一个绘制图形时，在页面上放置一个canvas元素，就元素，就相当于在页面上放置了一块画布，可以在这块画相当于在页面上放置了一块画布，可以在这块画布中进行绘制图形，但是并不是用鼠标进行画图，布中进行绘制图形，但是并不是用鼠标进行画图，实际上，实际上，canvas只是一块无色透明的区域，只是只是一块无色透明的区域，只是一个一个javascript API，需要通过，需要通过javascript编写绘编写绘制图形的脚本。本章就来介绍制图形的脚本。本章就来介绍canvas元素的使用。元素的使用。HTML5+CSS3网页设计基础教程第5章 图形图像绘制第3页本章的学习目标本章的学习目标l理解与理解与c

3、anvas元素相关的基础知识元素相关的基础知识l使用使用canvas元素绘制简单图形元素绘制简单图形l使用使用canvas元素绘制贝塞尔曲线元素绘制贝塞尔曲线l使用使用canvas元素绘制变形图形元素绘制变形图形l使用使用canvas元素添加丰富图形效果元素添加丰富图形效果l使用使用canvas元素对图像进行处理元素对图像进行处理l使用使用canvas元素对图形图像进行组合和混合操作元素对图形图像进行组合和混合操作l使用使用canvas元素将文字绘制到元素将文字绘制到Web上上l使用使用canvas绘图时状态的保存与恢复绘图时状态的保存与恢复HTML5+CSS3网页设计基础教程第5章 图形图像

4、绘制第4页主要内容主要内容5.1 canvas元素基础元素基础 5.2 绘制简单图形绘制简单图形5.3 绘制贝塞尔曲线绘制贝塞尔曲线5.4 绘制变形图形绘制变形图形5.5 丰富图形效果丰富图形效果5.6 图像处理图像处理 5.7 绘制文字绘制文字5.8 本章小结本章小结 HTML5+CSS3网页设计基础教程第5章 图形图像绘制第5页5.1 canvas元素基础元素基础 l5.1.1 添加添加canvas元素元素l5.1.2 检测浏览器支持检测浏览器支持l5.1.3 使用使用Canvas绘制图形绘制图形l5.1.4 Canvas坐标系坐标系HTML5+CSS3网页设计基础教程第5章 图形图像绘制

5、第6页5.1.1 添加添加canvas元素元素l在在HTML页面中添加页面中添加canvas元素的方法和其他元素的添加元素的方法和其他元素的添加一样，代码如下：一样，代码如下：HTML5+CSS3网页设计基础教程第5章 图形图像绘制第7页5.1.2 检测浏览器支持检测浏览器支持l并不是所有的浏览器都支持并不是所有的浏览器都支持canvas元素，因此，在使用元素，因此，在使用时需要先进行检测。检测的方法有两种：一种是为不支持时需要先进行检测。检测的方法有两种：一种是为不支持canvas元素的浏览器提供替代显示的内容；另一种是使元素的浏览器提供替代显示的内容；另一种是使用用JavaScript代码

6、进行检测。代码进行检测。HTML5+CSS3网页设计基础教程第5章 图形图像绘制第8页5.1.3 使用使用Canvas绘制图形绘制图形lcanvas元素本身并不能实现图形绘制功能，绘制图形的元素本身并不能实现图形绘制功能，绘制图形的工作需要由工作需要由JavaScript来完成。使用来完成。使用JavaScript可以在可以在canvas元素内部添加线条、图片和文字，也可以在其中元素内部添加线条、图片和文字，也可以在其中绘画，还能够加入高级动画。绘画，还能够加入高级动画。HTML5+CSS3网页设计基础教程第5章 图形图像绘制第9页5.1.4 Canvas坐标系坐标系l在在canvas元素中绘

7、制图形时，需要为图形指定摆放位置。元素中绘制图形时，需要为图形指定摆放位置。fillRect(50,50,100,100)的前两个参数就是指定所绘制矩的前两个参数就是指定所绘制矩形的形的x轴和轴和y轴坐标值。在轴坐标值。在canvas中，坐标原点（中，坐标原点（0,0）位）位于于canvas元素的左上角，元素的左上角，x轴水平向右延伸，轴水平向右延伸，y轴向下延轴向下延伸。伸。HTML5+CSS3网页设计基础教程第5章 图形图像绘制第10页主要内容主要内容5.1 canvas元素基础元素基础 5.2 绘制简单图形绘制简单图形5.3 绘制贝塞尔曲线绘制贝塞尔曲线5.4 绘制变形图形绘制变形图形5

8、.5 丰富图形效果丰富图形效果5.6 图像处理图像处理 5.7 绘制文字绘制文字5.8 本章小结本章小结 HTML5+CSS3网页设计基础教程第5章 图形图像绘制第11页5.2 绘制简单图形绘制简单图形l5.2.1 绘制直线绘制直线l5.2.2 绘制矩形绘制矩形l5.2.3 绘制弧线与圆形绘制弧线与圆形l5.2.4 绘制三角形绘制三角形l5.2.5 清空画布清空画布HTML5+CSS3网页设计基础教程第5章 图形图像绘制第12页5.2.1 绘制直线绘制直线l在在canvas上绘制简单直线，主要用到上绘制简单直线，主要用到3个方法：个方法：moveTo、lineTo和和stroke。如果要设置直

9、线端点的样子，可以使用。如果要设置直线端点的样子，可以使用lineCap属性指定。属性指定。HTML5+CSS3网页设计基础教程第5章 图形图像绘制第13页5.2.2 绘制矩形绘制矩形l绘制矩形时，需要用到绘制矩形时，需要用到fillStyle属性、属性、fillRect方法，还可方法，还可以使用以使用strokeStyle和和strokeRect方法。其中，方法。其中，fillStyle属属性用于指定填充颜色；性用于指定填充颜色；fillRect方法用于以指定的填充颜方法用于以指定的填充颜色绘制一个矩形；色绘制一个矩形；strokeStyle指定边框线颜色；指定边框线颜色；strokeRec

10、t以指定的颜色绘制矩形轮廓。以指定的颜色绘制矩形轮廓。HTML5+CSS3网页设计基础教程第5章 图形图像绘制第14页5.2.3 绘制弧线与圆形绘制弧线与圆形lHTML5提供了专门用于绘制圆形或弧线的提供了专门用于绘制圆形或弧线的arc方法和方法和arcTo方法。方法。arc方法的使用格式如下：方法的使用格式如下：arc(x,y,radius,startRad,endRad,anticlockwise)l在在canvas画布上绘制以坐标点画布上绘制以坐标点(x,y)为圆心、半径为为圆心、半径为radius的圆上的一段弧线。这段弧线的起始弧度是的圆上的一段弧线。这段弧线的起始弧度是startRa

11、d，结束弧度是，结束弧度是endRad。这里的弧度是以。这里的弧度是以x轴正轴正方向方向(时钟三点钟时钟三点钟)为基准、进行顺时针旋转的角度来计算为基准、进行顺时针旋转的角度来计算的。的。anticlockwise表示是以逆时针方向还是顺时针方向表示是以逆时针方向还是顺时针方向开始绘制，如果为开始绘制，如果为true则表示逆时针，如果为则表示逆时针，如果为false则表示则表示顺时针。顺时针。anticlockwise参数是可选的，默认为参数是可选的，默认为false，即，即顺时针。顺时针。HTML5+CSS3网页设计基础教程第5章 图形图像绘制第15页5.2.4 绘制三角形绘制三角形l和绘制

12、矩形一样，绘制三角形可以是实心的，也可以是空和绘制矩形一样，绘制三角形可以是实心的，也可以是空心的（也就是没填充色，光有轮廓线）。绘制实心三角形心的（也就是没填充色，光有轮廓线）。绘制实心三角形使用使用fill()方法，绘制空心三角形用方法，绘制空心三角形用stroke()方法。方法。HTML5+CSS3网页设计基础教程第5章 图形图像绘制第16页5.2.5 清空画布清空画布l清空画布的方法有以下清空画布的方法有以下3种：种：第一种，也就是最简单的办法，由于第一种，也就是最简单的办法，由于canvas每当高度或宽度被重每当高度或宽度被重设时，画布内容就会被清空。设时，画布内容就会被清空。第二种

13、方法，使用第二种方法，使用clearRect方法。方法。第三种方法，类似于方法第三种方法，类似于方法2，可以用某一特定颜色填充画布，从而，可以用某一特定颜色填充画布，从而达到清空的目的。达到清空的目的。HTML5+CSS3网页设计基础教程第5章 图形图像绘制第17页主要内容主要内容5.1 canvas元素基础元素基础 5.2 绘制简单图形绘制简单图形5.3 绘制贝塞尔曲线绘制贝塞尔曲线5.4 绘制变形图形绘制变形图形5.5 丰富图形效果丰富图形效果5.6 图像处理图像处理 5.7 绘制文字绘制文字5.8 本章小结本章小结 HTML5+CSS3网页设计基础教程第5章 图形图像绘制第18页5.3

14、绘制贝塞尔曲线绘制贝塞尔曲线l5.3.1 二次贝塞尔曲线二次贝塞尔曲线l5.3.2 三次贝塞尔曲线三次贝塞尔曲线HTML5+CSS3网页设计基础教程第5章 图形图像绘制第19页5.3.1 二次贝塞尔曲线二次贝塞尔曲线l绘制贝塞尔曲线需要用到绘制贝塞尔曲线需要用到quadraticCurveTo()方法，使方法，使用方法如下：用方法如下：quadraticCurveTo(cpx,cpy,x,y)HTML5+CSS3网页设计基础教程第5章 图形图像绘制第20页5.3.2 三次贝塞尔曲线三次贝塞尔曲线l三次贝塞尔曲线则需要使用到三次贝塞尔曲线则需要使用到3个控制点，绘制个控制点，绘制方法如下：方法如

15、下：bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)HTML5+CSS3网页设计基础教程第5章 图形图像绘制第21页主要内容主要内容5.1 canvas元素基础元素基础 5.2 绘制简单图形绘制简单图形5.3 绘制贝塞尔曲线绘制贝塞尔曲线5.4 绘制变形图形绘制变形图形5.5 丰富图形效果丰富图形效果5.6 图像处理图像处理 5.7 绘制文字绘制文字5.8 本章小结本章小结 HTML5+CSS3网页设计基础教程第5章 图形图像绘制第22页5.4 绘制变形图形绘制变形图形l5.4.1 保存与恢复保存与恢复canvas状态状态l5.4.2 移动坐标空间移动坐标空间l5.

16、4.3 旋转坐标空间旋转坐标空间l5.4.4 缩放图形缩放图形l5.4.5 矩阵变换矩阵变换HTML5+CSS3网页设计基础教程第5章 图形图像绘制第23页5.4.1 保存与恢复保存与恢复canvas状态状态l可以通过下面两个方法来实现保存绘图属性和获可以通过下面两个方法来实现保存绘图属性和获取属性：取属性：context.save();context.restore();HTML5+CSS3网页设计基础教程第5章 图形图像绘制第24页5.4.2 移动坐标空间移动坐标空间lcanvas坐标空间默认以画布左上角坐标空间默认以画布左上角(0,0)为为原点，原点，x轴水平向右为正向，轴水平向右为正向

17、，y轴垂直向下轴垂直向下为正向，该坐标空间的单位通常为像素。为正向，该坐标空间的单位通常为像素。在绘制图形时，可以使用在绘制图形时，可以使用translate方法移方法移动坐标空间，使画布的变换矩阵发生水平动坐标空间，使画布的变换矩阵发生水平和垂直方向的偏移，其用法如下：和垂直方向的偏移，其用法如下：context.translate(dx,dy);HTML5+CSS3网页设计基础教程第5章 图形图像绘制第25页5.4.3 旋转坐标空间旋转坐标空间l若要旋转坐标空间，应使用若要旋转坐标空间，应使用rotate方法。方法。rotate方方法用于以原点为中心旋转法用于以原点为中心旋转canvas，

18、实质仍是旋转，实质仍是旋转canvas上下文对象的坐标空间，用法如下：上下文对象的坐标空间，用法如下：context.rotate(angle);HTML5+CSS3网页设计基础教程第5章 图形图像绘制第26页5.4.4 缩放图形缩放图形l缩放图形主要通过缩放图形主要通过scale()方法来实现，具体使用方法来实现，具体使用格式如下：格式如下：ctx.scale(x,y);HTML5+CSS3网页设计基础教程第5章 图形图像绘制第27页5.4.5 矩阵变换矩阵变换l矩阵变换主要通过矩阵变换主要通过transform()方法来实现。方法来实现。setTransform方法用于将当前的变化矩阵重置

19、为方法用于将当前的变化矩阵重置为最初的矩阵，然后以相同的参数调用最初的矩阵，然后以相同的参数调用transform方法，即先方法，即先set（重置），再（重置），再transform（变换）（变换）具体使用格式如下：具体使用格式如下：context.transform(m11,m12,m21,m22,dx,dy);HTML5+CSS3网页设计基础教程第5章 图形图像绘制第28页主要内容主要内容5.1 canvas元素基础元素基础 5.2 绘制简单图形绘制简单图形5.3 绘制贝塞尔曲线绘制贝塞尔曲线5.4 绘制变形图形绘制变形图形5.5 丰富图形效果丰富图形效果5.6 图像处理图像处理 5.7

20、绘制文字绘制文字5.8 本章小结本章小结 HTML5+CSS3网页设计基础教程第5章 图形图像绘制第29页5.5 丰富图形效果丰富图形效果l5.5.1 应用不同的线型应用不同的线型l5.5.2 绘制线性渐变绘制线性渐变l5.5.3 绘制径向渐变绘制径向渐变l5.5.4 绘制图案绘制图案l5.5.5 设置图形的透明度设置图形的透明度l5.5.6 创建阴影创建阴影HTML5+CSS3网页设计基础教程第5章 图形图像绘制第30页5.5.1 应用不同的线型应用不同的线型l前面绘制过程中使用到了一些线条的方法和属性。前面绘制过程中使用到了一些线条的方法和属性。通过通过lineWidth、lineCap、

21、lineJoin、miterLimit属性，可以设置线条的粗细、端点样属性，可以设置线条的粗细、端点样式、两线段链接处样式和绘制交点的方式。式、两线段链接处样式和绘制交点的方式。HTML5+CSS3网页设计基础教程第5章 图形图像绘制第31页5.5.2 绘制线性渐变绘制线性渐变l前面绘制过程中使用到了一些线条的方法和属性。前面绘制过程中使用到了一些线条的方法和属性。通过通过lineWidth、lineCap、lineJoin、miterLimit属性，可以设置线条的粗细、端点样属性，可以设置线条的粗细、端点样式、两线段链接处样式和绘制交点的方式。式、两线段链接处样式和绘制交点的方式。lcrea

22、teLinearGradient方法的使用如下：方法的使用如下：CanvasGradient=ctx.createLinearGradient(x0,y0,x1,y1)addColorStop方法的使用如下：方法的使用如下：CanvasGradient.addColorStop(offset,color)HTML5+CSS3网页设计基础教程第5章 图形图像绘制第32页5.5.3 绘制径向渐变绘制径向渐变l径向渐变，其实就是环形的渐变，由圆心（或者径向渐变，其实就是环形的渐变，由圆心（或者是较小的同心圆）开始向外扩散渐变的效果。线是较小的同心圆）开始向外扩散渐变的效果。线性渐变指定了起点和终点，

23、径向渐变则指定了开性渐变指定了起点和终点，径向渐变则指定了开始的结束园的圆心和半径。径向渐变使用始的结束园的圆心和半径。径向渐变使用createRadialGradient来获得来获得Canvas的的CanvasGradient对象，所以对象，所以addColorStop方法方法也是通用的。使用方法如下：也是通用的。使用方法如下：CanvasGradient=ctx.createRadialGradient(x0,y0,r0,x1,y1,r1)HTML5+CSS3网页设计基础教程第5章 图形图像绘制第33页5.5.4 绘制图案绘制图案lcanvas中，中，createPattern方法用来实现

24、图案效方法用来实现图案效果，在指定的方向内重复指定的元素。元素可以果，在指定的方向内重复指定的元素。元素可以是图片、视频，或者其他是图片、视频，或者其他canvas元素。被重复的元素。被重复的元素可用于绘制元素可用于绘制/填充矩形、圆形或线条等等。其填充矩形、圆形或线条等等。其用法如下：用法如下：context.createPattern(image,repeat|repeat-x|repeat-y|no-repeat);HTML5+CSS3网页设计基础教程第5章 图形图像绘制第34页5.5.5 设置图形的透明度设置图形的透明度lcanvas绘图中，有两种设置透明度的方法：绘图中，有两种设置透

25、明度的方法：globalAlpha属性和属性和rgba方法。方法。globalAlpha属性属性适合为大量图形设置相同的透明度。适合为大量图形设置相同的透明度。rgba方法则方法则是通过设置色彩透明度的参数来为图形设置不同是通过设置色彩透明度的参数来为图形设置不同的透明度。的透明度。HTML5+CSS3网页设计基础教程第5章 图形图像绘制第35页5.5.6 创建阴影创建阴影lcanvas提供了绘制元素阴影的功能，主要的属性提供了绘制元素阴影的功能，主要的属性包括：包括：shadowColor、shadowBlur、shadowOffsetX、shadowOffsetY。其中，。其中，shado

26、wColor定义阴影颜色样式，定义阴影颜色样式，shadowBlur定义阴影模糊系数，定义阴影模糊系数，shadowOffsetX定义阴影定义阴影X轴偏移量，轴偏移量，shadowOffsetY定义阴影定义阴影Y轴偏移量。轴偏移量。HTML5+CSS3网页设计基础教程第5章 图形图像绘制第36页主要内容主要内容5.1 canvas元素基础元素基础 5.2 绘制简单图形绘制简单图形5.3 绘制贝塞尔曲线绘制贝塞尔曲线5.4 绘制变形图形绘制变形图形5.5 丰富图形效果丰富图形效果5.6 图像处理图像处理 5.7 绘制文字绘制文字5.8 本章小结本章小结 HTML5+CSS3网页设计基础教程第5章

27、 图形图像绘制第37页5.6 图像处理图像处理 l5.6.1 裁剪图像裁剪图像l5.6.2 像素处理像素处理l5.6.3 组合图形组合图形l5.6.4 混合图像混合图像HTML5+CSS3网页设计基础教程第5章 图形图像绘制第38页5.6.1 裁剪图像裁剪图像lcanvas的图像剪裁功能是指，在画布内使用路径，的图像剪裁功能是指，在画布内使用路径，只绘制该路径所包括区域内的图像，不绘制路径只绘制该路径所包括区域内的图像，不绘制路径外部的图像。外部的图像。l使用图像上下文对象的不带参数的使用图像上下文对象的不带参数的clip方法来实方法来实现现canvas元素的图像剪裁功能。该方法使用路径元素的

28、图像剪裁功能。该方法使用路径来对来对canvas画布设置一个剪裁区域。因此，必须画布设置一个剪裁区域。因此，必须先创建好路径。路径创建完成后，调用先创建好路径。路径创建完成后，调用clip方法方法设置剪裁区域。设置剪裁区域。HTML5+CSS3网页设计基础教程第5章 图形图像绘制第39页5.6.2 像素处理像素处理l像素处理需要用到像素处理需要用到getImageData和和putImageData两个方法，先用两个方法，先用getImageData复复制制canvas画布中的像素数据，然后对获取的像素画布中的像素数据，然后对获取的像素数据进行处理，最后再通过数据进行处理，最后再通过putIm

29、ageData将处将处理完的数据粘贴到理完的数据粘贴到canvas画布。画布。HTML5+CSS3网页设计基础教程第5章 图形图像绘制第40页5.6.3 组合图形组合图形lHTML5有有11种组合图形的方式，只要将其设置到种组合图形的方式，只要将其设置到context.globalCompositeOperation即可。使即可。使用方法为：用方法为：context.globalCompositeOperation=typeHTML5+CSS3网页设计基础教程第5章 图形图像绘制第41页5.6.4 混合图像混合图像l图像混合需要使用到图像混合需要使用到canvas的的globalComposi

30、teOperation属性，使用方法为：属性，使用方法为：context.globalCompositeOperation=属性值属性值HTML5+CSS3网页设计基础教程第5章 图形图像绘制第42页主要内容主要内容5.1 canvas元素基础元素基础 5.2 绘制简单图形绘制简单图形5.3 绘制贝塞尔曲线绘制贝塞尔曲线5.4 绘制变形图形绘制变形图形5.5 丰富图形效果丰富图形效果5.6 图像处理图像处理 5.7 绘制文字绘制文字5.8 本章小结本章小结 HTML5+CSS3网页设计基础教程第5章 图形图像绘制第43页5.7 绘制文字绘制文字l5.7.1 绘制填充文字绘制填充文字l5.7.2

31、 文字相关属性文字相关属性l5.7.3 绘制轮廓文字绘制轮廓文字l5.7.4 获取文字宽度获取文字宽度l5.7.5 文字绘制实战文字绘制实战HTML5+CSS3网页设计基础教程第5章 图形图像绘制第44页5.7.1 绘制填充文字绘制填充文字lfillText方法用填充的方式绘制字符串，该方法的使用格方法用填充的方式绘制字符串，该方法的使用格式如下：式如下：void fillText(text,x,y,maxWidth);HTML5+CSS3网页设计基础教程第5章 图形图像绘制第45页5.7.2 文字相关属性文字相关属性l在使用在使用canvas进行文字的绘制之前，可以先对该进行文字的绘制之前，

32、可以先对该对象的有关文字绘制的属性进行设置，这些属性对象的有关文字绘制的属性进行设置，这些属性如下：如下：font：指定正在绘制的文字的样式。如果要在绘制文：指定正在绘制的文字的样式。如果要在绘制文字时改变字体样式，只需要更改该属性的值即可。默字时改变字体样式，只需要更改该属性的值即可。默认的字体样式为认的字体样式为10px sans-serif。例如：。例如：context.font=20pt Times New Roman;textAlign：指定正在绘制的文字的对齐方式，有：指定正在绘制的文字的对齐方式，有left（左对齐）、（左对齐）、right（右对齐）、（右对齐）、center（居

33、中对齐）、（居中对齐）、start（如果文字从左往右排版则左对齐，如果从右往（如果文字从左往右排版则左对齐，如果从右往左排版则右对齐）和左排版则右对齐）和end（和（和start正好相反）正好相反）5种对齐种对齐方式，默认是方式，默认是start。HTML5+CSS3网页设计基础教程第5章 图形图像绘制第46页5.7.3 绘制轮廓文字绘制轮廓文字lstrokeText方法可以用轮廓方式绘制字符串，该方法可以用轮廓方式绘制字符串，该方法格式如下：方法格式如下：void strokeText(text,x,y,maxWidth);HTML5+CSS3网页设计基础教程第5章 图形图像绘制第47页5.

34、7.4 获取文字宽度获取文字宽度l可以使用图形上下文对象的可以使用图形上下文对象的measureText方法得方法得到文字的宽度，该方法的使用格式如下：到文字的宽度，该方法的使用格式如下：metrics=context.measureText(text);HTML5+CSS3网页设计基础教程第5章 图形图像绘制第48页5.7.5 文字绘制实战文字绘制实战l【例例5-22】绘制填充文字、轮廓文字，获绘制填充文字、轮廓文字，获取文字宽度并显示。取文字宽度并显示。HTML5+CSS3网页设计基础教程第5章 图形图像绘制第49页主要内容主要内容5.1 canvas元素基础元素基础 5.2 绘制简单图形

35、绘制简单图形5.3 绘制贝塞尔曲线绘制贝塞尔曲线5.4 绘制变形图形绘制变形图形5.5 丰富图形效果丰富图形效果5.6 图像处理图像处理 5.7 绘制文字绘制文字5.8 本章小结本章小结 HTML5+CSS3网页设计基础教程第5章 图形图像绘制第50页5.8 本章小结本章小结 l本章主要对本章主要对HTML5的绘图操作进行了详细讲解。的绘图操作进行了详细讲解。绘制图形时，在页面上放置一个绘制图形时，在页面上放置一个canvas元素，就元素，就相当于在页面上放置了一块画布，可以在这块画相当于在页面上放置了一块画布，可以在这块画布中进行绘制图形，但是并不是用鼠标进行画图，布中进行绘制图形，但是并不是用鼠标进行画图，实际上，实际上，canvas只是一块无色透明的区域，只是只是一块无色透明的区域，只是一个一个javascript API，需要通过，需要通过javascript编写绘编写绘制图形的脚本。在制图形的脚本。在canvas中，可以绘制简单图形、中，可以绘制简单图形、贝塞尔曲线、变形图形、图形效果、图像处理、贝塞尔曲线、变形图形、图形效果、图像处理、文字等。文字等。