Canvas2D基础

Canvas2D基础什么是Canvas是H5中最流行的元素。它在页面上绘制一个区域，并使用JS在其上绘制图形。最初由苹果公司提出，各大浏览器厂商也都不同程度地实现了。2D上下文和3D上下文（WebGL）在canvas中指定，目前大多数浏览器都支持2D上下文。WebGL的发展还比较缓慢。基本使用1.toDataURL()将绘制的图像输出为图片//获取图像的数据URIvarimgURI=drawing.toDataURL("image/png");//显示图像varimage=document.createElement("img");image.src=imgURI;document.body.appendChild(图像);2.原点是基于canvas元素的左上角3.2DContextfill和strokeRectangles(矩形)的两个基本绘制操作1.fillRect()context.fillRect(10,10,50,50);//画一个半透明的蓝色矩形context.fillStyle="rgba(0,0,255,0.5)";context.fillRect(30,30,50,50);2、strokeRect()//画一个红色轮廓的矩形context.strokeStyle="#ff0000";context.strokeRect(10,10,50,50);//绘制一个半透明的蓝色轮廓矩形context.strokeStyle="rgba(0,0,255,0.5)";context.strokeRect(30,30,50,50);3.clearRect()//绘制红色矩形context.fillStyle="#ff0000";context.fillRect(10,10,50,50);//绘制一个半透明的蓝色矩形context.fillStyle="rgba(0,0,255,0.5)";context.fillRect(30,30,50,50);//清除一个与prev重叠的矩形iousrectanglescontext.clearRect(40,40,10,10);DrawingPaths1，如何绘制表盘vardrawing=document.getElementById("drawing");//确保完全支持if(drawing.getContext){varcontext=drawing.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);//从最后绘制的点到(100,15)绘制一条线//绘制时针context.moveTo(100,100);context.lineTo(35,100);//strokethepathcontext.stroke();}2.判断一个坐标点是否在绘制路线上context.isPointInPath(100,100)//trueDrawingText1,fillText(),strokeText()之后很少使用2或3属性font,textAlign,textBaseline3,Democontext.font="bold14pxArial";context.textAlign="center";context.textBaseline="middle";context.fillText("12",100,20);//开始对齐context.textAlign="start";context.fillText("12",100,40);//结束对齐context.textAlign="end";context.fillText("12",100,60);4.使用measureText()可以测量文字大小//如果文字长度大于140，字体会缩小varfontSize=100;context.font=fontSize+"pxArial";while(context.measureText("Helloworld!").width>140){fontSize--;context.font=fontSize+"pxArial";}context.fillText("Helloworld!",10,10);context.fillText("字体大小为"+fontSize+"px",10,50);Transformations1.图像变换方法rotate(angle)scale(scaleX,scaleY)translate(x,y)transform(m1_1,m1_2,m2_1,m2_2,dx,dy)setTransform(m1_1,m1_2,m2_1,m2_2,dx,dy)2.可以使用translate重新定义原点的位置，画圆的时候可以将原点位置移动到圆心，在定位圆的过程中比较方便3.context.rotate注意坐标轴是旋转的DrawingImages图片是从当前canvasd坐标(10,10)的位置开始绘制插入的（注意如果画布放不下图片，则不能插入图片）varimage=document.images[0];context.drawImage(图像,10,10);在指定区域内插入——在从(10,10)开始的区域内执行绘制图像上下文，宽度为90，高度为90。drawImage(image,10,10,90,90)绘制的部分图像上的指定区域在画布中插入指定区域（相当于将原图的一部分裁剪到画布中）//从图像上的（0,10）开始，将宽150，高385的区域插入到画布中画布从(0,100)开始，宽度为40，context.drawImage(image,0,10,150,385,0,100,40,60)在高度为60的区域；注意，如果插入的图片在其他域名下，shadows会报错DEMO:vardrawing=document.getElementById("drawing");varcontext=drawing.getContext("2d");context.shadowOffsetX=5;context.shadowOffsetY=5;context.shadowBlur=4;context.shadowColor="rgba(0,0,0,0.5)";//绘制红色矩形context.fillStyle="#ff0000";context.fillRect(10,10,50,50);//绘制蓝色矩形context.fillStyle="rgba(0,0,255,1)";context.fillRect(30,30,50,50);Gradientsgradientscolorlineargradientvargradient=context.createLinearGradient(30,30,80,80);gradient.addColorStop(0,"white");gradient.addColorStop(1,"black");context.fillStyle=gradient;context.fillRect(30,30,50,50);vargradient=context.createRadialGradient(55,55,10,55,55,30);gradient.addColorStop(0,"white");gradient.addColorStop(1,"black");context.fillStyle=gradient;context.fillRect(30,30,50,50);Patternspattern是图像的重复图案，同css"repeat","repeat-x","repeat-y",no-repeat"varcontext=drawing.getContext("2d");varimage=document.images[0],pattern=context.createPattern(image,"repeat");//画一个矩形context.fillStyle=pattern;//imagerepeatpatternisstillfrom(0,0)startcontext.fillRect(30,0,150,150);//意思是画一个矩形，让矩形区域显示图片重复模式，并不是说图片重复是从start开始pointofdrawingtherectangle是的，渐变也是一样WorkingwithImageData图像原始数据可以用来做滤镜效果，具体见www.html5rocks.com/en/tutorials/canvas/imagefilters/Compositing如何合成两幅图纠缠在一起，这里举个例子一个例子，其他类似vardrawing=document.getElementById("drawing");varcontext=drawing.getContext("2d");//画一个红色矩形context.fillStyle="#ff0000";context.fillRect(10,10,50,50);//改变全局alphacontext.globalCompositeOperation="xor";//绘制蓝色矩形context.fillStyle="rgba(0,0,255,1)";context.fillRect(30,30,50,50);总结一下canvas的内容就是上面这些，就像设计师只能用那么多颜色一样，但是把颜色和图形结合起来，创意真的是无限的，canvas也是webGL是OpenGLES2.0浏览器的接口，用于3D绘画，生产阶段最好不要用，实验阶段可以用。