HTML5中如何使用 <canvas>画布

本篇文章为大家展示了HTML5中如何使用 <canvas>画布，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。

HTML5 <canvas> 标签用于绘制图像（通过JavaScript）。<canvas> 元素本身并没有绘制能力，它相当于一块画布，需要使用js脚本来填充，实现绘绘制。

注意：

Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 都支持 <canvas> 标签的属性及方

法。但是Internet Explorer 8 及更早的IE版本不支持 <canvas> 元素。

<canvas>的使用

简单的说明，代码如下：

<canvas id="test-canvas" width="300" height="300">
    设置画布容器
</canvas>

1.获取容器信息

var canvas = document.getElementById('canvas');

2.配置绘制环境（必要项）

var test = canvas.getContext('2d');test.beginPath(); // 意思是开始绘制

3.绘制简单线条（举例）

test.moveTo(10,10); // 这里的第一个参数是x轴，第二个参数是y轴
test.lineTo（x,y）; // 下个一个点坐标

4.绘制结束

test.closePath();//必须添加
test.stroke() ;

<canvas>绘制图像的方式：

test.fill()  // 填充 
test.stroke();  // 绘制边框

注意：在绘制前，要先设置好它们的样式。

test.fillStyle//填充的样式

例如：

test.fillStyle = 'red';  //填充的颜色为红色
test.strokeStyle//边框样式
test.lineWidth = 8;  // 设置线条的宽度 为8

绘制空心矩形：

/**
*x  y  width  heigth  的参数  * 注意:绘制图像坐标以图像左上角为起点**/
test.strokeRect(100,100, 50,50);

绘制有实心矩形：

test.fillRect(100,100,100,100);   // 实心矩形

清空（在已绘制图像上操作）：

/**
* x:清除矩形起点横坐标   y:清除矩形起点纵坐标* width:清除矩形长度   height:清除矩形高度**/
context.clearRect(x,y,width,height) ;

示例如下：

test.fillRect(100,100,100,100);
test.clearRect(120,120,30,30);
test.stroke()//绘制结束

效果如下图：

绘制圆：

//
/**
*有6个参数 1.圆心的x轴坐标 2.圆心的y轴坐标 3.半径的长度
*4.开始的角度（straAngle)  5.结束的角度 （endAngle) *4.开始的角度（straAngle)  5.结束的角度 （endAngle) *6.是否是逆时针 true）为逆时针，(false)为顺时针*/
context.arc(250,250,100,0,Math.PI,true); 

线性渐变：

var lg = test.createLinearGradient(x起始位置,y起始位置,x结束位置,y结束位置);//  offset:设定的颜色离渐变结束点的偏移量(0~1)  color:绘制时要使用的颜色lg.addColorStop(offset,color)test.fillStyle = lg; //添加渐变条件完成后需将添加条件赋值给testtest.fillRect(100,100,100,100)//设置图片大小

圆形径向渐变：

/**1. xStart:发散开始圆心x坐标
*2. yStart:发散开始圆心y坐标*3. radiusStart:发散开始圆的半径 *4. xEnd:发散结束圆心的x坐标
*5.yEnd:发散结束圆心的y坐标*6.radiusEnd:发散结束圆的半径
**/
var rg = test.createRadialGradient(xStart,yStart,radiusStart,xEnd,yEnd,radiusEnd);

图形的旋转 rotate()　　　　

test.rotate(Math.PI/4); // 意思是坐标轴旋转的度数

图形的平移   translate()

test.translate(x,y); // x 轴的平移量 y 轴的平移量

图形的缩放 scale()

test.scale(x,y) ； // x 轴按照x比例进行缩放 y轴按照y比例进行缩放

图形的阴影:

test.shadowOffsetX = 5; // 阴影在 x 轴的偏移量

test.shadowOffsetY = 5; //阴影在 y 轴的偏移量

test.shadowColor = 'red'; // 设置阴影的颜色

test.shadowBlur = 100; // 模糊程度 （值越大越模糊）

图形的组合 :

test.globalCompositeOperation=type;

图形组合就是两个图形相互叠加了图形的表现形式,是后画的覆盖掉先画的呢，还是相互重叠的部分不显示等等，至于怎么显示就取决于type的值了 

type值：

source-over（默认值）:  在原有图形上绘制新图形

destination-over:    在原有图形下绘制新图形

source-in:      显示原有图形和新图形的交集，新图形在上，所以颜色为新图形的颜色
destination-in:    显示原有图形和新图形的交集，原有图形在上，所以颜色为原有图形的颜色
source-out:   只显示新图形非交集部分
destination-out:   只显示原有图形非交集部分
source-atop:     显示原有图形和交集部分，新图形在上，所以交集部分的颜色为新图形的颜色
destination-atop:     显示新图形和交集部分，新图形在下，所以交集部分的颜色为原有图形的颜色
lighter:    原有图形和新图形都显示，交集部分做颜色叠加
xor:   重叠飞部分不现实

copy:  只显示新图形 

上述内容就是HTML5中如何使用 <canvas>画布，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注亿速云行业资讯频道。