H5使用Canvas绘制

1.什么是CanvasCanvas是H5的一部分，它允许脚本语言动态渲染图像。Canvas定义了一个区域，其宽度和高度可以通过html属性定义，javascript代码可以访问这个区域，通过一套完整的绘图函数（API）在网页上进行动态渲染。2、Canvas可以做什么游戏：毫无疑问，游戏在HTML5领域有着举足轻重的作用。HTML5在基于网络的图像显示方面比Flash更立体、更复杂。图表制作：图表制作往往被人们所忽视，但无论是企业内部还是企业间的交流与合作，都离不开图表。现在有些开发者使用HTML/CSS来完成图标的制作。当然，使用SVG（ScalableVectorGraphics）来完成图表制作也是一个很好的方式。字体设计：字体的自定义渲染可以完全基于Web，使用HTML5技术实现。图形编辑器：图形编辑器可以100%基于Web实现。其他可以嵌入到网站中的内容：例如图形、音频、视频和许多其他可以更好地与网络集成并且不需要任何插件的元素。3.Canvas的基本使用要使用，首先要设置它的width和height属性来指定可绘制区域的大小。如果只指定宽度和高度而不添加样式或绘制图像，则该元素在页面上是不可见的。要绘制图像，我们首先需要获取画布并调用getContext()方法，然后传入上下文名称(2D/3D),2D有两个基本的绘制操作|填充(fillStyle)|描边(strokeStyle)|，这两个属性默认值为#000vardraw=document.getElementById('draw');//检查浏览器是否支持元素if(draw.getContext){varcontext=draw.getContext('2d');//给上下文画一个红色边框context.strokeStyle='#f00';//内部填充大草原的颜色context.fillStyle='#0f0';}使用toDataURL()方法可以导出绘制在元素上的图像vardraw=document.getElementById('draw');if(draw.getContext){//显示图片，toDataURL()获取是什么base64的字符串vardrawURL=draw.toDataURL('image/png');varimage=document.createElement('img');image.src=drawURL;document.body.appendChild(图片);绘制矩形主要有3个方法，fillRect()为矩形填充色，strokeRect()为矩形描边，clearRect()清除矩形。这三个方法都接收4个参数x/y/w/h，矩形左上角坐标和宽高vardraw=document.getElementById('draw');//确认浏览器是否支持元素if(draw.getContext){varcontext=draw.getContext('2d');//用绿色描边画一个红色矩形context.fillStyle='#f00';context.strokeStyle='#0f0';context.strokeRect(10,10,50,50);context.fillRect(10,10,50,50);//用红色描边画一个绿色矩形context.fillStyle='#0f0';context.strokeStyle='#f00';context.strokeRect(10,10,50,50);context.fillRect(10,10,50,50);//清除两个矩形重叠的小矩形context.clearRect(40,40,10,10);}绘制一条路径，通过它可以创建复杂的形状和线条。绘制路径首先要调用beginPath()方法，然后使用下面的方法实际绘制路径arc(x,y,radius,startAngle,endAngle,conterclockwise)(x,y)圆心坐标，半径radius,(startAngle,endAngle)开始角度和结束角度，逆时针顺时针(false)/逆时针(true)moveTo(x,y)将光标移动到(x,y)，不画线。可以用来修改所谓的前一点坐标*arcTo(x1,y1,x2,y2,radius)画一条从前一点到(x2,y2)的曲线，并通过(x1,y1)lineTo带a给定半径(x,y)从上一点到(x,y)画一条直线rect(x,y,width,height)从(x,y)画一个有宽和高的矩形。此方法绘制一个矩形路径，而不是strokeRect()和fillRect()绘制的单独形状//接下来绘制一个没有数字的时钟vardraw=document.getElementById('draw');if(draw.getContext){varcontext=draw.getContext('2d');//开始路径context.beginPath();//绘制外圆context.arc(100,100,99,0,2*Math.PI,false);//绘制内圆context.moveTo(194,100);context.arc(100,100,94,0,2*Math.PI,false);//绘制分针context.moveTo(100,100);context.lineTo(100,15);//绘制时针context.moveTo(100,100);context.lineTo(35,100);//描边路径context.stroke();context.strokeStyle='#f00';}6.绘制文字主要有两个方法，fillText()、strokeText()，都接收四个参数|text（要绘制的文字）|x|y|最大像素宽度（可选）|，这两个方法有如下三个属性作为基本字体的文字样式、字号、字体等textAlign文字对齐的方式|start|end|left|right|center|textBaseline文本的基线|top|hanging|middle|alphabetic|ideographic|bottom|//在表盘上绘制12个点context.font='bold12pxArial';context.textAlign='center';context.textBaseline='中间';context.fillText('12',100,20);7.Transformationrotate(angel)将图像绕原点旋转角度弧度scale(scaleX,scaleY)缩放图像，x*scaleX,y*scaleY默认为1translate(x,y)将坐标原点移动到(x,y)vardraw=document.getElementById('draw');if(draw.getContext){varcontext=draw.getContext('2d');//开始路径context.beginPath();//绘制外圆context.arc(100,100,99,0,2*Math.PI,false);//绘制内圆context.moveTo(194,100);context.arc(100,100,94,0,2*Math.PI,false);//变换原点context.translate(100,100);//旋转指针context.rotate(1)//绘制分针context.moveTo(0,0);context.lineTo(0,-85);//绘制时针context.moveTo(0,0);context.lineTo(-65,0);//画边路径context.stroke();context.strokeStyle='#f00';8.绘制图像，drawImage()varimg=document.getElementByTagNames('image')[0];context.drawImage(img,0,10,50,50,0,100,40,60);9个参数：待绘制图像的原图|x|y|w|h|目标图像|x|y|w|h|9。阴影和渐变阴影主要有以下属性值shadowColorshadowOffsetX：X轴阴影偏移shadowOffsetY：Y轴阴影偏移shadowBlur：模糊像素个数，默认0，不模糊varcontext=draw.getContext('2d');//设置影子上下文.shadowC颜色='rgba(210,210,210,.5)';context.shadowOffersetX='5';Gradient创建一个新的线性渐变createLinearGradient()方法，有四个参数|x1|y1|x2|y2|是起点坐标和终点坐标vargradient=context.createLinearGradient(30,30,70,70);gradient.addColorStop(0,'#fff');//0表示开始gradient.addColorStop(1,'#000');//1表示结束//使用定义的渐变属性context.fillStyle=gradient;//填充时放渐变context.fillRect(30,30,50,50);创建径向渐变createRadialGradient()，六个参数|x1|y2|radius1|x2|y2|radius2|分别是第一个圆的圆心和半径，第二个圆的圆心和半径。用法同线性渐变10.使用图像数据，可以通过getImageData()获取原始图像数据。参数|x|y|w|h|。每个ImageData对象都有三个属性，width/height/data，data是一个数组，里面存放的是每个像素的数据，每个元素的值在0-255之间varimgdata=context.getImageData(0,0,100,100);vardata=imgdata.data,red=data[0],green=data[1],blue=data[2],alpha=data[3];//实现一个灰色过滤器vardraw=document.getElementById('draw');if(draw.getContext){varcontext=draw.getContext('2d');varimg=document.getElementsByTagName('image')[0],imageData,data,i,len,average,red,green,blue,alpha;//绘制原图context.drawImage(img,0,0,100,100);//获取图像数据imageData=context.getImageData(0,0,img.width,img.height);data=imageData.data;for(i=0,len=data.length;i