CanvasBasics

title:CanvasBasicsdate:2016-11-09tags:HTML50x00使用Canvas时，Canvas元素必须设置width和height属性来指定可以绘制的区域大小。如果您不添加任何样式或绘制任何图形，您将看不到该元素。但是如果通过css样式设置width和height属性，如果css尺寸与初始canvas比例不一致（canvas默认初始宽300px，高150px），就会出现变形。创建一个Canvas元素并使用canvas.getContext()方法获取其2D上下文。//HTML某物的绘图。//JSvardrawing=$("#myCanvas")if(drawing.getContext){//判断浏览器是否支持varcontext=canvas.getContext("2d")//更多代码}如上，如果需要在canvas上绘图，首先需要获取绘图上下文。然后，使用canvas.toDataURL()方法获取绘制在元素上的图片，它只接受一个参数，就是我们要指定的图片的MIME类型。if(drawing.getContext()){varimgURL=drawing.toDataURL("image/png");//获取图像数据URL0x012Dcontext使用2Dcontext绘制简单的2D图形，如矩形、圆弧、路径等。它的两个基本绘图操作是填充（fillStyle）和描边（strokeStyle）。使用strokeRect()和fillRect()绘制矩形。您可以使用fillStyle()属性为fillRect()绘制的矩形填充颜色；使用strokeStyle()属性对strokeRect()绘制的矩形进行描边vardrawing=$("#myCanvas")if(drawing.getContext){//检查浏览器是否支持画布varcontext1=drawing.getContext("2d");//获取二维上下文context1.fillStyle="red"context1.fillRect(40,20,50,50)//绘制一个矩形并用红色填充它context1.strokeStyle="blue"context1.strokeRect(10,10,50,50)//画一个矩形，用蓝色描边}另外，可以使用clearRect()方法清除指定区域。0x02绘制路径所有形状的原始基础都是路径。在Cavans中创建形状首先需要创建一个新路径（beginPath()），然后通过绘图命令（如mouvTo()等）在路径中绘制，然后关闭路径（clostPath()),最后填充颜色(fill())或描边(stroke())。当调用fill()函数时，所有未闭合的形状都会自动闭合，因此不需要调用closePath()函数。但是调用stroke()时不会自动关闭。moveTo()设置笔划相对于画布左上角的起点，也就是路径的起点。lineTo()直线路径。描边三角形vardrawing=$("#myCanvas")if(drawing.getContext){//检测浏览器是否支持canvasvarcontext=drawing.getContext("2d");//获取二维上下文context.beginPath()context.strokeStyle="green"context.moveTo(50,200)context.lineTo(200,100)context.lineTo(100,50)context.closePath()context.stroke()//stroketriangle}strokefilltr??ianglevardrawing=document.querySelector("#drawing")if(drawing.getContext){//支持canvascontext=drawing.getContext("2d")//获取二维上下文context.beginPath()//开始drawingcontext.fillStyle="#333"//填充颜色为#333context.strokeStyle="deeppink"//描边颜色为deeppinkcontext.lineWidth="20"//线框为20pxcontext.moveTo(150,150)//初始接触（150,150)context.lineTo(150,300)context.lineTo(300,225)//绘制三角形context.closePath()//关闭路径context.stroke()//描边context.fill()//填充}arc()arcTo()arc(x,y,radius,startAngle,endAngle,clockwise)以(x,y)为圆心，radius为半径，从startAngle开始，到endAngle结束，按照给定的方向绘制圆弧（圆）按逆时针方向（默认为顺时针方向）生成。arc()函数中的角度单位是弧度，不是度数。角度和弧度的js表达式：弧度=(Math.PI/180)*度。划圈for(vari=0;i<6;i++){for(varj=0;j<6;j++){context.strokeStyle='rgb(0,'+Math.floor(255-42.5*i)+','+Math.floor(255-42.5*j)+')'context.beginPath()context.arc(50+60*i,50+60*j,30,0,Math.PI/180*360)context.stroke()}}来自MDN官网。描边填充圆描边填充圆并使用globalAlpha将其透明度设置为0.3context.beginPath()context.strokeStyle="deeppink"context.fillStyle="#333"context.globalAlpha="0.3"context.lineWidth="20"context.arc(450,300,100,0,Math.PI/180*300)context.closePath()context.stroke()context.fill()0x03渐变画布支持线性(createLinearGradient())和径向渐变(createRadialGradient)())，并使用addColorStop()为其指定渐变颜色。strokeStyle和fillStyle属性都可以连接到canvasGradient对象。渐变色addColorStop()中的第一个参数positionaddColorStop(position,color)表示颜色在渐变中出现的相对位置。线性渐变createLinearGradient()createLinearGradient(x1,y1,x2,y2)，它接收的四个参数分别代表渐变的起点和终点。context.beginPath()变种lineGradient1=context.createLinearGradient(100,200,100,400)lineGradient1.addColorStop(0.5,"green")lineGradient1.addColorStop(1,"red")context.strokeStyle=lineGradient1context.lineWidth="20"context.moveTo0(100,2)context.lineTo(100,400)context.closePath()context.stroke()radialgradientcreateRadialGradient()createRadialGradient(x1,y1,r1,x2,y2,r2)该方法接受6个参数，前三个定义一个与(x1,y1)为原点，半径为r1的圆，最后三个参数定义了另一个以(x2,y2)为原点，半径为r2的圆。//创建渐变varradGrad=context.createRadialGradient(0,150,40,0,140,??90)radGrad.addColorStop(0,'#00C9FF')radGrad.addColorStop(0.8,'#00B5E2')radGrad.addColorStop(1,'rgba(0,201,255,0)')//绘制图形context.fillStyle=radGradcontext.fillRect(0,0,150,150)0x04绘制文本文本样式字体：该字符串使用与CSS属性相同的语法。默认字体为10pxsans-seriftextAlign：文本对齐，可选值：start、end、left、right、centertextBaseline：基线对齐，可选值：top、middle、bottomfillText(text,x,y,[,maxWidth])specified(x,y)在指定位置填充指定文字，绘制最大宽度（可选）.strokeText(text,x,y,[,maxWidth])在指定(x,y)位置绘制空心文字，绘制的最大宽度（可选）。varlinGrad=context.createLinearGradient(50,50,400,200)linGrad.addColorStop(0.2,"red")linGrad.addColorStop(0.7,"deeppink")//设置渐变varstr="是否为"context.beginPath()context.font="60px宋体"//需要设置文本格式context.textAlign="left"//需要设置文本对齐方式context.textBaseline="middle"//需要设置文本基线context.shadowColor="#333"context.shadowOffsetX=10;context.shadowOffsetY=10;context.shadowBlur=10;context.closePath()//关闭路径context.fillStyle=linGrad//setfillStylecontext.strokeStyle=linGrad//setstrokeStylecontext.fillText(str,50,50,400)//填充文字context.strokeText(str,50,100,400)//描边文字console.log(context.measureText(str))//width:570measureText()方法会返回一个[TextMetrics]对象的宽度和像素，这些属性体现了文本的特性0x05使用Imagescanvas的强大功能也让我们可以对图像进行操作。当然，在对图片进行操作之前，还需要引入图片资源。Canvas支持多种不同的方式导入图片资源。这里我们只了解两种常用的方法：使用Image对象或者标签，在同一个页面中引用另外一个图片资源。作为图像资源的画布。drawImage(source,x,y)图片资源，以及在画布中的起始位置drawImage(source,x,y,width,height)图片资源，在画布中的起始位置，并以指定的宽高显示在画布。以实现图像的缩放效果。varisImage=newImage;isImage.src="Koala.jpg"isImage.onload=function(){//dodrawingImage语句context.drawImage(isImage,60,60,400,400)//五个参数表示图像在画布中显示起点和图像显示的宽高}drawImage(source,sx,sy,sWidth,sHeight,dx,dy,dWidth,dHeight)使用九个参数时，需要对图像进行切片。其中，sx、sy、sWidth、sHeight指定图像源中要获取的切片位置和切片大小；dx,dy,dWidht,dHeight表示切片在画布中显示的起始位置和大小。varisImage=newImage;isImage.src="Koala.jpg"isImage.onload=function(){context.drawImage(isImage,300,300,400,300,100,100,200,200)}createPattern()我们可以使用createPattern()方法指定图片的方式displayed,none,repeat,repeat-x,repeat-yvarisImage=newImage;isImage.src="Koala.jpg"isImage.onload=function(){//图片是否平铺varimgs=context.createPattern(isImage,"repeat-x")context.fillStyle=imgscontext.fillRect(0,0,700,500)}0x06画布裁剪clip()varisImage=newImage;isImage.src="Koala.jpg"isImage.onload=function(){context.drawImage(isImage,0,0,400,400)}//画布裁剪clip()context.arc(230,230,170,0,Math.PI/180*360)context.closePath()context.clip()0x07画布方法save()和restore()save和restore方法用于保存和恢复画布状态，两者都没有参数。Canvas的状态只是应用到当前屏幕的所有样式和转换的快照。context.beginPath()context.fillRect(50,50,150,150)//使用默认设置绘制矩形context.save()//在默认配置下保存绘制状态context.fillStyle="deeppink"//设置新的绘制状态context.fillRect(65,65,120,120)//使用新的绘图状态绘制矩形context.restore()//恢复默认绘图状态context.fillRect(80,80,90,90)//同理，使用默认状态矩形restore()恢复由最近的save()保存的状态。translate()transltae(x,y)方法用于移动画布原点。context.fillRect(50,50,100,100)context.translate(100,100)context.fillRect(50,50,100,100)scale(x,y)scale(x,y)缩放，它接收的两个参数分别代表x处的缩放因子和一个缩放y轴上的因子。context.scale(1.5,1.5)context.fillRect(50,50,100,100)context.translate(150,150)context.scale(0.5,0.5)context.fillRect(50,50,100,100)rotate()rotate(angle)只接受一个参数，也就是旋转的角度，也就是顺时针方向，数值单位是弧度，和arc()是一样的。context.rotate(Math.PI/180*deg)scale,translate,rotate()，所有样式和变换命令都应该写在填充和描边命令之前。0x08画一个五角星varr=200context.translate(200,200)context.beginPath()context.moveTo(r,0)for(vari=0;i<9;i++){context.rotate(Math.PI/180*36)if(i%2==0){context.lineTo(r/(Math.cos(Math.PI/180*36)*2)*0.7,0)}else{context.lineTo(r,0)}}context.closePath()context.fill()}