HTML5中如何使用<canvas>画布
本篇文章为大家展示了HTML5中如何使用
成都创新互联公司成都网站建设按需搭建网站,是成都网站设计公司,为轻质隔墙板提供网站建设服务,有成熟的网站定制合作流程,提供网站定制设计服务:原型图制作、网站创意设计、前端HTML5制作、后台程序开发等。成都网站建设热线:028-86922220
HTML5
注意:
Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 都支持
法。但是Internet Explorer 8 及更早的IE版本不支持
简单的说明,代码如下:
设置画布容器
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() ;
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中如何使用
新闻标题:HTML5中如何使用<canvas>画布
转载来于:http://myzitong.com/article/jchpdh.html