最近熬夜总结html5Canvas干系的知识点，大家一起看一下吧：
1.html5Canvas根本知识Canvas是什么？翻译过来是画布的意思Canvas元素用于在网页上绘制2D图形和图像Canvas利用的场景有：1，动画；2，H5游戏；3，图表。
效果动画，加载Loading:
H5游戏效果：
对付Canvas须要节制：
利用Canvas画直线，矩形，圆形以及设置它们的样式。Canvas中的图形变换，渐变，笔墨和图片。Canvas的像素获取，阴影和曲线绘制以及区域的剪辑。Canvas动画，交互和离屏技能。Canvas坐标体系
canvas默认大小，300150通过HTML，css，JavaScript设置width和height的差异HTML和JavaScript设置的画布大小css设置的是画布缩放后的大小坐标系原点及方向（原点在左上角，向右为x方向，向下为y方向）画直线，矩形和原型
画直线：ctx.moveTo(x1,y1)，ctx.lineTo(x2,y2)画圆形: ctx.arc(x,y,radius,0,Math.PI2,true)画矩形：可以通过直线来画，也可以直接用（ctx.strokeRect(x1,y1,x2,y2）beginPath和closePath
beginPath和closePath并不是成对涌现的beginPath的浸染是开始一条新路径closePath的浸染是使当前路径闭合描边和添补样式
strokeStyle用来设置画笔样式，也便是直线，曲线，边框的样式fillStyle用来设置 添补样式lineWidth用来设置线条的粗细Canvas中的图形变换，渐变，笔墨和图片
Canvas中的图像变换Canvas中的渐变Canvas中的笔墨Canvas中的图片Canvas中的图形变换
图形变换都是针对坐标系来说的：
平移：ctx.translate(x,y)旋转：ctx.rotate(rad)缩放：ctx.scale(x,y)save和restore
用来保存和规复高下文的环境ctx，一样平常成对涌现
ctx.save()，保存当前高下文环境。ctx.restore()，规复到上一次的高下文环境Canvas中的渐变
线性渐变：ctx.createLinearGradient(xStart,yStart,xEnd,yEnd)(xStart,yStart)是线段的出发点，(xEnd,yEnd)是线段终点。出发点到终点之间的颜色呈渐变。
gradient.addColorStop可以来掌握渐变的颜色渐变可以理解为一种颜色径向渐变：ctx.createRadialGradient(xStart,yStart, radiusStart,xEnd,yEnd,radiusEnd);
(xStart,yStart)是第一个圆的原心，radiusStart是第一个圆的半径，(xEnd,yEnd)是第二个圆的原心，radiusEnd是第二个圆的半径
第一圆到第二个圆之间的颜色呈现渐变。
Canvas中的笔墨
描边笔墨：ctx.strokeText(text,x,y)
添补笔墨：ctx.fillText(text,x,y);
设置字体样式：ctx.font
例如：ctx.font="bold 100px sans-serif"设置水平对齐办法：ctx.textAlignleft,start，左对齐，center居中对齐，end,right，右对齐设置垂直对齐办法：ctx.textBaseline
top，顶对齐，middle，居中，bottom，底部对齐打算文本宽度：ctx.measuerText(text).width 须在设置字体样式之后打算Canvas图片
绘制图片3种方法
ctx.drawImage(image,x,y)，该方法把图片绘制在(x,y)处ctx.drawImage(image,x,y,w,h)，该方法把图片绘制在(x,y)处，并缩放为宽w,高hctx.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh)，该方法把图片中(sx,sy)处的宽sw，高sh的区域，绘制到(dx,dy)处，并缩放为宽dw，高dh在image加载完成之后绘制：
示例：
var img = new Image();img.src = 'logo.png';img.onload = function() { ctx.drawImage(img,0,0,40,40,0,0,80,80);}
Canvas绘制
Canvas的图形绘制和像素获取Canvas阴影绘制Canvas剪辑区域Canvas曲线绘制Canvas图形画刷
ctx.createPattern可以创建一个画刷模式，进而可以设置到fillStyle里，进行画刷的添补。
函数原型：ctx.createPattern(image,type)type取值:
no-repeat不平铺repeat-x橫方向平repeat-y纵方向平铺repeat全方向平铺Canvas像素操作
获取像素var imageData = ctx.getImageData(x,y,w,h)返回的是一维数组：[r1,g1,b1,a1,r2,g2,b2,a2...]设置像素
ctx.putImageData(imageData,x,y)把imageData放在(x,y)处设置像素
ctx.putImageData(imageData, x, y, dirtyX, dirtyY, dirtyW, dirtyH)只显示（dirtyX,dirtyY）处的宽dirtyW,dirtyH的区域
Canvas阴影绘制
ctx.shadowOffsetX:阴影x方向的偏移间隔ctx.shadowOffsetY:阴影y方向的偏移间隔ctx.shadowColor：阴影的颜色ctx.shadowBlur：阴影的模糊半径效果图：Canvas剪辑区域
设置一个路径；调用ctx.clip();再绘制图形。Canvas绘制曲线
狐线：
context.arc(x,y,radius, starAngle,endAngle, anticlockwise)圆心(x,y) 半径radius从starAngle到endAngleanticlockwise代表是否逆时针方向
天生工具
Canvas Quadratic Curve Example
http://blogs.sitepointstatic.com/examples/tech/canvas-curves/quadratic-curve.html
http://blogs.sitepointstatic.com/examples/tech/canvas-curves/bezier-curve.html
二次样条曲线：
context.quadraticCurveTo(qcpx,qcpy, qx,qy)
贝塞尔曲线：
context.bezierCurveTo(cp1x,cp1y, cp2x, cp2y, x,y)Canvas动画，Canvas离屏技能ctx.clearRect(x,y, width,height)
打消(x,y)点起， 宽width,高height的区域，用于重新绘制
离屏技能是什么：通过在离屏Canvas中绘制元素，再复制到显示Canvas中，从而大幅提高性能的一种技能。
利用离屏技能：
静态场景绘制特殊耗资源，动态场景绘制大略。为了不每次更新动态场景的时候，都去绘制静态场景。一样平常把静态场景绘制在离屏canvas上，更新动态场景的时候，把静态场景copy过来，而不是重新绘制。离屏技能：
一个Canvas中的图形绘制到另一个Canvas方法：
ctx.drawImage(canvas,x,y),该方法把canvas绘制在(x,y)处ctx.drawImage(canvas,x,y, w,h),该方法把canvas绘制在(x,y)处，并缩放为宽w,高hctx.drawImage(canvas, sx, sy, sw, sh, dx, dy, dw, dh)，该方法把canvas中（sx, sy）处的宽sw,高sh的区域，绘制到(dx,dy)处，并缩放为宽dw, 高dh
对canvas插件的干系理解
什么是Canvas插件，节制Chart.js插件，理解Chartist.js和HighCharts.js插件
（图表）Chart.js插件：https://www.chartjs.org/
Chartist.js插件是一个大略的相应式图表插件：支持SVG格式（http://gionkunz.github.io/chartist-js/）
HighCharts.js插件：方便快捷的HTML5交互性图标库：https://www.highcharts.com/
Chartist.js插件与HighCharts.js插件
Chartist.js配置大略，css和JavaScript分离，相应式图表，支持不同的浏览器尺寸和分辨率。HighCharts.js，兼容当今所有的浏览器，包含iPhone，IE，火狐等。相应式布局，它的用户体验友好，相应式网站可以根据不同终端，不同尺寸和不同运用环境，自动调度界面布局，展示内容，供应非常好的视觉效果。相应式布局便是一个网站能够兼容多个终端
2. 构建Canvas元素示例：
<style>#canva { border: 1px solid red;}</style><div><canvas id="canva" width="200" height="200"></canvas>// 绘制宽高200的canvas</div>利用JavaScript实现绘图的流程
在开始绘图时，先要获取Canvas元素的工具，在获取一个绘图的高下文。
获取Canvas工具 ,利用document工具的getElementById()方法获取。
var canvas = document.getElementById("canvas")可以利用通过标署名称来获取工具的getElementsByTagName方法创建二维的绘图高下文工具
利用getContext()方法来获取
var context = canvas.getContext("2d")在Canvas上绘制笔墨
context.font="98px 黑体"; // 笔墨样式context.fillStyle="red"; // 笔墨颜色context.textAlign = "center"; // 笔墨对齐办法// 绘制笔墨context.fillText("达达前端"，100, 123, 234);
绘制图像：
利用drawImage()方法可以将图像添加到Canvas画布中，绘制一幅图像，须要有三个重载的方法：
利用：
drawImage(image, x, y) // 在画布上定位图像// 方法在画布上绘制图像、画布或视频。// 方法也能够绘制图像的某些部分，以及/或者增加或减少图像的尺寸。drawImage(image, x, y, width, height)// 在画布上定位图像，并规定图像的宽度和高度drawImage(image, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight)// 剪切图像，并在画布上定位被剪切的部分
参数：
参数描述image规定要利用的图像，画布或视频sourceX开始剪切的x坐标位置sourceY开始剪切的y坐标位置sourceWidth被剪切图像的宽度sourceHeight被剪切图像的高度destX在画布上放置图像的 x 坐标位置destY在画布上放置图像的 y 坐标位置destWidth要利用的图像的宽度destHeight要利用的图像的高度
插入图像：
function Draw() { // 获取canvas工具 var canvas = document.getElementById("canvas"); // 获取2d高下文绘图工具 var context = canvas.getContext("2d"); // 利用Image()布局函数创建图像工具 var newImg = new Image(); // 指定图像的文件地址 newImg.src = "../images/dadaqianduan.jpg"; newImg.onload = function () { // 左上角开始绘制图像 context.drawImage(newImg, 0, 0); context.drawImage(newImg, 250, 100, 150, 200); context.drawImage(newImg, 90, 80, 100, 100, 0, 0, 120, 120); }}
在Canvas中绘制笔墨“达达前端”:
// canvas 宽高200<canvas id="canvas" width="200" height="200"></canvas><style type="text/css">canvas { border: 2px solid #ccc;}</style><script> // 获取canvas var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); // 设置字体 context.font="98px 黑体"; // 添补 context.fillStyle="#036"; // 文本水平位置 context.textAlign="center"; // 实行绘制 context.fillText("达达前端",100, 120, 200);</script>3.绘制矩形
两个方法：
strokeRect() - 矩形边框fillRect() - 添补矩形区域strokeStyle - 设置线条的颜色lineWidth - 设置线条宽度，默认宽度为1，单位是像素fillStyle - 设置区域或笔墨的添补颜色绘制矩形边框，利用strokeStyle方法：
// 绘制矩形边框strokeRect(x,y, width, height);
添补矩形区域，利用fillRect()方法：
// 添补矩形区域fillRect(x,y,width,height);
绘制矩形
// 绘制矩形function drawRect() { var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); // 描边 context.strokeStyle = "#000"; // 线条宽度 context.lineWidth = 1; // 矩形边框 context.strokeRect(50,50, 150, 100); // 添补 context.fillStyle="#f90"; // 矩形 context.fillRect(50,50,150,100);}window.addEventListener("load",DrawRect,true);
利用clearRect方法，可以擦除指定的矩形区域：
// 擦除指定的矩形区域context.clearRect(x,y,width,height)4.体验canvas绘图
在实际开拓中，画布是默认300150的大小。
示例：
// 为画布设置边框canvas { border: 1px solid #ccc;}// 准备画布，默认是300150// 设置画布的大小<canvas width="1200" height="800"></canvas>// 准备绘制工具<script>// 获取元素var myCanvas = document.querySelector('canvas');// 获取高下文，绘制工具箱var ctx = myCanvas.getContext('2d');// 移动画笔ctx.moveTo(100,100);// 绘制直线，轨迹ctx.lineTo(200,100);// 描边ctx.stroke()创建Canvas元素
向 HTML5 页面添加 canvas 元素
// 规定元素的 id、宽度和高度<canvas id="myCanvas" width="200" height="100"></canvas>
图形绘制
须要理解些观点：
路径的观点路径的绘制描边 stroke()添补 fill()闭合路径手动闭正当式闭合 closePath()开启新的路径 beginPath()设置样式
画笔的状态lineWidth 线宽，默认1pxlineCap 线末端类型：(butt默认)、round、squarelineJoin 相交线的拐点 miter(默认)、round、bevelstrokeStyle 线的颜色fillStyle 添补颜色setLineDash() 设置虚线getLineDash() 获取虚线宽度凑集lineDashOffset 设置虚线偏移量（负值向右偏移）矩形绘制
rect(x,y,w,h) 没有独立路径strokeRect(x,y,w,h) 有独立路径，不影响别的绘制fillRect(x,y,w,h) 有独立路径，不影响别的绘制clearRect(x,y,w,h) 擦除矩形区域
圆弧绘制
弧度观点arc()x 圆心横坐标y 圆心纵坐标r 半径startAngle 开始角度endAngle 结束角度anticlockwise 是否逆时针方向绘制（默认false表示顺时针；true表示逆时针）绘制文本
ctx.font = '微软雅黑' 设置字体strokeText()fillText(text,x,y,maxWidth)text 要绘制的文本x,y 文本绘制的坐标（文本左下角）maxWidth 设置文本最大宽度，可选参数ctx.textAlign 文本水平对齐办法，相对绘制坐标来说的leftcenterrightstart 默认endctx.direction 属性css(rtl ltr) start和end于此干系如果是ltr,start和left表现同等如果是rtl,start和right表现同等ctx.textBaseline 设置基线（垂直对齐办法 ）top 文本的基线处于文本的正上方，并且有一段间隔middle 文本的基线处于文本的正中间bottom 文本的基线处于文本的证下方，并且有一段间隔hanging 文本的基线处于文本的正上方，并且和文本粘合alphabetic 默认值，基线处于文本的下方，并且穿过笔墨ideographic 和bottom相似，但是不一样measureText() 获取文本宽度obj.width绘制图片
drawImage()img 图片工具、canvas工具、video工具x,y,w,h 图片中的一个矩形区域x1,y1,w1,h1 画布中的一个矩形区域img 图片工具、canvas工具、video工具x,y 图片绘制的左上角w,h 图片绘制尺寸设置(图片缩放，不是截取)img 图片工具、canvas工具、video工具x,y 图片绘制的左上角三个参数drawImage(img,x,y)五个参数drawImage(img,x,y,w,h)九个参数drawImage(img,x,y,w,h,x1,y1,w1,h1)坐标变换
平移 移动画布的原点translate(x,y) 参数表示移动目标点的坐标缩放scale(x,y) 参数表示宽高的缩放比例旋转rotate(angle) 参数表示旋转角度5.利用路径lineTo()rect()arc()fill()stroke()创建绘图路径
利用方法：beginPath()和closePath()，分别表示开始一个新的路径和关闭当前的路径
利用beginPath()方法创建一个新的路径moveTo(x,y)，开始绘图时的坐标lineTo(x,y)，绘制直线到目标坐标arc(x,y, radius, startAngle,endAngle, counterclockwise)x,y描述弧的圆形的圆心坐标radius圆形的半径startAngle描述弧的开始点的角度endAngle描述弧的结束点的角度counterclockwise，true值，表示逆时针方向，否则反之rect(x,y, width, height)：xy,出发点坐标，矩形的宽高，绘制矩形路径closePath方法关闭当前路径
绘制图形样式stokeStyle 属性设置矩形边框的颜色lineWidth 属性设置边框的宽度fillStyle 属性设置添补的颜色绘制网格，网格大小
var grid = 10;// 画多少条x轴方向的线，横向的条数，画布的高度var canvasHeight = myCanvas.heightvar canvasWidth = myCanvas.width// 画布宽高ctx.canvas.widthctx.canvas.height// 网格大小var gridSize = 10;var canvasHeight = ctx.canvas.height;var xLineTotal = canvasHeight / gridSize// 总线条var xLineTotal = Math.floor(canvasHeight / gridSize);for (var i=0; i<=xLineTotal; i++) { ctx.beginPath(); ctx.moveTo(0, igridSize-0.5); ctx.lineTo(canvasWidth, igridSize-0.5); ctx.strokeStyle='#eee'; ctx.stroke();}// 画多少条y轴方向的线var yLineTotal = canvasWidth / gridSizevar yLineTotal = Math.floor(canvasWidth / gridSize);for (var i=0; i <= yLineTotal; i++) { ctx.beginPath(); ctx.moveTo(igridSize-0.5,0); ctx.lineTo(igridSize-0.5,canvasHeight); ctx.strokeStyle='#eee'; ctx.stroke();}
绘制坐标系，确定圆点，确定离画布阁下的间隔，确定坐标轴的长度，确定箭头的大小，绘制箭头添补。
// 绘制坐标系var space = 20;var arrowSize = 10;// 画布宽高var canvasWidth = ctx.canvas.width;var canvasHeight = ctx.canvas.height;// 坐标系var x0 = space;var y0 = canvasHeight - space;// 绘制x轴ctx.moveTo(x0,y0);ctx.lineTo(canvasWidth-space, y0);ctx.stroke();// 箭头ctx.lineTo(canvasWidth-space-arrowSize, y0 + arrowSize/2);ctx.lineTo(canvasWidth-space-arrowSize, y0 - arrowSize/2);ctx.lineTo(canvasWidth-space, y0);ctx.fill();ctx.stroke();// 绘制y轴ctx.beginPath();ctx.moveTo(x0, y0);ctx.lineTo(space, space);ctx.stroke();// 箭头ctx.lineTo(space+space-arrowSize/2, space + arrowSize);ctx.lineTo(space-space-arrowSize/2, space - arrowSize);ctx.lineTo(space, space);ctx.fill();ctx.stroke();// 绘制点var coordinate = { x: 146, y: 356}// 点尺寸var dottedSize = 6;ctx.moveTo(coordinate.x - dottedSize/2, coordinate.y - dottedSize/2);ctx.lineTo(coordinate.x + dottedSize/2, coordinate.y - dottedSize/2);ctx.lineTo(coordinate.x + dottedSize/2, coordinate.y + dottedSize/2);ctx.lineTo(coordinate.x - dottedSize/2, coordinate.y + dottedSize/2);ctx.closePath();ctx.fill();
arc方法和rect方法
arc创建一个圆形，rect创建一个矩形，末了调用stroke()方法和fill()方法
// 圆形context.arc(100,100,30,0,Math.PI2,true);
利用beginPath()方法可以新创建一个子路径，closePath()方法用来闭合路径的。
绘制两条直线
function DrawLine() { var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); // 创建绘制过程 context.beginPath(); context.moveTo(50,50); context.lineTo(120,120); context.lineTo(120,60); context.closePath(); context.strokeStyle="#000"; // 实行绘制 context.stroke();}beginPath() 方法开始一条路径，或者重置当前的路径closePath() 方法创建从当前点到开始点的路径
如果不用beginPath()方法，绘制图形时不再创建子路径，第一次的图形在实行过程中会被绘制添补两次。
图形组合
属性 globalCompositeOperation 设置如何在画布上组合颜色
12中组合类型：
值解释copy只绘制新图形，删除其他所有内容darker在图形重叠的地方，颜色由两个颜色值相减后决定destination-atop已有的内容只在它和新的图形重叠的地方保留，新图形绘制在内容后destination-in在新图形和已有画布重叠的地方，已有内容都保留，所有其他内容成为透明destination-out在新图形和已有内容不重叠的地方，已有内容保留所有其他内容成为透明destination-over新图形绘制于已有内容的后面lighter在图形重叠的地方，颜色由两种颜色值的叠加值来决定source-atop只在新图形和已有内容重叠的地方才绘制新图形source-in在新图形和已有内容重叠的地方，新图形才会被绘制，所有其他内容成为透明source-out只在和已有图形不重叠的地方绘制新图形source-over新图形绘制于已有图形的顶部xor在重置和正常绘制的其他地方，图形都成为透明
绘制曲线
// 圆形，曲线arc(x, y, radius, startAngle, endAngle, counterclockwise);x,y 表示弧的圆形的圆心坐标radius 表示弧的圆形的半径startAngle 表示圆弧的开始点的角度endAngle 表示圆弧的结束点的角度counterclockwise 若true表示逆时针，false反之顺时针
<style>// 画布背景颜色#canvas { background: #000;}</style>// 画布宽度400<canvas id="canvas" width="400" height="400"><script> var canvas = document.getElementById('canvas'); var context= canvas.getContext('2d') // 开始 context.beginPath(); // 绘制圆形 context.arc(100, 100, 50, 0, Math.PI2, true); // 关闭 context.closePath(); // 添补颜色 context.fillStyle = 'rgb(255,255,255)'; context.fill();</script>
如果利用css设置宽高，画布会按照300150的比例进行缩放，将300150的页面显示在400400的容器中。
// 设置画布宽度var cx = canvas.width = 400;var cy = canvas.height = 400;
利用js动态设置宽高。
建议利用HTML中的width和height，或者js动态设置宽高
创建一个canvas标签，第一步：
// 获取这个canvas的高下文工具var canvas = document.getElementById('canvas');var context = canvas.getContext('2d');
方法：
fill() 添补路径stroke() 描边arc() 创建圆弧rect() 创建矩形fillRect() 绘制矩形路径区域strokeRect() 绘制矩形路径描边clearRect() 在给定的矩形内打消指定的像素beginPath() 起始一条路径，或重置当前路径moveTo() 把路径移动到画布中的指定点，不创建线条lineTo()添加一个新点，在画布中创建从该点到末了指定点的线条clip() 从原始画布剪切任意形状和尺寸的区域arcTo() 创建两切线之间的弧/曲线quadraticCurveTo() 创建二次方贝塞尔曲线bezierCurveTo() 创建三次方贝塞尔曲线isPointInPath() 如果指定的点位于当前路径中，则返回 true，否则返回 false赞助线绘制弧线：arcTo() 方法
语法：
// 赞助线绘制弧线arcTo(x1, y1, x2, y2, radius)
arcTo()方法绘制一条弧线
代码：
// 绘制一条弧线function draw() { var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); // 开始绘制 context.beginPath(); // 移动点 context.moveTo(80, 120); // 绘制线条 context.lineTo(150, 60); context.lineTo(180, 130); // 描边 context.strokeStyle="rgba(0,0,0,0.4)"; context.lineWidth=2; context.stroke(); context.beginPath(); context.moveTo(80,120); context.arcTo(150,60,180,130,50); context.strolkeStyle="rgba(255,135,0,1)"; context.stroke();}绘制二次样条曲线
quadraticCurveTo()方法：
quadraticCurveTo(cpX, cpY, x, y);// cpX, cpY描述了掌握点的坐标，x, y描述了曲线的终点坐标绘制贝济埃曲线
bezierCurveTo()方法：它是运用于二维图形运用程序的数学曲线。
bezierCurveTo(cp1X, cp1Y, cp2X, cp2Y, x, y);// cp1X, cp1Y 表示第一个掌握点的坐标 // cp2X, cp2Y 表示第二个掌握点的坐标 // x, y表示曲线的终点坐标
绘制曲线：
function draw() { // 绘制曲线 var canvas = document..getElementById('canvas'); var context = canvas.getContext('2d'); // 开始绘制 context.beginPath(); // 移动 context.moveTo(100,180); // 连线 context.lineTo(110,80); context.moveTo(260,100); context.lineTo(300,200); // 描边 context.strokeStyle="rgba(0,0,0,0.4)"; // 设置宽度 context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(100,180); // 绘制贝济埃曲线 context.bezierCurveTo(110,80,260,100,300,200); // 设置宽度 context.lineWidth = 3; context.strokeStyle="rgba(255,135,0,1)"; context.stroke();}四分之一圆
var canvas = document.getElementById('canvas');var context = canvas.getContext('2d');// 画布宽度200var canX = canvas.width = 200var canY = canvas.height = 200;// 开始绘制context.beginPath();// 四分之一圆context.arc(100, 100, 50, 0, Math.PI0.5, false);context.strokeStyle="white"context.stroke();context.beginPath();context.lineTo(200, 200);context.lineTo(200, 100);context.lineTo(100,50);context.strokeStyle = '#fff';context.stroke();lineCap 设置或返回线条的结束断点样式lineJoin 设置或返回两条线相交时，产生拐角类型lineWidth 设置或返回当前的线条宽度miterLimit 设置或返回最大斜接长度fillRect() 绘制一个实心矩形strokeRect() 绘制一个空心矩形
设置阴影，shadowBlur -context.shadowBlur = 20
createLinearGradient() 创建线性渐变createPattern() 在指定的方向上重复指定的元素createRadialGradient() 创建放射状/环形的渐变addColorStop() 规定渐变工具中的颜色和停滞位置gradient.addColorStop(stop,color)scale() 缩放当前绘图变大或变小rotate() 旋转当前绘图translate() 重新映射画布的(0,0)位置6.利用图像
利用三种方法插入图像
function draw() { var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); // image实例 var newImg = new Image(); newImg.src='../images/dada.jpg' // 指定图像的文件地址 newImg.onload = function(){ // 绘图 context.drawImage(newImg, 0, 0); context.drawImage(newImg, 250,100, 150,200); context.drawImage(newImg, 90,80,100,100,0,0,120,120); }}
在插入图像之前，须要考虑图像加载的韶光，如果图像没加载完造诣已经实行drawImage()方法，就不会显示任何图片。
7.绘制渐变供应了两种渐变的创建的方法：
// 创建线性渐变createLinearGradient()方法// 创建径向渐变createRadialGradient()方法
设置渐变颜色和过渡办法
语法如下：
offset是一个范围在0.0到1.0之间的浮点值 表示渐变的开始点和结束点之间的一部分offset的0为开始点，1为结束点addColorStop(offset, color);绘制线性渐变的矩形
function draw() { var canvas = document.getElementById('canvas') var context = canvas.getContext('2d') // 创建渐变工具，线性渐变 var grd = context.createLinearGradient(0,0,300,0) // 设置渐变颜色 grd.addColorStop(0, '#xxx'); // 设置颜色 grd.addColorStop(1, '#xxx'); // 设置颜色 // 将添补样式设置为线性渐变工具 context.fillStyle = grd; context.fillRect(0,0,300,80);}绘制径向渐变的矩形
function draw() { var canvas = document.getElementById('canvas') var context = canvas.getContext('2d') // 径向渐变 var grd = context.createRadialGradient(50,50,0,100,100,90); // 设置渐变颜色以及办法 grd.addColorStop(0,'#xxx'); grd.addColorStop(1,'#xxx'); context.fillStyle = grd; context.beginPath(); // 圆形 context.arc(100,100,90,0,Math.PI2,true); context.fill();}描边属性
线帽属性：lineCap，表示指定线条的末端如何绘制值：lineCap: butt, round, square，当线条具有一定的宽度才能表现出来。
butt// 定义了线段没有线帽round// 定义了线段的末端为一个半圆形的线帽square// 定义了线段的末端为一个矩形的线帽
线条的连接属性lineJoin，用于两条线条到的连接办法：
miter两条线段的外边缘一贯延伸到它们相交，属性miterLimit是用来描述如何绘制两条线段的交点，是表示延伸长度和线条长度的比值。
默认为10，只有miter利用时有效
lineJoin = [value];round // 两条线段的外边缘该当和一个添补的弧结合bevel // 两条线段的外边缘该当和一个添补的三角形相交8.模式
语法如下：
createPattern(image, repetitionStyle)repeat 表示图像在各个方向上循环平铺repeat-x 表示图像在横向上循环平铺repeat-y 表示图像在纵向上循环平铺no-repeat 表示图像只利用一次
function draw() { var canvas = document.getElementById('canvas') var context = canvas.getContext('2d') var img = new Image(); // 利用Image()布局函数创建图像工具 img.src='../images/xxx' // 指定图像的文件地址 img.onload = function() { // 绘图模式 var ptrn = context.createPattern(img, 'repeat'); // 添补样式 context.fillStyle = ptrn; // 添补矩形 context.fillReat(0,0,500,200); }}
移动变革：
// 移动translate(dx,dy);// 绘制function draw() { var canvas = document.getElementById('canvas') var context = canvas.getContext('2d') // 设置移动偏移量 context.translate(200, 200); // 绘制一个圆形 ArcFace(context);}// 绘制一个圆形function ArcFace(context) { // 绘制一个圆形边框 context.beginPath(); // 绘制圆形 context.arc(0,0,90,0,Math.PI2,true); // 线宽 context.lineWidth=5; // 描边 context.strokeStyle='#f90'; context.stroke(); // 绘制 context.beginPath(); context.moveTo(-30, -30); context.lineTo(-30, -20); context.moveTo(30, -30); context.lineTo(30, -20); context.moveTo(-20, 30); // 曲线 context.bezierCurveTo(-20, 44, 20, 30, 30, 20); context.strokeStyle='#000'; context.lineWidth=10; context.lineCap = 'round'; // 笑脸 context.stroke();}
缩放变换，语法如下：
scale(sx, sy);// sx为水平方向上的缩放因子，sy为垂直方向上的缩放因子
// 示例function draw() { var canvas = document.getElementById('canvas') var context = canvas.getContent('2d') // 移动 context.translate(200,200); // 缩放 context.scale(0.5,0.5); ArcFace(context);}
旋转变换：
rotate(angle)
// 旋转例子function draw() { var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d') context.translate(200,200); // 旋转 context.rotate(Math.PI/6); context.scale(0.5, 0.5) ArcFace(context)}
矩形变形，语法如下：
transform(m1x,m1y,m2x,m2y,dx,dy); // 移动，缩放，旋转1. 移动translate (dx, dy)2. 缩放scale (sx,sy)3. 旋转rotate (A)
