投稿 资料上传 搜索
您现在的位置是: 首页 > 文章 > 正文

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; //添加渐变条件完成后需将添加条件赋值给test

test.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:  只显示新图形 

 


转载于:

文章标签:
阿里云服务器采购季
给作者打赏,鼓励TA抓紧创作!
评论