码迷,mamicode.com
首页 > Web开发 > 详细

HTML5 中的 canvas 画布

时间:2016-09-08 22:59:35      阅读:210      评论:0      收藏:0      [点我收藏+]

标签:

---恢复内容开始---

在HTML5中新添加的元素,canvas 现在支持 IE9+的版本

 注意:HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成.

<canvas> 标签只是图形容器,您必须使用脚本来绘制图形。

在使用canvas之前应该给用户说明必须是ie9+的版本,否则不支持。

 技术分享

绘制简单的直线

1.先获取画布

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

2.配置绘制的环境

var context = canvas.getContext(‘2d‘);

3.在绘制之前,加上

 context.beginPath(); // 意思是开始绘制

4.设置起点 

context.moveTo(10,10); // 这里的第一个参数是x轴,第二个参数是y轴

5.设置下一个点,

context.lineTo(x,y); // 下个一个点坐标

6. 结束绘制

context.closePath();

context.stroke() ;

 

canvas 元素在绘制图像是有两种方法:

context.fill()  // 填充 

context.stroke();  // 绘制边框

但是在绘制前,要先设置好它们的样式

 context.fillStyle//填充的样式

例如:context.fillStyle = ‘pink‘;  //填充的颜色为粉色

 context.strokeStyle//边框样式

 

 context.lineWidth = 10;  // 设置线条的宽度 为10

 canvas 元素在绘制图像是有两种路径

 A.context.beginPath()  开始绘制

 B.context.closePath()   结束绘制

 1、系统默认在绘制第一个路径的开始点为beginPath.

 2、如果画完前面的路径没有重新指定beginPath,那么画第其他路径的时候会将前面最近指定的beginPath后的全部路径重新绘制.

  如果难理解,那么你只要记住每次画路径都在前后加context.beginPath()   和context.closePath()就行。

 绘制矩形 

canvas 的原点坐标为左上角。

context.strokeRect(100,100, 50,50);// x  y  width  heigth  的参数   画出来的是 空心矩形

技术分享 

context.fillRect(100,100,100,100);   // 画出来的 实心矩形

 技术分享

 

有绘制就有清空   context.clearRect(x,y,width,height) ;

// x:清除矩形起点横坐标   y:清除矩形起点纵坐标     width:清除矩形长度   height:清除矩形高度

技术分享

 

技术分享

 

绘制圆

context.arc(250,250,100,0,Math.PI,true);  // 有6个参数   Math.PI 是180度

第一个 : 圆心的x轴坐标        第四个: 开始的角度(straAngle)

第二个 : 圆心的y轴坐标    第五个: 结束的角度 (endAngle)

第三个 : 半径的长度     第六个: 是否是逆时针  true)为逆时针,(false)为顺时针

context.arc(200,200,50,0,Math.PI*0.5,true);  
context.stroke();   // 下面有图片

 技术分享

 

 线性渐变

var lg = context.createLinearGradient(x起始位置,y起始位置,x结束位置,y结束位置);

线性渐变颜色  lg.addColorStop(offset,color)  //  offset:设定的颜色离渐变结束点的偏移量(0~1)    color:绘制时要使用的颜色 

技术分享

 

技术分享

 径向渐变

 var rg = context.createRadialGradient(xStart,yStart,radiusStart,xEnd,yEnd,radiusEnd);

1. xStart:发散开始圆心x坐标   2. yStart:发散开始圆心y坐标      3. radiusStart:发散开始圆的半径  

4. xEnd:发散结束圆心的x坐标  5.yEnd:发散结束圆心的y坐标      6.radiusEnd:发散结束圆的半径 

 径向渐变颜色  rg.addColorStop(offset,color) 

 

 技术分享

技术分享

 

 图形的旋转 rotate()    

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

 图形的平移   translate()

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

 图形的缩放 scale()

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

技术分享

 

图形的阴影  shadow() 

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

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

context.shadowColor = ‘red‘;  // 设置阴影的颜色

 context.shadowBlur = 100;   // 模糊程度  (值越大越模糊)

技术分享

 图形的组合  context.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 画布

标签:

原文地址:http://www.cnblogs.com/Sabo-dudu/p/5854573.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!