HTML5的<canvas>标签怎么用

这篇文章主要介绍“HTML5的<canvas>标签怎么用”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“HTML5的<canvas>标签怎么用”文章能帮助大家解决问题。

　　<canvas>标签

　　在网页中使用canvas元素，像使用其他HTML标签一样简单，然后利用JavaScript脚本调用绘图API，绘制各种图形。canvas拥有多种绘制路径、矩形、圆形、字符及添加图形的方法。

　　利用<canvas>标签绘图基本流程

　　1、获取canvas对象

　　2、创建二维的绘图上下文对象

　　3、在canvas上绘制文字

　　链接：

　　绘制基本的图形

　　绘制直线：

　　moveTo（）方法用于创建新的子路径，并设置其起始点。lineTo（）方法则设置了直线路径的终点；而stroke（）方法用于沿该路径绘制一条直线，如：

　　绘制矩形

　　绘图API为绘制矩形提供了两个专用的方法：strokeRect（）和fillRect（），可分别用于绘制矩形边框和填充矩形区域。在绘制之前，往往需要先设置样式，然后才能进行绘制。其中，strokeStyle可设置矩形边框颜色，fillStyle可设置填充颜色，lineWidth可设置边框宽度。

　　链接：

　　绘制圆形

　　在canvas中，所有基本图形都是以路径为基础的，通常会调用linTo（）、rect（）和arc（）等方法设置一些路径。在最后使用fill（）或stroke（）方法进行绘制边框或填充区域时，都是参照这个路径来进行的。使用路径绘图基本分为如下3个步骤：

　　1、创建绘图路径。常用到beginPath（）和closePath（）方法，每次调用beginPath（）方法都会产生一个新的子路径。

　　2、设置绘图样式。使用strokeStyle属性设置边框颜色；使用lineWidth属性设置边框宽度；使用fllStyle属性设置填充颜色。

　　3、绘制图形。stroke（）方法绘制边框；fill（）方法绘制填充区域。

　　链接：

　　绘制三角形

　　绘制三角形同样需要通过绘制路径的方法来实现，基本步骤与绘制圆形差不多，如：

　　closePath（）方法习惯性地放在路径设置的最后一步，不要认为是路径设置的结束，因为在此之后，还可以继续设置路径。

　　链接：

　　图形组合

　　在canvas绘图中，可以通过globalCompositeOperation属性来设置如何在两个图形叠加的情况下组合颜色，用法如下：

　　参数value的合法值有12个，决定了12种图形组合的类型，默认值是source-over。12种组合类型如下：

　　1、copy：只绘制新图形，删除其他所有内容。

　　2、darker：在图形重叠的地方，颜色由两个颜色值相减后决定。

　　3、destination-atop：已有的内容只在它和新的图形重叠的地方保留，新图形绘制于内容之后。

　　4、destination-in：在新图形以及已有画布重叠的地方，已有内容都保留，所有其他内容成为透明的。

　　5、destination-out：在已有内容和新图形不重叠的地方，已有内容保留，所有其他内容成为透明的。

　　6、destination-over：新图形绘制于已有内容的后面。

　　7、lighter：在图形重叠的地方，颜色由两种颜色值的加值来决定。

　　8、source-atop：只有在新图形和已有内容重叠的地方，才绘制新图形。

　　9、source-in：只有在新图形和已有内容重叠的地方，新图形才绘制，所有其他内容成为透明的。

　　10、source-out：只有在和已有图形不重叠的地方，才绘制新图形。

　　11、source-over：新图形绘制于已有图形的顶部，这是默认行为。

　　12、xor：在重叠和正常绘制的其他地方，图形都成为透明的。

　　函数RectArc（context）是用来绘制组合图形的，使用方法translate（）移动到不同的位置。

　　链接：

　　绘制曲线

　　在canvas中，绘图API提供了多种曲线的绘制方法，主要的曲线绘制方法有arc（）、arcTo（）、quardraticCurveTo（）和bezierCureveTo（）。

　　使用arc（）方法，如：

　　假如在绘制圆弧的时候用closePath（）闭合绘制路径，那么就会生成一个半圆。

　　链接：

　　使用arcTo（）方法：

　　arcTo（）方法使使用切线的方法绘制弧线，使用两个目标点和一个半径，为当前的子路径添加一条弧线。与arc（）方法相比，同样是绘制弧线，绘制思路和侧重点不同。

　　链接：

　　使用quadraticCurveTo（）方法：

　　二次样条曲线是曲线的一种，canvas绘图API专门提供了此曲线的绘制方法。quadraticCurveTo（）方法为当前的子路径添加一条二次样条曲线。

　　链接：

　　使用bezierCurveTo（）方法：

　　贝塞尔曲线是应用于二维图形应用程序中的数学曲线。与二次样条曲线相比，贝塞尔曲线使用了两个控制点，从而可以创建更复杂的曲线图形。

　　链接：

　　绘制文本

　　通过<canvas>标签，可以使用填充的方法绘制文本，也可以使用描边的方法绘制文本，在绘制文本之前，还可以设置文字的字体样式和对齐方式。绘制文本有两种方法，即填充绘制方法fillText（）和描边绘制方法strokeText（），如：

　　有些时候，开发人员需要知道所绘制的文本宽度，以方便进行布局。绘图API挺了获取绘制文本宽度的方法，measureText（）方法就是用来获取文本的宽度。

　　链接：

　　创建对象阴影：

　　链接：

　　绘制线性渐变：

　　使用渐变需要三个步骤：首先是创建渐变对象；其次是设置渐变颜色和过渡方式；最后将渐变对象赋值给填充样式或描边样式。

　　线性渐变是指起始点和结束点之间线性的内插颜色值，设置渐变颜色需要在渐变对象上使用addColorStop（）方法，在渐变中的某一点添加一个颜色变化。如：

　　链接：

　　绘制径向渐变：

　　径向渐变是指两个指定圆的圆周之间放射性地表现颜色过渡效果。如：

　　链接：

　　绘制图像：

　　使用drawImage（）方法可以将图形添加到canvas画布中，即绘制一幅图像，有3种方法。

　　1、把整个图像复制到画布中，将其放置到指定的左上角坐标位置，并且将每个图像像素映射成画布坐标系统的一个单元，如：

　　2、把整个图像复制到画布中，但是允许用画布单位来指定想要的图像宽度和高度，如：

　　3、使用复杂，暂且不提。

　　裁切图形：

　　在路径绘图中使用了两种绘图方法，即用于绘制线条的stroke（）方法和用于填充区域的fill（）方法。关于路径的处理，还有一种方法叫作裁切方法clip（）。

　　裁切的区域是通过路径来确定的，和绘制线条的方法和填充区域的方法一样，也需要预先确定绘图路径，再执行裁切区域路径方法clip（），这样就确定了裁切区域，如：

关于“HTML5的<canvas>标签怎么用”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注亿速云行业资讯频道，小编每天都会为大家更新不同的知识点。