首页 > 代码库 > 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