首页 > 代码库 > HTML5中CANVAS

HTML5中CANVAS

1.  HTML5 Canvas历史

Canvas的概念最初是由苹果公司提出的,用于在Mac OS X WebKit中创建控制板部件(dashboard widget)。在Canvas出现之前,开发人员若要在浏览器中使用绘图API,只能使用Adobe的Flash和SVG(Scalable Vector Graphics,可伸缩矢量图形)插件,或者只有IE才支持的VML(Vector Markup Language,矢量标记语言),以及其他一些稀奇古怪的JavaScript技巧。

假设我们要在没有canvas元素的条件下绘制一条对角线--听起来似乎很简单,但实际上如果没有一套二维绘图API的话,这会是一项相当复杂的工作。HTML5 Canvas能够提供这样的功能,对浏览器端来说此功能非常有用,因此Canvas被纳入了HTML5规范。

起初,苹果公司曾暗示可能会为WHATWG(Web Hypertext Application Technology Working Group,Web超文本应用技术工作组)草案中的Canvas规范申请知识产权,这在当时引起了一些Web标准化追随者的关注。不过,苹果公司最终还是按照W3C的免版税专利权许可条款公开了其专利。

"Canvas本质上是一个位图画布,其上绘制的图形是不可缩放的,不能像SVG图像那样可以被放大缩小。此外,用Canvas绘制出来的对象不属于页面DOM结构或者任何命名空间--这点被认为是一个缺陷。SVG图像却可以在不同的分辨率下流畅地缩放,并且支持点击检测(能检测到鼠标点击了图像上的哪个点)。

既然如此,为什么WHATWG的HTML5规范不使用SVG呢?尽管Canvas有明显的不足,但HTML Canvas API有两方面优势可以弥补:首先,不需要将所绘制图像中的每个图元当做对象存储,因此执行性能非常好;其次,在其他编程语言现有的优秀二维绘图API的基础上实现Canvas API相对来说比较简单。毕竟,二鸟在林不如一鸟在手。

2.  Canvas到底是什么

在网页上使用canvas元素时,它会创建一块矩形区域。默认情况下该矩形区域宽为300像素,高为150像素,但也可以自定义具体的大小或者设置canvas元素的其他特性。一下代码是可放到HTML页面中的最基本的canvas元素。

<canvas></canvas> 

  在页面中加入了canvas元素后,我们便可以通过JavaScript来自由地控制它。可以在其中添加图片、线条以及文字,也可以在里面绘图,甚至还可以加入高级动画。

  大多数主流操作系统和框架支持的二维绘制操作,HTML5 Canvas API都支持。如果你在近年来曾经有过二维图像编程的经验,那么会对HTML5 Canvas API感觉非常顺手,因为这个API就是参照既有系统设计的。如果没有这方面经验,则会发现与这么多年来一直使用的图片加CSS开发Web图形的方式比起来,Canvas的渲染系统有多么强大。

  使用canvas编程,首先要获取其上下文(context)。接着在上下文中执行动作,最后将这些动作应用到上下文中。可以将canvas的这种编辑方式想象成为数据库事务:开发人员先发起一个事务,然后执行某些操作,最后提交事务。

3.  什么情况下不用Canvas

尽管canvas元素功能非常强大,用处也很多,但在某些情况下,如果其他元素已经够用了,就不应该再使用canvas元素。例如,用canvas元素在HTML页面中动态绘制所有不同的标题,就不如直接使用标题样式标签(H1、H2等),它们所实现的效果是一样的。

 

提示:以下所有实验请使用的浏览器为Google Chrome 33.0.1701.0

4.  开发工具HBuilder

HBuilder是DCloud推出的一款支持HTML5的Web开发IDE。快,是HBuilder的最大优势,通过完整的语法提示和代码输入法、代码块等,大幅提升HTML、js、css的开发效率。同时,它还包括最全面的语法库和浏览器兼容性数据。

5.  基础知识

context:一直觉得这个翻译成“上下文”,context是一个封装了很多绘图功能的对象,获取这个对象的方法是

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

注:html5暂时不支持3d功能。

 

canvas元素绘制图像的时候有两种方法,分别是

context.fill()//填充

context.stroke()//绘制边框

 

style:在进行图形绘制前,要设置好绘图的样式

      context.fillStyle//填充的样式

      context.strokeStyle//边框样式

context.lineWidth //图形边框宽度

 

颜色的表示方式:

       直接用颜色名称:"red" "green" "blue"

       十六进制颜色值: "#EEEEFF"

       rgb(1-255,1-255,1-255)

       rgba(1-255,1-255,1-255,透明度)

1.  Canvas绘图

6.1绘制矩形

语法:

fillRect(x,y,width,height) 

strokeRect(x,y,width,height)

参数说明:

x:矩形起点横坐标

y:矩形起点纵坐标

width:矩形长度

height:矩形高度

代码:

function drawRect() {    var canvas = document.getElementById("mycanvas");    if (canvas == null)        return false;    var context = canvas.getContext("2d");        //实践表明在不设施fillStyle下的默认fillStyle=black    context.fillRect(0, 0, 100, 100);        //实践表明在不设施strokeStyle下的默认strokeStyle=black    context.strokeRect(120, 0, 100, 100);    //设置纯色    context.fillStyle = "red";    context.strokeStyle = "blue";    context.fillRect(0, 120, 100, 100);    context.strokeRect(120, 120, 100, 100);    //设置透明度实践证明透明度值>0,<1值越低,越透明,值>=1时为纯色,值<=0时为完全透明    context.fillStyle = "rgba(255,0,0,0.2)";    context.strokeStyle = "rgba(255,0,0,0.2)";    context.fillRect(240,0 , 100, 100);    context.strokeRect(240, 120, 100, 100);}


 

6.2清除矩形区域

语法:

clearRect(x,y,width,height) 

参数说明:

x:清除矩形起点横坐标

y:清除矩形起点纵坐标

width:清除矩形长度

height:清除矩形高度

代码:

function clearRect() {    var canvas = document.getElementById("mycanvas");    if (canvas == null)        return false;    var context = canvas.getContext("2d");        //实践表明在不设施fillStyle下的默认fillStyle=black    context.fillRect(0, 0, 100, 100);    //实践表明在不设施strokeStyle下的默认strokeStyle=black    context.strokeRect(120, 0, 100, 100);    //设置纯色    context.fillStyle = "red";    context.strokeStyle = "blue";    context.fillRect(0, 120, 100, 100);    context.strokeRect(120, 120, 100, 100);    //设置透明度实践证明透明度值>0,<1值越低,越透明,值>=1时为纯色,值<=0时为完全透明    context.fillStyle = "rgba(255,0,0,0.2)";    context.strokeStyle = "rgba(255,0,0,0.2)";    context.fillRect(240, 0, 100, 100);    context.strokeRect(240, 120, 100, 100);    // 清除矩形    context.clearRect(50, 50, 240, 120);}


 

6.3圆弧

语法:

arc(x, y, radius, starAngle,endAngle, anticlockwise)

参数说明:

x:圆心的x坐标

y:圆心的y坐标

radius:圆半径

straAngle:开始角度

endAngle:结束角度

anticlockwise:是否逆时针(true)为逆时针,(false)为顺时针

代码:

function drawArc() {    var canvas = document.getElementById("mycanvas");    if (canvas == null) {        return false;    }    var context = canvas.getContext('2d');    context.beginPath();    context.arc(200, 150, 100, 0, Math.PI * 2, true);    context.closePath();    context.fillStyle = 'rgba(0,255,0,0.25)';    context.fill();}


 

6.4路径

语法:

beginPath()   //绘制路径的开始点

closePath()   //绘制路径的结束点

代码:

function drawPath() {    var canvas = document.getElementById("mycanvas");    if (canvas == null) {        return false;    }    var context = canvas.getContext('2d');    var n = 0;       //左侧1/4圆弧    context.beginPath();    context.arc(100, 150, 50, 0, Math.PI/2 , false);    context.fillStyle = 'rgba(255,0,0,0.25)';    context.fill();    context.strokeStyle = 'rgba(255,0,0,0.25)'    context.closePath();    context.stroke();    //右侧1/4圆弧    context.beginPath();    context.arc(300, 150, 50, 0, Math.PI*1.5 , true);    context.fillStyle = 'rgba(0,255,0,0.25)';    context.fill();    context.strokeStyle = 'rgba(0,255,0,0.25)';    context.closePath();    context.stroke();}


 

6.5 绘制线段

语法:

moveTo(x,y)

lineTo(x,y)

参数说明:

x:x坐标

y:y坐标

每次画线都从moveTo的点到lineTo的点,如果没有moveTo那么第一次lineTo的效果和moveTo一样,每次lineTo后如果没有moveTo,那么下次lineTo的开始点为前一次lineTo的结束点。

代码:

function drawLine() {    var canvas = document.getElementById("mycanvas");    if (canvas == null)        return false;    var context = canvas.getContext("2d");        context.strokeStyle = "rgb(250,0,0)";    context.fillStyle = "rgb(250,0,0)"        //实验证明第一次lineTo的时候和moveTo功能一样    context.lineTo(100, 100);        //之后的lineTo会以上次lineTo的节点为开始    context.lineTo(200, 200);    context.lineTo(200, 100);    context.moveTo(200, 50);    context.lineTo(100,50);    context.stroke();}


 

6.6 贝塞尔曲线

语法:

bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)

参数说明:

cp1x:第一个控制点x坐标

cp1y:第一个控制点y坐标

cp2x:第二个控制点x坐标

cp2y:第二个控制点y坐标

x:终点x坐标

y:终点y坐标

代码:

function drawBezier() {    var canvas = document.getElementById("mycanvas");    if (canvas == null) {        return false;    }    var context = canvas.getContext("2d");    context.moveTo(50, 50);    context.bezierCurveTo(50, 50,150, 50, 150, 150);    context.stroke();        context.moveTo(50, 50);    context.lineTo(150, 50);    context.lineTo(150, 150);    context.stroke();}


 

6.7 贝塞尔二次曲线

语法:

quadraticCurveTo(qcpx,qcpy,qx,qy)

参数说明:

qcpx:二次样条曲线控制点x坐标

qcpy:二次样条曲线控制点y坐标

qx:二次样条曲线终点x坐标

qy:二次样条曲线终点y坐标

代码:

function drawQuadratic() {    var canvas = document.getElementById("mycanvas");    if (canvas == null) {        return false;    }    var context = canvas.getContext("2d");    context.moveTo(150, 150);    context.quadraticCurveTo(150, 250, 250, 250);    context.stroke();        context.moveTo(150, 150);    context.lineTo(150, 250);	context.lineTo(250, 250);	context.stroke();}


 

6.8 线性渐变

语法:

createLinearGradient(xStart,yStart,xEnd,yEnd)

addColorStop(offset,color)

参数说明:

xstart:渐变开始点x坐标

ystart:渐变开始点y坐标

xEnd:渐变结束点x坐标

yEnd:渐变结束点y坐标

 

offset:设定的颜色离渐变结束点的偏移量(0~1)

color:绘制时要使用的颜色

技术分享

代码:

function drawLinear() {      var canvas = document.getElementById("mycanvas");      if (canvas == null) {          return false;      }      var context = canvas.getContext('2d');    	  var g1 = context.createLinearGradient(0, 0, 0, 300);      g1.addColorStop(0, 'rgb(255,0,0)'); //红        g1.addColorStop(0.5, 'rgb(0,255,0)');//绿      g1.addColorStop(1, 'rgb(0,0,255)'); //蓝      //可以把lg对象理解成GDI中线性brush      context.fillStyle = g1;      //再用这个brush来画正方形      context.fillRect(0, 0, 400, 300);  }


 

6.9 径向渐变

语法:

createRadialGradient(xStart,yStart,radiusStart,xEnd,yEnd,radiusEnd)

addColorStop(offset,color)

参数说明:

xStart:发散开始圆心x坐标

yStart:发散开始圆心y坐标

radiusStart:发散开始圆的半径

xEnd:发散结束圆心的x坐标

yEnd:发散结束圆心的y坐标

radiusEnd:发散结束圆的半径

 

offset:设定的颜色离渐变结束点的偏移量(0~1)

color:绘制时要使用的颜色

代码:

function drawRadial() {    var canvas = document.getElementById("mycanvas");    if (canvas == null) {        return false;    }    var context = canvas.getContext('2d');        var g1 = context.createRadialGradient(200, 150, 0, 200, 150, 100);    g1.addColorStop(0.1, 'rgb(255,0,0)');      g1.addColorStop(1, 'rgb(50,0,0)');    context.fillStyle = g1;    context.beginPath();    context.arc(200, 150, 100, 0, Math.PI * 2, true);    context.closePath();    context.fill();  	var g1 = context.createRadialGradient(100, 150, 10, 300, 150, 50);    g1.addColorStop(0.1, 'rgb(255,0,0)');    g1.addColorStop(0.5, 'rgb(0,255,0)');    g1.addColorStop(1, 'rgb(0,0,255)');    context.fillStyle = g1;    context.fillRect(0, 0, 400, 300);}


 

6.10 图形变形

语法:

    平移 translate(x,y)

参数说明:

x:坐标原点向x轴方向平移x

y:坐标原点向y轴方向平移y

语法:

缩放 scale(x,y)

参数说明:

x:x坐标轴按x比例缩放

y:y坐标轴按y比例缩放

语法:

旋转 rotate(angle)

参数说明:

angle:坐标轴旋转x角度(角度变化模型和画圆的模型一样)

代码:

function changeGraph() {    var canvas = document.getElementById("mycanvas");    if (canvas == null) {        return false;    }    var context = canvas.getContext('2d');  	context.save(); //保存了当前context的状态    context.fillStyle = "#EEEEFF";    context.fillRect(0, 0, 400, 300);    context.fillStyle = "rgba(255,0,0,0.1)";    //平移 缩放 旋转  1 2 3            context.translate(100, 100);    context.scale(0.5, 0.5);    context.rotate(Math.PI / 4);    context.fillRect(0, 0, 100, 100);    context.restore(); //恢复到刚刚保存的状态,保存恢复只能使用一次  	context.save(); //保存了当前context的状态    //实验表明应该移动的是坐标轴    //实验表明缩放的是坐标轴比例    //实验表明旋转的是坐标轴    //综合上述,因此平移 缩放 旋转 三者的顺序不同都将画出不同的结果}


 

6.11 图形阴影

语法:

shadowOffsetX :阴影的横向位移量(默认值为0)
shadowOffsetY :阴影的纵向位移量(默认值为0)
shadowColor :阴影的颜色
shadowBlur :阴影的模糊范围(值越大越模糊)

代码:

function drawShadow() {    var canvas = document.getElementById("mycanvas");    if (canvas == null) {        return false;    }    var context = canvas.getContext('2d');  	    context.shadowOffsetX = 20;    context.shadowOffsetY = 20;    context.shadowColor = 'rgba(100,100,100,0.5)';    context.shadowBlur = 2.5;    context.fillStyle = 'rgba(255,0,0,0.5)';    context.fillRect(100, 100, 200, 100);}


 

6.12 绘制文字

语法:

填充文字:fillText(text,x,y)  

绘制文字轮廓: strokeText(text,x,y)

计算字体长度(px): measureText(text)

参数说明:

text:要绘制的文字

    x:文字起点的x坐标轴

    y:文字起点的y坐标轴

代码:

function drawText() {      var canvas = document.getElementById("mycanvas");      if (canvas == null) {          return false;      }      var context = canvas.getContext('2d');    	      context.fillStyle = "#EEEEFF";    	  context.fillRect(0,0,400,300);	  context.fillStyle = "#00f";    	  context.font = "italic 30px sans-serif";	  //填充字符串    	  var txt="fill示例文字";	  context.fillText(txt, 0, 30);	  var length=context.measureText(txt);      context.fillText("长" + length.width + "px", 0, 80);	  context.font = "bolid 30px sans-serif";    	  txt = "stroke示例文字";    	  length = context.measureText(txt);    	  context.strokeText(txt,0,130);	  context.fillText("长" + length.width + "px", 0, 180);}


 

6.13 保存和恢复状态

语法:

保存save()

恢复restore()

使用说明:

save()调用该方法,会保存当前context的状态、属性(把他理解成游戏存档);restore()调用该方法就能恢复到save时候context的状态、属性(游戏回档)

代码:

function saveAndRestore() {    var canvas = document.getElementById("mycanvas");    if (canvas == null) {        return false;    }    var context = canvas.getContext('2d');  	  	context.fillStyle = "red";    context.save(); //保存了当前context的状态    context.fillStyle = "black";    context.fillRect(0, 0, 100, 100);    context.restore();//恢复到刚刚保存的状态    context.fillRect(0,120,100,100);}


 

6.14 保存文件

语法:

toDataURL(MIME)

使用说明:

在canvas中绘出的图片只是canvas标签而已,并非是真正的图片,是不能右键,另存为的,我们可以利用canvas.toDataURL()这个方法把canvas绘制的图形生成一幅图片,生成图片后,就能对图片进行相应的操作了。

代码:

function saveFile() {    var canvas = document.getElementById("mycanvas");    if (canvas == null) {        return false;    }    var context = canvas.getContext('2d');  	  	context.fillStyle = "rgb(0,0,225)";  	context.fillRect(0, 0, canvas.width, canvas.height);  	context.fillStyle = "rgb(255,255,0)";  	context.fillRect(10, 20, 50, 50);  	  	//把图像保存到新的窗口var w = window.open(canvas.toDataURL("image/jpeg"),"smallwin","width=400,height=350");}


 

6.15 图形组合

语法:

globalCompositeOperation=type

使用说明:

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

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

source-in:显示原有图形和新图形的交集,新图形在上,所以颜色为新图形的颜色

destination-in:显示原有图形和新图形的交集,原有图形在上,所以颜色为原有图形的颜色

source-out:只显示新图形非交集部分

destination-out:只显示原有图形非交集部分

source-atop:显示原有图形和交集部分,新图形在上,所以交集部分的颜色为新图形的颜色

destination-atop:显示新图形和交集部分,新图形在下,所以交集部分的颜色为原有图形的颜色

lighter:原有图形和新图形都显示,交集部分做颜色叠加

xor:重叠飞部分不现实

copy:只显示新图形

技术分享

代码:

function graphComb() {    var canvas = document.getElementById("mycanvas");    if (canvas == null) {        return false;    }    var context = canvas.getContext('2d');  	var oprtns = new Array(      "source-over",      "destination-over",      "source-in",      "destination-in",      "source-out",      "destination-out",      "source-atop",      "destination-atop",      "lighter",      "xor",               "copy"      );   var i = 0;//组合效果编号   //结合setinterval动态显示组合   var interal = setInterval(function () {       if (i == 10) {           i=0;       }       else {           i++;       }       //蓝色矩形       context.fillStyle = "blue";       context.fillRect(10, 10, 60, 60);       //设置组合方式        context.globalCompositeOperation = oprtns[i];       //设置新图形(红色圆形)       context.beginPath();       context.fillStyle = "red";       context.arc(60, 60, 30, 0, Math.PI * 2, false);       context.fill();  }, 5000);}


 

6.16 绘制图像

语法:

绘图drawImage

    图形平铺createPattern(image,type)

    图形裁剪 clip()

像素处理getImageData(sx,sy,sw,sh)

参数说明:

drawImage(image,x,y)

image:Image对象var img=new Image(); img.src=http://www.mamicode.com/"url(...)";

x:绘制图像的x坐标

y:绘制图像的y坐标

drawImage(image,x,y,w,h)

image:Image对象var img=new Image(); img.src=http://www.mamicode.com/"url(...)";

x:绘制图像的x坐标

y:绘制图像的y坐标

w:绘制图像的宽度

h:绘制图像的高度

drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh):选取图像的一部分矩形区域进行绘制

image:Image对象var img=new Image(); img.src=http://www.mamicode.com/"url(...)";

sx:图像上的x坐标

sy:图像上的y坐标

sw:矩形区域的宽度

sh:矩形区域的高度

dx:画在canvas的x坐标

dy:画在canvas的y坐标

dw:画出来的宽度

dh:画出来的高度

createPattern(image,type)

image:Image对象var img=new Image(); img.src=http://www.mamicode.com/"url(...)";

no-repeat:不平铺

repeat-x:横方向平铺

repeat-y:纵方向平铺

repeat:全方向平铺

clip()只绘制封闭路径区域内的图像,不绘制路径外部图像,用的时候先创建裁剪区域,再绘制图像。

getImageData(sx,sy,sw,sh)

    sx:cavas的x轴坐标点

    sy:canvas的y轴坐标点

    sw:距离x的宽度

    sh:距离y的高度

    可以利用context.getImageData返回的一个像素颜色数组,顺序是所取像素范围的从左到右,从上到下,数组的元素是(所有图形,包括图片,和绘制的图形)每个像素的rgba。

 

 

HTML5中CANVAS