Canvas学习总结

canvas说明HTML5标签用于绘制图像（通过脚本，通常是JavaScript）。但是，元素本身没有绘图功能（它只是图形的容器）-必须使用脚本来进行实际绘图。getContent()方法返回一个对象，该对象提供用于在画布上绘图的方法和属性。浏览器支持InternetExplorer9、Firefox、Opera、Chrome和Safari支持及其属性和方法。（InternetExplorer8及更早版本不支持元素）1.Canvas设置高度，宽度1.通过设置2html.通过js设置3。设置//用css设置画的宽高，画布会按照300*150的比例缩放，即300*150的页面会显示在一个400*400的容器，所以尽量使用html的宽高属性或者直接用js动态设置宽高，不要用css设置。获取Canvas对象创建canvas标签后，需要获取Canvas对象在画布上画一个圆创建一个画布使用arc()画一个圆varcanvas=document.getElementById('canvas');varcontext=canvas.getContext('2d');context.beginPath()//开始路径或重置当前路径context.arc(90,90,50,Math.PI*2,false)//arc(x,y,r,start,stop)context.strokeStyle="green"//设置或返回用于描边的颜色、渐变或模式。context.stroke()//绘制定义的路径。在画布上创建一个带有线条的画布使用moveTo()定义线条起始坐标，lineTo()线条结束坐标varcanvas=document.getElementById('canvas');varcontext=canvas.getContext('2d');context.beginPath();vargrd=context.createLinearGradient(0,0,170,0);//createLinearGradient(x0,y0,x1,y1);创建线性渐变对象grd.grd.addColorStop(0,"green");//在渐变对象中指定颜色和停止位置。grd.addColorStop(1,"white");context.moveTo(10,10);context.lineTo(100,100);context.lineCap="round"//定义设置或返回直线的终点样式roundroundbuttdefaultsquaresquarecontext.lineWidth=10//设置线宽context.strokeStyle=grdcontent.stroke()绘制渐变文字htmljsvarcanvas=document.getElementById('canvas');varcontext=getContext('2d');context.beginPath();vargrd=context.createLinearGradient(0,0,170,0);grd.addColorStop(0,"green");grd.addColorStop(1,"white");context.font="30pxArial"//设置或返回文本内容的当前字体属性。context.fillStyle=grdcontext.fillText("HelloWorld",10,50);仅供个人学习使用