最基础的前端就是HTML+CSS+Javascript。掌握这三项技术算是入门，但也只是入门而已。现在前端开发的定义远不止于此。前端小课堂（HTML/CSS/JS），本着提高技术水平，夯实基础知识的中心思想，开课（每周四）。Canvas是HTML5新加入的功能，用于操作和绘制图片。可用于动画、游戏画面、数据可视化、图片编辑和实时视频处理。主要操作2D图形。还可以绘制3D图形。帆布战斗刮刮卡。刮刮卡效果实现，demoglobalCompositeOperation，drawImage，节点记录自动化ctx.globalCompositeOperation='destination-out'国庆头像。热点请给我一个国旗@微信官方、demotranform、canvas、drawImage、toDataURLcanvas标签操作需要使用DOM，所以一般给一个ID，方便查找height就是画布的真实高度。单位：px默认高度为150px。width是画布的实际宽度。单位：px默认宽度为300px。label上的属性是画布宽高，css设置宽高为显示宽高。意义不同。HTMLCanvasElement是canvas标签的DOM对象。canvas属性height对应标签上的height属性width对应标签上的width属性canvas方法ctx=canvas.getContext('2d');ctx.drawImage(img,0,0,300,300)getContext()返回绘图上下文对象。我们需要使用返回的对象来操作图形。toBlob()以Blob类型输出图片，异步toDataURL()以DataURL类型输出图片，同步canvas.getContext(contextType[,contextAttributes])ctx=canvas.getContext(contextType[,contextAttributes])contextType对象要返回的类型'2d'返回用于2D绘图的CanvasRenderingContext2D对象。'webgl'或'experimental-webgl'为使用webgl的3D绘图返回一个WebGLRenderingContext（WebGL渲染上下文）对象。提供硬件3D加速渲染。对应的WebGL1(OpenGLES2.0)'webgl2'返回一个WebGL2RenderingContext对象，也用于3D渲染。它只对应于WebGL2(OpenGLES3.0)'bitmaprenderer'返回ImageBitmapRenderingContextcontextAttributes可选alpha以启用透明度canvas.toBlob(callback,mimeType,quality);这个操作是异步的，所以需要传入一个回调。callback处理完成的回调函数。回调的第一个参数是blob。mimeType要转换的图片类型，默认为image/png。quality图片质量，默认0.92。canvas.toDataURL（mimeType，质量）；此操作是同步的，因此大图像会卡住。data:[][;base64],DataURL格式。mimeType要转换的图片类型，默认为image/png。quality图片质量，默认0.92。跨域问题图片服务器需要配置Access-Control-Allow-Origin来设置图片的crossOriginvarimg=newImage();img.crossOrigin='';img.onload=function(){};img.src=url;CanvasRenderingContext2D线型测试地址ctx.lineWidth宽度。默认值：1，可以有小数。单位：pxctx.lineCap终点样式，路径起点和终点对接的默认值，严格按照坐标点绘制。round是一个圆，端点处的lineWidth是画圆的直径。square，线的末端多了一个正方形，lineWidth相同，长度为lineWidth/2。ctx.lineJoin转角样式，路径中的转折点斜接，默认值。如果角度很小，那么点就会很长。miterLimit可以限制尖端的最长尺寸，如果长度大于限制值，将进行斜角处理。round圆角，转折处的lineWidth为画圆的直径。bevel平角，转折点被直接截去。ctx.miterLimitMiter限制阈值，用于小角度粗线的情况。默认值：10。如果ctx.lineJoin=miter，如果长度超过，使用平角显示，如果长度不超过，使用锐角显示。ctx.lineDashOffset虚线起始偏移量ctx.setLineDash()设置虚线值，数组。[5]等同于[5,5]。[5,5]相当于实线5px虚线5px[1,2,3]相当于[实线1px，虚线2px，实线3px][1,2,3,4]相当于[实线1px，虚线2px，实线3px，虚线4px]等等ctx.getLineDash()得到虚线值，一个数组。文字样式字体字体大小、字体。ctx.font='20pxmonospace'textAlign水平对齐。开始（默认）、结束、左、右、中心。测试地址start表示指定的坐标为起始坐标（左侧和方向会自动改变）。end表示指定的坐标为结束坐标（右边和方向会自动改变）。left表示指定的坐标为左坐标。right表示指定的坐标是正确的坐标。center表示指定坐标为中心点。textBaseLine基线对齐。顶部、悬挂、中间、字母（默认）、表意、底部。测试地址top表示指定坐标为文本顶点坐标。middle用于悬挂藏文和其他印度文，表示指定的坐标为文本的垂直居中坐标。alphabetic表示指定的坐标是文本基线坐标。ideographic表示指定的坐标是文本的底部坐标。bottom表示指定的坐标是文本的底部坐标。direction控制文本方向此功能在chrome中默认禁用。通过ExperimentalCanvasFeatures功能标志启用。填充绘制ctx.fillStyle填充颜色。默认为#000黑色ctx.fillRect()填充指定区域ctx.fillRect(x,y,width,height);ctx.fillText()在指定区域绘制文字ctx.fillText(text,x,y[,maxWidth]);ctx.fill()填充需要路径，会自动关闭路径ctx.fill(),ctx.fill(fillRule),ctx.fill(path,fillRule)fillRule为非零填充规则，evenodd。理解SVG/Canvas中nonzero和evenodd的填充规则张新旭Strokedrawingctx.strokeStyleStrokecolor。默认为#000blackctx.strokeRect()在指定区域描边ctx.strokeRect(x,y,width,height);ctx.strokeText()在指定区域绘制文字笔画ctx.strokeText(text,x,y[,maxWidth]);ctx.stroke()描边，需要有路径，会自动关闭路径透明ctx.shadowOffsetX阴影X轴偏移，默认值：0ctx.shadowOffsetY阴影Y轴偏移，默认值：0笔画。如果路径未闭合，则路径绘制未闭合时会自动闭合。如果路径未闭合，但路径绘制已关闭，则不会发生自动闭合。ctx.moveTo()移动路径的起点ctx.moveTo(x,y);ctx.lineTo()绘制一条直线路径到指定点ctx.lineTo(x,y);ctx.bezierCurveTo()绘制贝塞尔曲线路径到指定点ctx.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);当前点为起点，参数为两组控制点和一组终点。测试地址ctx.quadraticCurveTo()绘制二次贝塞尔曲线路径到指定点ctx.quadraticCurveTo(cpx,cpy,x,y);当前点为起点，参数为控制点和终点。测试地址ctx.arc()圆弧路径ctx.arc(x,y,r,startAngle,endAngle[,anticlockwise]);对应圆心、半径、起始角（弧度）、结束角（弧度）、绘制方向（默认false（顺时针方向）ctx.arcTo()圆弧路径不同于圆弧绘制路径。这更像是绘制一条从当前点到目标点的弧度路径ctx.arcTo(x1,y1,x2,y2,radius);ctx.rect()矩形路径ctx.rect(x,y,width,height);ctx.ellipse()椭圆弧路径ctx.ellipse(x,y,radiusX,radiusY,rotation,startAngle,endAngle,anticlockwise);记得绘制椭圆弧路径ctx.clip()裁剪路径。指定的路径只能在这个区域内。ctx.clip();,ctx.clip(fillRule);,ctx.clip(path,fillRule);表示后续操作只在该路径内操作。变形这里说一下我之前的文章（热点，请给我一个国旗@微信官方），用这个功能实现css3变形，然后转成canvas。测试地址变化测试地址ctx.rotate()旋转ctx.rotate(angle);，角度为弧度，angle=deg/180*Math.PI默认旋转中心点为左上角(0,0)坐标点帆布。默认值为0。旋转表示旋转当前坐标系，不影响之前的绘制。css是整体轮换。ctx.scale()缩放ctx.scale(x,y);默认点是(0,0)。默认值为(1,1)。放大来看，css和canvas是一样的。不影响之前的绘图。ctx.translate()位置ctx.translate(x,y);默认点是(0,0)。默认值为(0,0)。在使用上，和css有很大的差距。不会进行轴叠加。用于修改中心点操作。ctx.transform()叠加矩阵变化ctx.setTransform()不叠加矩阵变化ctx.resetTransform()重置矩阵变化ctx.getTransform()获取当前矩阵变化值。图片绘制ctx.createLinearGradient()线性渐变ctx.createLinearGradient(x0,y0,x1,y1);可以理解点1到点2是一个梯度。其余位置为原色。渐变绘制坐标是canvas坐标，也就是说渐变已经画好了，fill只是决定显示的内容由于圆0是点1的纯色，圆0和圆1之间的区域是渐变色，圆1的外侧是点2的纯色。渐变绘制坐标是画布坐标，也就是说，渐变已经画好了，fill只是决定显示内容测试地址ctx.createPattern()patternctx.createPattern(image,repetition);imgage可以是HTMLImageElement、HTMLVideoElement、HTMLCanvasElement、CanvasRenderingContext2D、ImageBitmap、ImageData、Blob。默认平铺可以重复，水平平铺可以重复x，垂直平铺可以重复y，不重复可以是no-repeat。ctx.drawImage()绘制图片到画布上ctx.drawImage(image,dx,dy);图片取自cavnas坐标。ctx.drawImage（图像，dx，dy，dWidth，dHeight）；图片是从canvas坐标绘制的，宽高是画出来的。ctx.drawImage（图像，sx，sy，sWidth，sHeight，dx，dy，dWidth，dHeight）；将截取图片的坐标宽高绘制到canvas的坐标上。ctx.createImageData()创建一个图像数据对象，四位描述一个像素为rgba。ctx.getImageData()获取当前画布的数据对象ctx.putImageData()将数据对象绘制到画布上其他ctx.clearRect()清空指定区域的所有内容ctx.measureText()测量文字占用的宽度ctx.measureText(text)ctx.isPointInPath()点是否在路径上ctx.isPointInPath(x,y);ctx.isPointInPath(x,y,fillRule);ctx.isPointInPath(path,x,y);ctx.isPointInPath(路径,x,y,fillRule);ctx.isPointInStroke()点是否在路径上ctx.isPointInStroke(x,y);ctx.isPointInStroke(路径,x,y);ctx.save()保存绘图状态并推送ctx。restore()恢复绘图状态，弹出ctx.canvasdom对象的引用ctx.drawFocusIfNeeded()ctx.scrollPathIntoView()微信公众号：前端linong参考前端培训目录，前端培训计划，前端训练计划CanvasAPI中文文档首页图
